Objective
Accessibility evaluations are intended to ensure that a website is accessible to all user groups. When we say “all user groups,” we mean that a website is usable by an abled user, as well as a specially abled user, such as blind or partially blind users, deaf users, users suffering from epilepsy or Parkinson’s, among others. Web accessibility testing ensures that a website is compliant with legal obligations and enhances the usability of products for users who have single or multiple forms of disabilities. An accessibility evaluation also helps us to fulfill the social responsibility of making a global usable product or website. There are many checklists, guidelines, and tutorials available in the market to complete this evaluation. The purpose of this blog is to explain a few techniques and give a step-by-step execution process.
Web Accessibility Guidelines
Web accessibility guidelines are a set of checklists, which ensure that web content is accessible to all user groups. There are various guidelines defined by different countries, which help fulfill the usability requirements specific to each country. Below are the most common accessibility guidelines.
Section 508: Section 508, an amendment to the United States Workforce Rehabilitation Act of 1973, is a federal law mandating that all electronic and information technology developed, procured, maintained, or used by the federal government be accessible to people with disabilities. You can click here for a detailed checklist for each and every guideline under Section 508.
WCAG: Web Content Accessibility Guidelines is part of a series of web accessibility guidelines published by the Web Accessibility Initiative (WAI) of the World Wide Web Consortium (W3C), the main international standards organization for the internet. They consist of a set of guidelines for making content accessible, primarily for people with disabilities, but also for user agents, including highly-limited devices such as mobile phones. The current version, WCAG 2.0, was published in December 2008 and became an ISO standard, ISO/IEC 40500:2012 in October 2012. you can see the WCAG 2.0 guidelines by clicking here.
Accessibility Evaluation Approach Using Tools
An accessibility evaluation of a website or webpages can be started as soon as the scope of the evaluation is decided. We can start with a quick round of tests using Achecker, and then we can proceed further with manual testing using screen readers, color contrast analyzers, and assistive devices like keyboards. Below is the detailed description on how to assess the accessibility of websites.
Accessibility Evaluation Using Achecker
We can start the accessibility evaluation using Achecker. Achecker is a web accessibility evaluation tool that helps developers and testers conduct a quick test of the accessibility of webpages based on various accessibility guidelines. Below are the steps to perform when testing webpages using Achecker.
Log on to http://achecker.ca/checker/index.php
Select one of the “Check Accessibility by:” options (Web Page URL/HTML File Upload/Paste HTML Markup)
Enter Webpage URL/Browse HTML file/ Paste HTML markup and click on “options.” See that the type of validation you want to perform and its standard guidelines are posted
Select validation type, select guidelines you want to test against, select report format, and click “Check It” button
The “Check It” button should display an issues report to you. These reports are categorized based on three problem types: known problems, likely problems, and potential problems
Achecker will also say which issue comes under which guideline, and suggest possible repairs
Click on Check #, which will bring up a pop-up window stating to which guidelines the problem belongs, as well as detailed information about the issue, steps to check it, how to repair it and an example of the repair, expected results from the repair, etc
Accessibility Evaluation Using Screen Reader
A screen reader allows users with a partial or complete visual disability to read the screen. There are a number of screen readers available in market; the most popular screen readers are NVDA and Voice Over. Below are the details of these screen readers
Screen Reader
Supporting OS
Screen Reader Description
NVDA
Microsoft Windows
Screen Reader for Windows. You can visit its resources website for a quick overview of commands of NVDA
Voice Over
Apple Mac
Mac in-build Screen Reader. You can visit its two guides (here and here) for a quick overview of commands of Voice Over
An accessibility evaluation using a screen reader ensures that a user who is blind or has very low vision can read the screen. Screen readers help visually-impaired users to read text, headings, lists, tables, forms, links, etc. used inside a webpage. Below are examples of accessing different controls present on a webpage through a screen reader.
Accessing Headings on a Webpage
In order to read all of the headings on a webpage:
Press “H” key on keyboard—the screen reader will read the heading out for you, as well as the level of the heading
Continue to press “H” key—the screen reader will read out the next headings and their levels
Press “H+1″ on keyboard—the screen reader will read you the heading at level 1. If there is no heading available at level 1, it will tell you “no text heading at level 1″
Press “H+2/3/4/5/6″ on keyboard—the screen reader will read you the heading and the level in relation to the selection of 2/3/4/5/6
Accessing Tables on a Webpage
In order to read a table present in a webpage:
Press “T” on keyboard—the screen reader will read you “table with x rows and y columns” and the value of row 1 and column 1
Continue to press “T” key—the screen reader will read you the next table available on the webpage in the same format as above
Press “Ctrl+Alt+Right Arrow” on keyboard—the screen reader will read you “Column number and value of cell” and then move on to the next cell on the right side of the table
Press “Ctrl+Alt+Down Arrow” on keyboard—the screen reader will read you “Row number and value of cell” and move down to the next of the table
Press “Ctrl+Alt+Left Arrow” on keyboard—the screen reader will read you :Column number and value of cell” and then move to the previous cell on the left side of the table
Press “Ctrl+Alt+Up Arrow” on keyboard—the screen reader will read you “Row number and value of cell” and then move one cell up on the table
Accessing Forms on the Webpage
In order to read the form present on a webpage:
Press “F” on keyboard—the screen reader will read you the form with the label association of the form’s first field
Press “Enter/NVDA+Space” on keyboard—you will be able to enter text into the form fields
If you want to exit the form mode, press “NVDA+Space” on keyboard. In this case, NVDA stands for the “Insert” key by default, but can be changed to “caps lock” by going to Preferences -> Keyboard settings
Press “Tab” on keyboard—this will navigate to the next form control, and the screen reader will read you the associated field’s label
Press “Shift+Tab” on keyboard—this will navigate you through the previous form control, and the screen reader will read you the associated field’s label
Press “Space Bar” on keyboard—this will allow you to select/deselect checkboxes, and the screen reader will read you all of the “checked/unchecked” options
Press “Up/Down” on keyboard—if you want to select a radio button from a list of radio buttons, this will allow the screen reader to read you the associated label text radio button that is checked <x-radio button #> out of <y -# of total radio buttons>
Use any of the following to submit your form: press “Enter” on keyboard in form mode/Press “B” on keyboard and search for a button, then press “Enter” on keyboard/keep pressing “Tab” to find the submit button, then press “Enter”
Press “X”/”C”/”R” as a quick key command for Checkbox/Combobox/Radio button respectively and the screen reader will read you the Checkbox/Combobox/Radio button, if any, otherwise it will read “No next Checkbox/Combobox/Radio button”
Accessing Links on the Webpage
In order to read links present on the webpage:
Press “Tab” on keyboard to jump to the next link/next form element. The screen reader will read you the next link as “<Link Text> link”
Press “K” on keyboard for the next link on the form. The screen reader will read you the “<Link Text> link” if there is a next link available, otherwise the screen reader will read “No next link”
Press “NVDA+F7″ on keyboard—a dialogue box will be displayed where all links, headings, and landmark elements listed for the form. To read all of the links, headings, and landmark elements, you can use the “Tab” key and radio buttons
Press “U” on keyboard—the screen reader will read you the “<Link Text>” from any unvisited links on the form
Press “V” on keyboard—the screen reader will read you the “<Link Text>” from any visited links on the form
Accessibility Evaluation Using High Contrast Plug-Ins
A high contrast mode evaluation of a webpage is a very important part of the accessibility evaluation. After changing the color scheme to a different high contrast mode, the tester needs to evaluate that all of the content of the page changes in relation to the selected color scheme, as well as ensuring that important information is not removed from the webpage.
You can enable high contrast mode on Windows using Control Panel -> navigate to “Ease of Access Center” -> click on “Make the computer easier to see.” Under the “High contrast” section, select a high contrast color scheme
Another option is to use the “high contrast” extension for the Google Chrome browser, which is available here
In order to start with the “High Contrast” mode evaluation, you first need to open the website that is to be evaluated in Google Chrome -> click on the “High Contrast” extension at the top right corner of the browser window -> slide the window of “High Contrast” displayed in on the right hand side as shown below. Now follow the steps given below for evaluation
1. A commonly used theme is “grey scale.” Select the “grey scale” option from the list of themes and verify that all links and other important information is visible in the grey scale mode
2. You can also use the “Inverted grey scale” theme by selecting that option from the theme list
3. “High contrast” also provides you with the themes “Increased Contrast,” “Inverted Color”, and “Yellow on Black,” which you can also use to evaluate the webpage’s content
The post How To Evaluate Web Accessibility for 508 Compliance appeared on 3Pillar Global.