Quite often I receive requests to check the accessibility of a web page and say if it is accessible or not. In most of the cases the request is to identify high level accessibility issues to include in a business presentation. Being a screen reader user I can read through the page and identify few accessibility problems within 15 to 20 minutes. I thought of putting together 10 check points that can be checked by any consultant in 10 minutes and identify if the page is accessible on a high level.
Pre-requisites for the check
- A Windows desktop.
- Mozilla Firefox browser.
- Headings map add onfor Firefox
These 10 check-points are just the methods to identify few accessibility problems on a web page with minimum time, infrastructure and accessibility skill-set.
Begin the Accessibility test
Check 1: Identifying the page title
When the page completes loading read the page title. Try to understand if the page title conveys the intent of the page.
The title of Amazon contact page is “Amazon.in – Contact Us”. Seeing the title itself the user can identify the intent of the page. If the title just says Amazon.in user will not know if it is a Contact page, product page, home page or any other page. Similarly if the page title just says Contact Us it will be difficult to identify is Amazon Contact or Ebay Contact or a FlipKart contact especially when the user reaches the page through search engines.
With just a glance one can say if the page title is descriptive enough or not. If the title is not descriptive or informative violate it against 2.4.2 Page titled.
Check 2: Audio Controls
Check if any audio is automatically played when the page completes loading. Playing audio for more than 3 seconds immediately after the page loads is a WCAG 2.0 violation. Testing this check-point does not need additional time. Just an observation. Most of the pages do not play audio automatically, if any such audio is played for more than 3 seconds ensure that a mechanism is available to stop or pause the music without disturbing the overall system volume. If this check-point is failed, violate it against 1.4.2 Audio controls.
Check 3: Text re-size
Text should be resized up to 200% without the loss of content or functionality. Go to view > Zoom > Text only and check it. Press control + + 6 times to double the existing text size. At this point check the page to identify if the content is overlapped or any content is missed. If the content is overlapping on other content, any text is not available for the user or if any functionality is broken violate it against 1.4.4 text resize.
Check 4: Labels for form elements
Glance through the page and locate form elements if any. If the page contains form elements such as text fields, radio buttons, check boxes, dropdowns etc identify a label is provided adjacent to them informing the user what has to be filled or which option(s) has to be selected. If no visual label is available violate it against 3.3.2 Labels or Instructions.
Note: Titles, placeholders, aria-label, aria-labelledby etc cannot be the only means of labeling the form elements.
Check 5: Label associations with the form elements
If the visual labels are available for the form elements (i.e. if check 5 is passed) verify whether they are associated with their corresponding form fields. Click on the form label and the action associated with the element should be invoked. Eg, by clicking the label of a checkbox should check or uncheck it. The click of labels performs the action associated with the element only when they are associated properly. If the label and form association is not provided violate it against 1.3.1 info and relationships.
Check 6: Keyboard Only
Navigate the page from top to bottom using only a keyboard. Check if all the active elements i.e. links and form elements are navigable and operable using only a keyboard. If any of the actionable elements are not reachable by keyboard or if any of the actionable elements cannot be activated / selected/ filled using a keyboard alone violate it against 2.1.1 Keyboard only.
Check 7: Visible Focus
While performing the keyboard only check identify if keyboard focus indicator is available for all the focusable elements. If the focus indicator is not available for any focusable element or if the focus indicator is not clear a violation can be considered against 2.4.7 focus visible.
Check 8: Multiple ways
While navigating through the page for check 5 and 6 identify any mechanism such as sitemap or search functionality are available. For large websites mechanisms such as search, table of content or sitemap helps the users to identify the desired page or content in multiple ways. If no such mechanisms are available violate it against 2.4.5 multiple ways.
Note: Do not fail it in all the cases. Small websites does not need such functionality.
Check 9: Specifying language attribute
Open the source of the page using the short-cut control + U. In the <HTML … line of the code you should be able to find the language attribute defined (lang=”en”). The value of the lang attribute may change depending on the language of the document. If the language attribute is not specified in the source code violate against 3.1.1 Language of page.
Check 10: Hierarchical heading structure
Run the heading map tool on the page. Check the heading structure of the page. If the heading structure is not hierarchical violate it against 1.3.1 info and relationships .
Last updated on May 11, 2017