ADWebKey’s 16 Steps

Manual and Automated testing became with their list of pros and cons. Ultimately, automated testing can be a useful tool but should always be complemented with manual test reviewing of a webpage with WCAG can be overwhelming for a novice. This 16-step method was created to provide an easy step-by-step guide using only a few open-source tools including the screen reader, NVDA, the Web Developer Extension, WAVE extension, Color Contrast Analyzer, and more!

Need a website to practice on? We have built 2 new demo websites: one good and one with some sneaky accessibility issues on it. Both look almost identical, relieving us of the untruth that accessible is equal to unattractive. Check them out as you follow through our new version of the 16 steps! 

 

Good Demo Site

Bad Demo Site

 

The steps are:

Step 1: Keyboard Accessibility
Step 2: Video Accessibility
Step 3: Movement and Distractions
Step 4: Screen Reader Navigation
Step 5: Accessible Forms
Step 6: Listening with a Screen Reader
Step 7: Interactive Elements with a Screen Reader
Step 8: Alternative Text
Step 9: Heading Structure
Step 10: Data Tables
Step 11: Links 
Step 12: Page Title
Step 13: Validating Code 
Step 14: WAVE Extension
Step 15: Colour Contrast Analyzer (CCA)
Step 16: Mobile Considerations

 

Software Needed

To follow the process, the following software is recommended. All the listed software in this section is open source and free of charge.

Google Chrome Extensions:

WAVE http://wave.webaim.org/toolbar/

HeadingsMap https://chrome.google.com/webstore/detail/headingsmap/flbjommegcjonpdmenkdiocclhjacmbi

Fandango SEO https://chrome.google.com/webstore/detail/fandangoseo-extension/chanllebmhpihdidogiopcgfnhcmlhek/related?hl=en

FireFox Extensions:

Web Developer Toolbar https://chrispederick.com/work/web-developer/  

A11y Outline https://addons.mozilla.org/en-US/firefox/addon/a11y-outline/

NVDA

Screen reader – free but will ask if you want to donate.  There is no obligation. https://www.nvaccess.org/download/

Note: If you are using Apple system such as a MacBook please use instructions for VoiceOver, the built-in screen reader for iOS.

Colour Contrast Analyzer

Colour contrast ratio tool http://www.paciellogroup.com/resources/contrastAnalyser

 

Keyboard Accessibility

What is it?

Keyboard accessibility means that every interactive element is accessible via keyboard without the need to use a mouse or a trackpad.

Who does it effect?

Users who are blind cannot see to use a mouse and users with low vision may have trouble finding or tracking a pointer indicator on the screen. Also, people with hand tremors find using a mouse very difficult and therefore usually use a keyboard.

Ensuring the keyboard has access to interactive elements also allows for differing types of assistive technologies, such as switches, foot pedals, and puff devices.

Testing Keyboard Accessibility

Tab through the entire page using the ‘Tab’ key.

  • Does the tab order make sense?
  • Is every item that receives focus visible?
  • When an item receives focus, is that item styled in such a way that the focus is obvious?
  • Are there any keyboard traps? A “keyboard trap” occurs when a person using a keyboard cannot move away from an interactive element/control using just the keyboard.

 

 

Video Accessibility

What is it?

Video accessibility means that users who have vision or hearing impairments can perceive the content in a video. 

Who does it effect?

Users who are blind cannot see any information in the video which is not given verbally. Users who are deaf or hard of hearing are unable to perceive content that is only presented in the audio of the video.

Testing Video Content

Watch any videos on the page looking for:

  • Are the videos captioned?
  • Do the captions make sense?
  • Is there a transcript available?

The answer to all 3 of the above questions should be yes!

Video bonus checks:

  • Is there extended audio coverage?
    • Extended audio describes what is happening when no words are being spoken, for example, “Bill enters the room, appearing anxious.”
  • Is there Sign language available for the video?
    • Sign language is the first language for the Deaf community. Providing Sign language ensures even more people can understand clearly the words said in the video.

Movement and Distractions

What is it?

Movement and distractions should be under user control, meaning there should be a move to stop, pause or hide the movement on a page. Movement and distractions can be defined as anything which moves on the screen for more than 5 seconds without stopping. Common movements found on web pages are automatically updated or scrolling information, blinking content, moving carousels, or slideshows.

Who does it effect?

Moving content can cause symptoms in users with epilepsy. It can also be a severe distraction for some people. Certain groups, particularly those with attention deficit disorders or users with dyslexia may find it difficult to concentrate on other parts of the Web page with blinking or moving content.

Testing

  • Is there any movement that starts automatically when the page is loaded?
  • What accessibility issues do you see?
  • Would an epileptic user be able to use this site?
  • Would a dyslexic user be able to concentrate and read all the information on this site?

Screen Reader Navigation

What is it?

Having correctly coded links, landmarks, headings, etc. ensures that users of assistive technology, such as screen readers, can also navigate via these features quickly.

Who does it effect?

Users who rely on assistive technology to navigate digital materials.

Testing

Use A11y Outline extension in Firefox by selecting the icon and using the dropdown list to look a headings, landmarks and links

NVDA Instructions

Use NVDA+F7 and try navigating via the Elements List

VoiceOver Instructions

Open the rotor by pressing VO + U, then use the Left Arrow and Right Arrow keys to choose. Once a page element type is selected, use the Up Arrow and Down Arrow to select a particular element and Enter to activate it.

Questions to ask

Write down any issues or anomalies you find

  • Empty headings?
  • Empty links?
  • Did it all make sense?
  • If you were a blind user, would you have missed any important information?

Accessible Forms

What is it?

For online forms to be accessible, they must be coded with best practices in mind. This means ensuring form fields have descriptive labels both visually and programmatically, ensuring there is keyboard access to all elements, and any error messages are accessible. For an error message to be accessible it must not rely on color alone, such as an input fields border turning read and the error information must be available to assistive technology, such as a screen reader.

Who does it effect?

Users who are affected have limited mobility, color blindness, and those who rely on assistive technology. 

Testing

If there are any forms or input fields (i.e. Search feature)

  • Are the form fields properly labeled?
  • If you make a mistake (try to make at least one), do the error messages display appropriately?
  • Do the error messages rely on color alone for you to locate them?

Listening with a Screen Reader

What is it?

By listening with a screen reader to everything in ‘read all’ mode, you’ll be able to hear all the content available to the assistive technology. This is great to ensure all informative content is read and in a meaningful sequence.

Who does it effect?

Users who rely on screen readers need to be able to access all the information.

Testing

NVDA Instructions

Go to the website page, turn on NVDA

Use the ‘read all’ mode (NVDA+down arrow)

VoiceOver Instructions

Use the ‘read all’ mode (VO + A Start reading)

Questions to ask

  • Did you hear everything?
  • Does it make sense?

Interactive Elements with a Screen Reader

What is it?

Using the ‘tab’ key while listening with a screen reader, means you’ll be able to hear each interactive element as it would be read to a screen reader user.

Who does it effect?

Users who rely on screen readers need to be able to access all the inactive elements.

Testing

NVDA Instructions

Listening to NVDA - use the ‘tab’ key to move around to all the links, buttons, input fields, etc.

VoiceOver Instructions

Listening to VoiceOver - use the ‘tab’ key to move around to all the links, buttons, input fields, etc.

Questions to ask

  • Did you hear everything?
  • Does it make sense?
  • Did you hear all the interactive elements?
  • Are they labeled appropriately?
  • Was the focus order logical?

Alternative Text

What is it?

Images for those who use assistive technology need descriptive meaningful “alt text” applied to it. The alt text can then be read aloud converted to braille.

Who does it effect?

Users who rely on screen readers can hear the description provided as they cannot see the image. Low bandwidth users, where images may not show reveal the description of the image in text instead.

If an alternative text is not available or appropriate the information being conveyed in the image is missed by those users of assistive technology

Testing

Using the Web Developer Toolbar extension in Firefox

To check Alt Text - Images>Display Alt Attributes

  • Do all the images have alternative text?
  • Do decorative images have a null alternative text? (“alt=””)
  • Is the alternative text descriptive, and correct?

 

Heading Structure

What is it?

Headings are often in a larger and bold font to visually find the area on the page a user would like to read or use. Someone who relies on assistive technology relies on these headings being available not just visually but also programmatically.

Who does it effect?

Users who rely on assistive technology to understand, give context, and allow for navigation of digital materials.

Testing

Using the HeadingsMap extension in Chrome

To pull out headings so they show out of context, select the HeadingsMap icon

Best practice note: It is ideal to have only one H1 element on a page and that all other headings are arranged hierarchically following that H1 element.

It is a failure to have empty heading elements, or to have what appear to be headings by appearance but which do not have semantic (HTML) mark-up as a heading.

 

Data Tables

What is it?

Correctly code data tables allow for users who rely on assistive technology to hear the table header associated with each data cell. This gives context and meaning to the information.

Who does it effect?

Users who rely on assistive technology to understand, give context, and allow for navigation of digital materials.

Testing

Using the Web Developer Toolbar in Firefox

Outline>Show Element Tag Names>Outline Table Cells

All data tables should have Table Header (TH) and Table Data (TD) elements. There should be no empty cells, rows, or columns.

Best practice note: Tables should be used for data only, and not for layout or display purposes. However, if tables have been used for layout, they should not have TH elements.

 

 

 

Links

What is it?

Link text should be clear and concise, telling the user where or what they can expect when the link is selected.

Who does it effect?

Users with cognitive disabilities and those relying on assistive technologies, such as voice activation software and screen readers.

Testing

Use the A11y Outline extension in Firefox by selecting the icon and using the dropdown list to review links.

  • Do the links clearly state the destination?
  • Are there any empty links?
  • Are there linked images or icons with insufficient or no alt text applied?

Best Practice Note: Do not use generic link text (e.g. ‘Click here, ’Read More’)

 

Page Title

What is it?

Good page titles are particularly important to help people know where they are and move between pages open in their browser. The first thing screen readers say when the user goes to a different web page is the page title.

Who does it effect?

Users rely on assistive technologies, such as screen readers. All users benefit when many tabs in a browser are open at once, descriptive titles allow for easy orientation and navigation between tabs.

Testing

Using the Fandango SEO Extension in Chrome

Select the Fandango SEO icon>scroll or select link in to go directly to Meta Information

  • Does the title briefly describe the content of the page i.e. Contact Us
  • Is the title different from other pages on the website?

Best practice note: It is recommended to place the purpose of the page in front of the organization’s name because of how browsers shorten the title when more than one window is open e.g. use: Contact Us - Example Company 

 

Validating Code

What is it?

Valid code for specific WCAG requirements is a Level A requirement and does not require developer skills to check

Who does it effect?

Current and future assistive technology is created to work with code that is done to the standard set. By using shortcuts and invalid code, it is possible to exclude some assistive technology now and in the future from being able to work with the page.

Testing

Using either the Fandango SEO Extension in Chrome or the Using the Web Developer Toolbar in Firefox

Tools>Validate HTML

  • Are there any errors remaining?

If errors are remaining, the code is not valid. This constitutes a WCAG Level A accessibility error and should be referred to a developer to fix.

 

WAVE Extension

What is it?

The WAVE Chrome extension provides a mechanism for running WAVE reports directly within Google Chrome.

The extension report runs entirely within your web browser, no information is sent to the WAVE server. This ensures 100% private and secure accessibility reporting. The toolbar can check intranet, password-protected, dynamically generated, or sensitive web pages.

Testing

Selection on the WAVE icon in browser toolbar

  • WAVE gives a summary of errors, warnings, features, structural elements, and ARIA. The second tab provides details of each of the items in the summary. The Reference tab explains what each item is, why it matters and how to fix it. An annotated version of the code is also provided.
  • One of the best uses for the WAVE extension is reporting issues to the person responsible for making corrections. They can see where the issue is and have a clear indication of how this affects the user.

Color Contrast Analyzer (CCA)

What is it?

The CCA is a tool that shows the color contrast ratio for any foreground and background color combination.

It features one than one way to select color including, a dropper/picker, Hex code, RGB. It then reports the ratio and showings a grading of a pass or fails for WCAG AA or Level AAA

Who does it effect?

Color blindness affects 1 in 10 men and 1 in 200 women. Those with cataracts that clouds the lens in the eye, glaucoma, low vision, and decreased and/or blurry vision all benefit from good strong color contrast.

Testing

Open CCA> Select the foreground color picker and position it over the foreground color> Select the background color picker and position it over the background-color

Results will depend on whether the text is large or normal size.

  • Normal size text requires a contrast ratio of 4.5:1 for Level AA
  • Large size text requires a contrast ratio of 3:1 for level AA

If color alone is used to portray information, a contrast of at least 3:1 is required.

Informative icons, user interface components, borders for input fields, graphical objects all require contrast of at least 3:1 with the background

Note: Large text is 24 px and over or 19 px bold and over. This definition of normal and large are defined within WCAG and are fixed requirements. 

 

Mobile Considerations

What is it?

With more than 80% of people accessing the online world on their mobile phone or tablet, these simple checks will help to ensure digital material is accessible on a mobile device.

Who does it effect?

All mobile device users.

Testing

Open the website/app on a mobile device

  • Check both Portrait and Landscape view to ensuring the content of the website is still available and usable regardless of which way the device is being held
  • Check that the website is mobile responsive, reflowing into a single column so the user is not required to pinch to zoom and swipe horizontally to see all the content
  • If the website or app is using motion detection, check these types of enhancements have an alternative to the action (such as a button) and the ability to turn the enhancement off.

 

This work is copyright. Apart from any use permitted under the Copyright Act 1968, no part may be reproduced by any process, nor may any other exclusive right be exercised, without the permission of Web Key IT Pty Ltd