Web Accessibility Test Quick Guide

What is Web Accessibility?

Web accessibility means making sure that Web pages and Web applications are usable by people of all abilities and disabilities.
Disabilities including:
● Visual
● Auditory
● Physical
● Speech
● Cognitive
● Neurological
● …

How People with Disabilities Use the Web?

Why You Need to Care About Accessibility?

UN Convention on the Rights of Persons with Disabilities recognizes access to information and communications technologies, including the Web, as a basic human right. - From W3C
United States Laws Rehabilitation Act of 1973 (Sections 504 and 508) – From WebAIM
[Countries with Accessibility Policy] (http://www.w3.org/WAI/Policy/)
Web Content Accessibility Guidelines 2.0 (WCAG)

Four main principles

Principle 1: Perceivable
Information and user interface components must be presentable to users in ways they can perceive.

Principle 2: Operable
User interface components and navigation must be operable
Principle 3: Understandable
Information and the operation of user interface must be understandable.
Principle 4: Robust
Content must be robust enough that it can be interpreted reliably by a wide variety of user agents, including assistive technologies.

Development and Testing Procedure

Code Inspection
Use SOATest Tool or WAVE to scan HTML code
SOATest tool Rules

1.1.1 T1: If the image is not important, use ALT="" and no TITLE attribute or TITLE="" so screen readers can ignore
1.1.1 T1: Image should have a meaningful description in the ALT attribute or use empty ALT text if it is not important
1.1.1 T1: Image should have a meaningful description in the ALT attribute or use empty ALT text if it is not important
1.1.1 T1: The ALT attribute must be defined for an image
1.1.1 T2: Image for an image map must have description in the ALT attribute
1.1.1 T2: AREA element must have a description in the ALT attribute
1.1.1 T2: Text links should be provided for regions of server-side image map or use client-side image map
1.1.1 T3: Provide alternative text for all image-type buttons
1.1.1 T4: Image must have a meaningful ALT text or link text must be used to describe the graphical link
1.1.1 T7: Provide alternative text for each APPLET in the ALT attribute
1.1.1 T8: If OBJECT element is used, provide a text equivalent in the body of the element
1.1.1 T10: A descriptive label should be provided for the multimedia object. Screen Reader test required
1.1.1 T10: A descriptive label should be provided for the multimedia reference. Screen Reader test required
1.1.1 T10: A descriptive label should be provided for the Shockwave presentation. Screen Reader test required

1.3.1 T1 T2: Form controls and their labels should be explicitly associated with the LABEL element
1.3.1 T3: If there are logical groupings of form controls, consider using FIELDSET with LEGEND on each group. Screen Reader test required
1.3.1 T4 T5 T6: If data table, data cells should have HEADERS attribute to list the IDs of the header cells. Screen Reader test required
1.3.1 T4 T5 T6: If data table, provide unique IDs in header cells and reference them in HEADER attribute of data cells. Screen Reader test required
1.3.1 T4 T5 T6: If data table, provide a description via the SUMMARY attribute or CAPTION element. Screen Reader test required
1.3.1 T4: If layout table, the SUMMARY attribute should not be used or should be empty. Screen Reader test required
1.3.1 T4: If layout table, only use TABLE, TR, and TD elements. Screen Reader test required

2.2.2 T1: Avoid blinking text created with the BLINK element
2.4.1 T6: Provide a TITLE attribute for each FRAME element
2.4.1 T6: The FRAME element should have a meaningful description in the TITLE attribute
2.4.1 T6: Provide a TITLE attribute for each IFRAME element
2.4.1 T6: The IFRAME element should have a meaningful description in the TITLE attribute
2.1.1 T2: Mouse events might need to be paired with key events to be accessible. Keyboard test required
2.1.1 T2: onDblClick event handler is not accessible, use onClick instead
2.1.1 T2: Mouse movement events might need to be paired with key events to be accessible. Keyboard test required
2.2.2 T1: Avoid scrolling text created with the MARQUEE element
2.4.2 T1: Provide a TITLE element in the HEAD section of each page
2.4.2 T1: A meaningful title must be provided for each page in TITLE element 

3.1.1 T1: The value of the LANG attribute must be set to one of the ISO 639 language codes
3.2.1 T1: onBlur and onFocus should not be used to initiate a major change of context. Keyboard test required
3.2.2 T1: onChange event may require instructions to describe the behavior before user using the component. Keyboard test required

4.1.1 T1: Include a DOCTYPE declaration at the beginning of a document that refers to a published DTD
4.1.1 T3: The ID attribute must be unique in a document

Keyboard Navigation
● Focus Order
● HTML elements and related keystrokes
● Using both keyboard and mouse
● No Keyboard Trap
● Form controls
● Others - Specified Requirements

Visual Inspection

● High Contrast
√ all content readable
√ all content usable
● Color and Information
● Others
√ Test blinking, flashing, moving and scrolling content
√ Test video-only, audio-only and multimedia content

Screen Reader

● Testing
√ Make sure screen readers announce enough information so users can NAVIGATE the content
√ Make sure screen readers announce enough information so users can UNDERSTAND the content
√ Make sure screen readers announce enough information so users can OPERATE the content
● ARIA Support