How To Evaluate Web Accessibility for 508 Compliance

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.

  1. 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.
  2. 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.

  1. Log on to http://achecker.ca/checker/index.php
  2. Select one of the “Check Accessibility by:” options (Web Page URL/HTML File Upload/Paste HTML Markup)
    section508_1
  3. 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
    section508_2
  4. Select validation type, select guidelines you want to test against, select report format, and click “Check It” button
    section508_3
  5. 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
    section508_4
  6. Achecker will also say which issue comes under which guideline, and suggest possible repairs
    section508_5
  7. 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
    section508_6
    section508_7

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 ReaderSupporting OSScreen Reader Description
NVDAMicrosoft WindowsScreen Reader for Windows. You can visit its resources website for a quick overview of commands of NVDA
Voice OverApple MacMac 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
    section508_8
  • 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
    section508_9
  • 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
    section508_10
    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
    section508_11
    2. You can also use the “Inverted grey scale” theme by selecting that option from the theme list
    section508_12
    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
Alok Dixit

Alok Dixit

Module Lead QA Engineer

Alok Dixit is a Module Lead QA Engineer for 3Pillar Global. He has around 7 years of experience in Healthcare, Video on Demand, E-learning, Finance, and Accessibility domains. He also has vast experience in Manual testing and other types of testing such as Functional, Regression, System, Accessibility, and Acceptance. Prior to joining 3Pillar, he worked in Schneider Electric India.

Leave a Reply

Related Posts

Jessica Hall Presents Webinar on Product Strategy Jessica Hall, 3Pillar's Senior Director of Product Strategy & Design, recently presented a Product Lunch webinar in conjunction with Product Colle...
Take 3, Scene 28 – Do You Have a Productive Product Mi... In Take 3, Scene 28, we talk to Massi Behbahani and Cindy Halim about what they learned at the Mind The Product conference, why empathy matters when w...
Money 20/20 Preview: What We’re Looking Forward to at ... Two 3Pillar team members will be attending Money20/20 in Las Vegas the week of October 23, 2017. Billing itself as the “World's Largest Payments &...
Credit Card Fraud Detection – An Insight Into Machine ... The importance of Machine Learning and Data Science cannot be overstated. If you are interested in studying past trends and training machines to learn...
Robert Malai on How Not to Use Docker at the Rise of the Dev... On June 17th, Robert Malai spoke at the Rise of the DevOps conference in Timisoara, Romania. Rise of the DevOps is a conference aimed at the growth of...

SUBSCRIBE TODAY


Sign up today to receive our monthly product development tips newsletter.