Slide5-9 Accessibility Testing Strategies

Being able to traverse barriers means being able to see possibility where there is none. It means being able to open opportunities for yourself and others to create more innovative, effective solutions to the worlds problems. When we open ourselves up to possibility, we solve problems that were seemingly without solutions.
Niwal Sheikh, User Experience (UX) Collective

Effective evaluation of Web accessibility requires more than simply running an evaluation tool on a Web site. Comprehensive and effective evaluations require evaluators with an understanding of Web technologies, evaluation tools, barriers that people with disabilities experience, assistive technologies and approaches that people with disabilities use, and accessibility guidelines and techniques.

Part 1: Testing With A Screen Reader

The Freedom Scientific JAWS (Job Access Work Station), a Microsoft Windows based screen reader assistive technology, can be a powerful tool in helping to evaluate the usability of a website. JAWS 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 Freedom Scientific JAWS screen reader

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 (NonVisual Desktop Access)

The Microsoft Windows Narrator screen reader is a screen-reading app built into the Windows operating system. Microsoft Narrator was written by Professor Paul Blenkhorn in 2000 and has been included with every version of Windows since that time.
The Microsoft Windows Narrator screen reader

VoiceOver is a built-in screen reader in Apple products. VoiceOver is not a standalone screen reader assistive technology. It is deeply integrated into the iOS operating system, and as developers update their apps to take advantage of the accessibility interfaces provided by Apple, their apps can start working with VoiceOver right away. 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.
VoiceOver

TalkBack is the gesture based Google screen reader included on Android devices. TalkBack gives you eyes-free control of your device. The setup of your device depends on the device manufacturer, Android version, and TalkBack version.
Android

Part 2: The User Experience

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 Region 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.

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>.
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 ComboBox 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 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: 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=)
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.
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 Alt Text 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 Data Table 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 Sonification 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

Part 3: Usability Practice

The Accessible University Demo Site has several WCAG criteria failures. View the Before Demo page, document your accessibility issues, and then compare your results with the After Demo page.
Accessible University: Web Page Accessibility Issues Practice

Test for:

1.1 Non-Text content
1.2 Time-based Media
1.3 Information Content Relationships
1.4 Distinguishable

Test for:

2.1 Keyboard Accessible Interface
2.2 Enough Time To Interact
2.3 Seizures And Physical Reactions
2.4 Navigable Content
2.5 Input Modalities

Test for:

3.1 Readable Content
3.2 Predictable Web Page Behavior
3.3 Input Assistance

Test for:

4.1 Device and Software Compatibility

Slide5-9 Accessibility Testing Strategies

Resources