Slide3-4 Web Page Structures

Every page should have its own, unique TITLE element.

People who use magnifiers to view a web site find skip links useful. Often a person using a magnifier will only see a small part of the screen. Often it is not obvious where the content is from this small part of the screen.

The web page should be divided into perceivable block areas, which contain semantically associated information called Regions. Each region can be divided into logical subregions as needed. For users with cognitive and learning disabilities the landmark information could be used to expand and collapse these regions of your page to aid in simplifying the user experience by allowing the user to manage the amount of information processed at any one time.

It is important that headings are nested properly in order to convey the structure and hierarchy of the page. It is important not to skip heading levels (Example, a H4 should not follow an H2). Screen reader users scan a web page using a variety of features, such as links, form controls and headings. Most screen readers can pull out the headings, and present them to the screen reader user in hierarchical order. This can provide a great amount of information to users and help them navigate through the page effectively.

Structural labels should be used to help describe different components of the page to screen reader users. Providing hidden structural labels assists screen reader users to identify lists of links and access the information provided via the hierarchy. The inclusion of structural labels is an effective and relatively simple solution to the significant problem some screen reader users have in identifying the different elements on a page. It is possible, through the use of CSS, to include these labels without affecting the visual appearance of the page.

Breadcrumbs are an additional navigation tool that assists both the general public and people with disabilities to navigate through a large or complex site. It is especially important where other navigation mechanisms, such as the Back button, have been broken. Breadcrumbs should provide the hierarchical position not the chronological pathway in the site. For instance, even if a user came to a particular part of the site through inline links, the breadcrumbs should provide the navigational pathway to that page.

Use HTML elements for content structure correctly. HTML tags communicate the organization of the content relationships. Watch the video then using a screen reader navigate the web page using the keyboard.
YouTube: Screen Reader HTML Structures Navigation Demo
CTV News Canada News Top Stories

Watch the demonstration video, then using a screen reader navigate Region Landmarks with the keyboard, and compare the user experience on these two web pages.
YouTube: Screen Reader Region Navigation Demo
CTV News Canada News Top Stories
UK BBC News

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.

Guideline 1: Do not use text formatting, like large or bold text, to fake Headings.

Guideline 2: Use real HTML <h1> to <h6> Heading tags.

Guideline 3: Do not use Headings to achieve visual results only.

Guideline 4: Nest Headings by their rank (or level).

Guideline 5: The most important Heading has the rank one <h1>, and the least important Heading rank six <h6>.

Guideline 6: 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.

Guideline 7: 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>.

Try It: Watch the demonstration video, then using a screen reader navigate Headings with the keyboard on the web page.
YouTube: Screen Reader Heading Navigation Demo
Web Content Accessibility Guidelines (WCAG)

Skip Links allow keyboard users to jump over web page content to a specific area on the page. This prevents unnecessary repeated taps on the Arrow and Tab keys. Watch the video then using a screen reader use the Skip Links on the web page with the keyboard.
YouTube: Screen Reader Skip Link Navigation Demo
W3C Before and After Demonstration

Watch the video then using a screen reader use the Single-Select ComboBox on the web page with the keyboard.
YouTube: Screen Reader ComboBox Navigation Demo
W3C Select-Only Combobox Example

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.

Informative Images: Images that graphically represent concepts and information, typically pictures, photos, and illustrations. The text alternative should be a short description conveying the essential image information.

Decorative Images: Provide a null text alternative (alt=) when the 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 button should describe the functionality of the that element rather than the visual image. Such as a printer icon to represent the print function or a button to submit a form.

Images Of Text: Readable text presented within an image, if not a logo, should be avoided. If images of text are used, the text alternative should contain the same words as in the image.

Complex Images: Complex images, such as graphs and diagrams should 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.

Try It: Watch the videos to learn more.
YouTube: The Lion King
YouTube: What do pictures SOUND like?

Watch the video demonstration, then using a screen reader navagate to each image using the keyboard.
YouTube: Screen Reader Image Text Description Navigation Demo
Seven awesome accessibility features at the Museum

Watch the video demonstration, then using a screen reader navagate to each image Chart and expand the Data Table using the keyboard.
YouTube: Screen Reader Image Data Table Navigation Demo
Statistics Canada

Watch the video demonstration, then using a screen reader navagate to each image Chart and activate the alternative image format using the keyboard.
YouTube: Screen Reader Image Sonification Navigation Demo
NNELS: COVID-19 Accessible Information