Slide3-7 Web Page Structures

People with visual impairments, low vision, color deficiencies and blind, have cues that provide orientation on the page and in the content.

People with learning disabilities can more easily find and prioritize content on the page.

People using software that only shows the main content of a web page, such as people with cognitive disabilities, will receive better results if the page structure is correctly marked up.

Keyboard users can browse pages and their sections more efficiently. Otherwise, users have to press the tab key multiple times to navigate through all links in each section.

Mobile web users often have access to a reader mode that will only show the main content of the page if it is correctly marked up.

People using certain browser plugins can use landmark roles to jump to specific sections on a page.

There are additional benefits to a good, accessible page structure, beyond those experienced by people with disabilities. As an example, search engines can use the data to better index the content of a page.

A modern browser creates two user interface object models to communicate content. The two models can be compared to a book. A book can be produced in paper format with the cover representing the home page and the pages the content. A book can also be produced in audible format, which depends upon the quality of the reader. Also, a book can be produced in digital format, which can be accessed by mobile readers or braille displays.
The Document Object Model (DOM) to convey the visual aspects of the web page, and the Accessibility Tree Model (ATM) to convey the audio/tactile nonvisual aspects of the web page.

The user interface uses three components to create a good user experience.

1. Device: For the visual model this could be a computer screen display, and for the nonvisual model this could be a screen reader and braille display.
2. Interface: for the visual model this means color, pixel density, fonts, images and spacial orientation. For the nonvisual model this means pronunciation, descriptions, tone/inflection and content structure.
3. Experience: For the visual and nonvisual model this means language, attractiveness and clarity. The DOM is built from HTML and CSS. The ATM is built from HTML and ARIA (Role, State, Properties). JavaScript enhances the user experience.

YouTube: Screen Reader HTML Structures Navigation Demo

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.
YouTube: Screen Reader Skip Link Navigation Demo

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.
YouTube: Screen Reader Region Navigation Demo

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.

1. Do not use text formatting, like large or bold text, to fake Headings.
2. Use real HTML <h1> to <h6> Heading tags.
3. Do not use Headings to achieve visual results only.
4. Nest Headings by their rank (or level).
5. The most important Heading has the rank one <h1>, and the least important Heading rank six <h6>.
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.
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>.

YouTube: Screen Reader Heading Navigation Demo

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.

1. Informative: 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.
2. Decorative: Visual decoration is to add visual appeal to the page, rather than to convey information that is important to understanding the page. Provide a null text alternative (alt=)
3. Functional: 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.
4. 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.
5. 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.
6. 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.
7. 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.

YouTube: Screen Reader Image Text Description Navigation Demo
YouTube: Screen Reader Image Data Table Navigation Demo
YouTube: Screen Reader Image Sonification Navigation Demo

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.

Breadcrumbs are an additional navigation tool that assists both people with and without 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. That is, 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.

Keyboard users get to a widget by tabbing, but once they land on the widget they switch to using arrows keys to navigate, and the enter or space key to activate a control. Otherwise, they would have to tab through every link to get past the widget. By setting the element attribute tabindex=0, an element will be placed in the tab order of the document, So when the user tabs to the element the browser will stop and set focus to that element. ARIA provides mechanisms for non-focusable elements to receive focus through the tabindex property.

It is important to test the keyboard interface without a mouse.

1. Implement the widget with a JavaScript keyboard event handler.
2. Test with a keyboard and screen reader.
3. Press Tab key to move focus to the widget, Shift+Tab key to move focus backward from the widget.
4. Open the widget with Enter or Spacebar key and place focus on the first child element within it.
5. Press Arrow keys to move focus one step in each direction.
6. Press Home and End key to move to the start and end of the control range.
7. Press Page Up and Down to move focus in larger chunks of child elements.
8. Press Escape key to close the widget without performing any action.

The Freedom Scientific JAWS screen reader can be a powerful tool in helping to evaluate the usability of a website. JAWS, a Microsoft Windows based screen reader assistive technology, presents Web pages using the JAWS Virtual Cursor. This allows users to read and navigate a Web page as though it were a text document. Users press the ARROW keys to read line by line, word by word, character by character, and so on. The JAWS Navigation quick keys make it faster and easier to move around on a Web page and anywhere else the Virtual Cursor is active. These commands are all assigned to keys on the main part of the keyboard. A web page well structured with the HTML tags, make it possible for JAWS user to quickly navigate the page and gain an understanding of the page content.
WebAIM: JAWS Screen Reader Tutorial for accessibility testing

NVDA (NonVisual Desktop Access) is a free, open source software, Microsoft Windows based assistive technology, screen reader which enables blind and vision impaired people to use computers. You can control what is read to you by moving the cursor to the relevant area of text with a mouse or the arrows on your keyboard. NVDA can be installed on your computer, or a portable version can be use on an USB thumb drive. NVDA takes the HTML of the page and converts it into a flat document with semantic information in the order the HTML appears in the browser source. As you navigate, NVDA will speak semantic information such as link, heading level 1 through heading level 6, button, images, and much more.
WebAIM: NVDA Screen Reader Tutorial for accessibility testing

VoiceOver is a screen reader program that comes on Mac computers, iPhones, iPads, and iPod touches. VoiceOver is not a standalone screen reader assistive technology. It is deeply integrated into the iOS operating system and all the built-in apps on iOS devices. It can also access most OS X native applications and functions. VoiceOver gives auditory descriptions of each onscreen element, and provides helpful hints along the way (whether you prefer using gestures, a keyboard, or a braille display), and it supports more than 30 languages, including multiple voice options.
WebAIM: Voiceover Screen Reader Tutorial for accessibility testing

The Microsoft Windows Narrator screen reader is a screen-reading app built into the Windows operating system. Narrator is included with every copy of Microsoft Windows, providing a measure of access to Windows without the need to install additional software as long as the computer in use includes a sound card and speakers or headphones. Narrator can assist a blind person in installing a full-function screen reader, assisting the user until their screen reader of choice is up and running. Because Narrator is a lightweight screen reader that requires minimal hooks into the operating system, Narrator can provide speech when a full-function screen reader might be unable to do so, such as during the process of updating hardware drivers.
The Ease of Access settings in Windows are easy to discover, learn and use. Settings are grouped by ability (vision, hearing, and interaction). To get directly to Narrator settings, press Windows logo key plus Control key plus N.
Microsoft: Narrator keyboard commands and touch gestures in Windows