Web Key IT’s 16 Steps

Manual and Automated testing each come with their own list of pros and cons. Ultimately, automated testing can be a useful tool but should always be complemented with manual testing. Performing review 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 and 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 exactly the same, relieving us of the untruth that accessible equal 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

In order to follow the process the following software is recommended. All the listed software in this section are open sources 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 who may have trouble finding or tracking a pointer indicator on 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 user who have vision or hearing impairments are able to perceive the content in a video. 

Who does it effect?

Users who are blind cannot see the any information in the video which is not given verbally. Users who are deaf or hard of hearing are unable to perceive content which 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 are able to 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 stop.  Common movements found on webpages 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 user 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 which 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, are able to also quickly navigate via these features.

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 practice in minds. This means ensure 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 colour along, 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, colour 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 labelled?
  • If you make a mistake (try to make at least one), do the error messages display appropriately?
  • Do the error messages rely on colour 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 a great to ensure all informative content is read and in a meaning 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 labelled appropriately?
  • Was the focus order logical?

Alternative Text

What is it?

Images for those who use assistive technology need to descriptive meaningful “alt text” applied to it. The alt text can then be read aloud, or convert it 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 of 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 give 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 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 A11y Outline extension in Firefox by selecting the icon and using the dropdown list to review links.

  • Does 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 relying 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 organisation’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 which 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 there are errors 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.

Colour Contrast Analyzer (CCA)

What is it?

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

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

Who does it effect?

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

Testing

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

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 colour 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 a contrast of at least 3:1 with the background

Note: Large text is considered to be 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 ensure the websites content 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