3.2: Accessibility Page Structures

Well-structured content allows more efficient navigation and processing with a wide variety of web browsers. Typically, user interfaces are represented as a hierarchical tree.

For example, a web page would contain several elements, the first of which might be a menu bar. The menu bar would contain a list of links pointing to different pages of the website.

Assistive technologies, like screen readers, can make interpret the code of the page to get the information about each element on the screen.

What Is HTML?

HTML is the standard markup language for creating web pages. Web pages may look different from one another, but they all tend to share similar standard components.

• HTML stands for Hyper Text Markup Language.
• HTML is the standard markup language for creating web pages.
• HTML describes the structure of a web page.
• HTML elements label pieces of content such as this is a heading, this is a paragraph, this is a link, etc.

Some HTML element structures

Region Landmarks

Landmarks identify regions of content on the page. Proper use of landmarks provides a navigable structure where common sections or features of pages can be easily accessed or skipped over if they represent repeated blocks of content.

If the appropriate landmark roles are NOT used, the type or purpose of each content region will be less obvious to users of assistive technologies. In the worst-case scenario, when NO landmark roles are present, the content on the page will be presented to users of assistive technologies as a single undifferentiated block of text.

Some common landmarks are:

• Banner Region
• Main Region
• Footer Region
• Navigation Region

Headings

Use headings for content structure, correctly. Headings communicate the organization of the content on the page. Web browsers, plug-ins, and assistive technologies can use headings to provide in-page navigation relationships.

• Do not use text formatting, like large or bold text, to fake headings.
• Use real HTML <h1> to <h6> heading tags.
• Do not use headings to achieve visual results only.
• Nest headings by their rank (or level).
• The most important heading has the rank one <h1>, and the least important heading rank six <h6>.
• Headings with an equal or higher rank start a new section. Headings with a lower rank start new subsections that are part of the higher ranked section.
• Skipping heading ranks can be confusing and should be avoided where possible. That is, make sure that a <h2> is not followed directly by an <h4>.

Images

Images must have text alternatives that describe the information or function represented by them. This ensures that images can be used by people with various disabilities. Appropriate text alternatives depend upon the purpose of the image.

• Informative images: Images that graphically represent concepts and information, typically pictures, photos, and illustrations. The text alternative should be at least a short description conveying the essential information presented by the image.
• Decorative images: Provide a null text alternative (alt=””) when the only purpose of an image is to add visual decoration to the page, rather than to convey information that is important to understanding the page.
• Functional images: The text alternative of an image used as a link or as a button should describe the functionality of the link or button rather than the visual image. Examples of such images are a printer icon to represent the print function or a button to submit a form.
• Images of text: Readable text is sometimes presented within an image. If the image is not a logo, avoid text in images. However, if images of text are used, the text alternative should contain the same words as in the image.
• Complex images: Such as graphs and diagrams: To convey data or detailed information, provide a full-text equivalent of the data or information provided in the image as the text alternative.
• Groups of images: If multiple images convey a single piece of information, the text alternative for one image should convey the information for the entire group.
• Image maps: The text alternative for an image that contains multiple clickable areas should provide an overall context for the set of links. Also, each individually clickable area should have alternative text that describes the purpose or destination of the link.