Cindy Garlick bio photo

Cindy Garlick

QA Software Tester

Calendar Github

LinkedIn

508 Accessibility - for blind and visually impaired

Information to help tools work for all users

US (English)   Norsk (Norwegian)   Español (Spanish)   Français (French)   Deutsch (German)   Italiano   Português   Estonian   اَلْعَرَبِيَّةُ (Egypt Arabic)   Napali   中文 (简体) Chinese (Simplified)   日本語 Japanese   한국어 Korean

Overview

HTML 508 Accessibility, importance, tools, videos and basic code suggestions.

This post explains how to verify whether websites are “508 Compliant”. Compliance is to regulations requiring websites to be accessible to the deaf, hard-of-hearing, and visually impaired.

Why is this needed?

This is a bigger issue than many think:

195,697,202 people in the US are deaf.

38 million blind in US, 246 with low vision, 285 million worldwide are vision impaired.

7,327,800 blind people since 2013

2.7 million people (mostly male) have some form of color blindness.

Accessible sites rank higher in search engines.

Increase user base by at least 20%

Inclusive sites drastically reduce discriminatory potential for legal action both domestically and internationally.

Good business at being progressive and knowledgeable of internet trends

PowerMapper’s SortSite accessibility tool audits an entire site for compliance with web accessibility standards without the grind of manual testing. Enter the name of your website and click “Test Site”. After done, click “View Report”.

EvalAccess evaluates web accessibility is a Free Web Service tool. It shows errors and warnings based on Priority 1, 2, 3 and results of errors and warnings per priority. It provides a description of what it believes is wrong, the HTML element or attribute with issue and line of code. It may not be the most user-friendly access tool, it can help designers and developers to clean up their site:

Functional Accessibility Evaluator referred to FAE evaluates website based on 508 Guidelines**. There are five categories: Navigation and Orientation, Text Equivalents, Scripting, Styling and HTML Standards. The overall performance per category is a percentage, divided between Pass, Warning and Fail thus enabling specific areas:

AChecker tool checks single HTML page for conformance with accessibility standards. It provides suggestions for conformance, explains why it failed, how to fix and the code that failed.

Checklists for 508 Compliance

User must be able to only use keyboard to be able to get to all enterable items and controls.

Checklist for Web Content Accessibility Guidelines

Checklist for HTML Accessibility

Checklist for PDF File 508 Compliance

Checklist of Excel Document 508 Compliance

Checklist for PowerPoint Document 508 Compliance

Checklist for 508 Standards with Pass and Fail criteria

Types of Tools utilized

Screen Readers - These tools transmit text that is displayed on the computer screen to aid a visually impaired user to process. It uses a synthetic voice to tell the user where all the data is on the screen. As a user uses the keyboard to get around on the screen, as they move around the screen, it should read all headings and text on the screen. If a picture is on the screen, if programmed properly the screen reader will read text displaying for the user what is contained in the picture.

Screen Magnifiers - These tools allow users to amplify the text on the screen in a enlarged screen format usually within a small focused area of the screen. As the mouse is moved around the screen, the objects are magnified so they can be easily read. As my eyes started changing, my glasses no longer was able to read the screen properly until I got bifocals, screen magnifiers amplify the text and make it easier to read.

Speech Recognition - These tools allow users to convert spoken words into text. It can include dictation to the point of being able to manipulating applications on the screen using words understood by the software tools.

Color Contrast Analyser - These tools help determine the contrast of background and text or of visual elements like graphical controls into a Pass/Fail category to assist users who struggle with conflicting colors. Download Color Analyser Software Tool for those with color blindness, cataracts or less than 20/20 vision.

Alternative Input Devices - These tools allow users with specific needs to be able to manipulate a computer using modified pointing device, eye movement, expanded keyboards, head-operated pointing devices, modified keyboards to specialized software.

Firefox and Chrome Add-ons

Accessibility Developer Tools extension for Chrome adds an Accessibility audit and an Accessibility sidebar pane in the Elements tab to your Chrome Develop Tools. To use the audit: go to the Audits tab and click Run. The audit results will appear as a list of rules which are violated by the page with one or more elements on the page shown as a result for each rule.

aXe is Accessibility defects extension for Chrome. Automated testing tools must return zero false positives, so that you know what problems you must fix. This extension uses aXe javascript library and is the third generation of accessibility rules for HTML-based user interfaces and is open source.

ChromeLens.xyz is a set of developer tools that allow developers to code websites better suited for the visually impaired.

Markup HTML and XHTML Validation Tool

Link Checker Open Source
looks for issues in links, anchors and referenced objects on a webpage, CSS style sheet. Enter your webpage, click Summary Only and Check linked documents recursively, change depth to 1 or 2/

Total Validator is FREE HTML Validator an accessibility validator, spell checker, broken links checker. This tool can be downloaded for Windows, Mac, Linux, and browsers like Google Chrome and Firefox.

Mobile device tool validation

W3c mobileOK checker performs tests to determine level of mobile friendliness and compatibility**. Enter the web address you want evaluated. It counts failures broken down by severity and category of failures. It will break down each error by severity, description, best practice that failed along with details as to why, how, where when it can identify it and more information to explain the severity of that issue addressed. Drill down next to Where, it will either give you the link where it found the error or every link that triggered the error:

mobiReady checks to see if your website works on multiple size devices including 1024x768, 375x667, 320x533 and 240x320.

Assisted Devices for Hearing-impaired or Visually-impaired

NonVisual Desktop Access also known as NVDA is Free and Open Source and enables blind and visually impaired people to use computers using computerized voice. You can control what is read to you by moving the cursor to the relevent area of text with a mouse or the arrows on the keyboard. NVDA provides education and employment for many blind people. NVDA also provides access to social networking, online shopping, banking and news. NVDA has been translated into 43 languages and is used by more than 120 countries.

Window Eyes is FREE screen reader for Microsoft products to provide people who are blind, visually-impaired or print challenged with completely functionality compatible with Microsoft Office 2010, 2013 and 2016. Click here for a user manual on Window Eyes.

Article discussing various Assisted devices

Videos about 508 Accessibility Testing

Video about testing considerations for 508 standards using assisted technologies.

Webinar about Section 508 Accessibility Authoring and Testing.

Video presentation discussing issues and rewards for making internet accessible for all.

HTML coding for accessibility

  1. In alt=” “ provide words to describe more details about what the link is about so screen reader can read, for example:

    <a target="_blank" href="http://www.ebay.com" 
    alt="One of most well known websites to buy products by auction or buy now at this price">Ebay is the most well known
    websites for buying production by auction or pay the buy in now price"</a>

  2. Images should describe the picture using word, for example:

    <a target="_blank" href="http://....." alt="blue winter landscape with rainbow"</a>

  3. Turn on captioning in videos for YouTube or Vimeo, Must have QuickTime Player. Click to learn how to transcribe videos. for example:

    <iframe width="640" height="360" target="_blank" href="URL cc_load_policy=1" frameborder="0" allowfullscreen></iframe>

  4. Add label for type=”radio”, for example:

    <fieldset>
 <h1>Salutation</h1>

 <label for="salutation_mr">Mr <input id="salutation_mr" 
       name="salutation" type="radio" value="mr"><label>

 <label for="salutation_mrs">Mrs <input id="salutation_mrs" 
       name="salutation" type="radio" value="mrs"><label>

 <label for="salutation_miss">Miss <input id="salutation_miss" 
       name="salutation" type="radio" value="miss"><label>

 <label for="salutation_ms">Ms <input id="salutation_miss" 
       name="salutation" type="radio" value="ms"><label>
 </fieldset>

  5. Emphasis do not use italic as it causes reading issues, better to use es{..} or strong{…}

    strong{
font-weight: bold;
}
  6. Anytime you use a website, make sure if it should be http:// or https://
  7. Anytime you use a website, check to see if there should be a / at the end of the website name
  8. Anytime the link your using redirects, it slows down the application, update the link to the correct location periodically.
  9. Accessible Techniques for HTML Tables

Create ADA-Compliant Captions

This section is adapted from Camtasia 2 for Mac tutorials presenting tips to create ADA-compliant captions.

The Americans with Disabilities Act (ADA) is a federal antidiscrimination statute designed to ensure equal access to opportunities and benefits for qualified individuals with disabilities. In many state, government, and education institutions, videos must include ADA compliant captions.

Generally, captions should:

  • Be accessible and readily available to those who need or want them.
  • Be synchronized with the audio spoken words (appear at approximately the same time as the audio).

  • Appear onscreen long enough to be read (Stay on the screen a few seconds, and are then replaced by another caption.)

  • Be in an easy-to-read format: not cover up graphics and other essential visual elements of the picture.
  • Use a non-serif font similar to Helvetica medium.

  • Have good resolution.

  • Have correct spelling throughout the production.

Words in ADA compliant captions should:

  • Use upper and lowercase letters.

  • Be verbatim when time allows or as close as possible in other situations.

  • Describe use of slang and accent is preserved.
  • Describe music or other sound inside square brackets such as [music] or [laughter].
  • Identify the speaker when more than one person is onscreen or when the speaker is not visible.
  • Use italics when a new word is being defined or a word is heavily emphasized in speech.

  • Use punctuation to clarify meaning.

  • Reflect all words spoken, regardless of language or dialect.
  • Fit the 32-character-per-line requirement
  • Be preferrably one line of text that appear onscreen all at once,
  • Be no longer than three lines.

To check for compliancy, select the Captions options dropdown > Show non-compliant duration. This option highlights any captions in red whose duration is not between three and seven seconds.

508 Accessibility - for blind and visually impaired was published on .