Skip to Main Content

Website Accessibility

W3C.org Standards Webdesign Accessibility

HHS.gov HTML 508 Checklist

ADA Best Practices Tool Kit for State and Local Governments

Chapter 5 Addendum:
Title II Checklist
(Website Accessibility)

Inclusive Design 24 (#ID24) / 16 November 2017

A Free 24-Hour Online Community Event On Accessibility Organized by The Paciello Group
Inclusive Design 24 celebrates efforts worldwide to ensure people with disabilities have full and equal access to the web. To this end, we will be holding 24 completely free one-hour webinars on all things accessibility. The sessions range from beginner to advanced and are aimed at everyone from executives to web developers.

UDACITY Free course: Web Accessibility by Google

Github website: Progressively enhanced ARIA accordions

https://github.com/scottaohara/accessible_accordions

Smashing Magazine: Stop Designing for Only 85% of Users: Nailing Accessibility in Design

What I've learned about motor impairment - SimplePrimate Thoughts on how websites and apps can better address the needs of those with a wide range of motor impairments.

The Paciello Group Inclusive Design Principles

How to Make Your Website Accessible to People Who Use a Screen Magnifier

How to make your site accessible for screen magnifiers - Axesslab

GOV.UK Blog Accessibliity: Does and don'ts on designing for accessibility

Teach Access Initiative - https://teachaccess.github.io/tutorial/

Web Content Accessibility Guidlines (WCAG 2.0)

The Accessibility Project - A community-driven effort to make web accessibility easier (http://a11yproject.com)

PaperStreet

Alt text is applied to images that convey meaningful information.
Captions are provided on video content with audio.
Video or audio-only content is accompanied by text transcript or description.
Links are provided to media players required to view content.
Headings are presented in logical order.
"b" and "i" tags are replaced with "strong" and "em."
There are no empty links or heading tags.
Presentation or feedback does not rely solely on color.
Automatically-played audio can be stopped or is not included.
The keyboard can be used to navigate the site.
Time limits provide notifications to the user before they expire.
Automatically scrolling or blinking content can be stopped.
No strobe effects or rapidly flashing colors occur on the site.
“Skip navigation” functionality is provided to allow keyboard users to quickly access content.
Page titles clearly and succinctly describe page content.
Buttons and links are clearly and logically named.
The language of each page is identified in code.
Elements receiving focus do not change layout in a substantial way.
Invalid form input is identified to the user.
Forms have labels and legends that can be read by screen reader software.

Contrast ratio between text and page backgrounds is at least 4.5-to-1.
Text on pages can be resized to 200% while still maintaining form.
Text-based images are not used.
Pages on the site can be accessed in multiple ways.
Keyboard focus is visible and clear.
Menus and buttons are shown consistently regardless of the user’s location in the site.
Users are given suggestions on how to solve input errors.
Underlined text that does not provide a link is removed.
Redundant links on the same page are eliminated or minimized.

Link Type Indicators Tip: While not required by accessibility guidelines, it is a good idea to inform users when a link goes to non-HTML content (such as a PDF file or Word document). It can be frustrating to activate a link and then realize that the link requires an external program or viewer. An icon (with appropriate alternative text) or text, such as "(PDF)", is sufficient. It is vital that the link type indicator icon or text be placed within the link, otherwise this information is readily available to sighted users, but not presented as part of the link for screen reader users.

Web Browser Tools for Testing Accessibility:

Lighthouse is an open-source, automated tool for improving the quality of web pages. It has audits for performance, accessibility, progressive web apps, and more.

Vischeck's Color Blindness Checker: http://www.vischeck.com/

Web Accessibility Toolbar - Accessibility toolbar for Internet Explorer

Accessibility Evaluation Toolbar - Accessibility Evaluation Toolbar for Mozilla Firefox

Color Contrast Analyzer for Firefox - Color contrast analyser for Firefox (PC and Mac)

Fangs - Text-reader emulator for Firefox (PC and Mac)

NCDAE video: Identifying Web Accessibility Issues

Web Sites for Testing Accessibility:

The Accessibility Cheatsheet

W3C - Easy Checks - A First Review of Web Accessibility

W3C HTML Validator - Validates your HTML coding

W3C Link Checker - Checks to see if there are any broken links

W3C CSS Validator - Validates your Cascading Style Sheet code

WCAG Contrast checker - Checks for compliance with the contrast levels, brightness and shine in the color combination of foreground and background of textual content based on the requirements of WCAG 1 and WCAG 2.

Colour Contrast Check - Web page for testing foreground and background color choices

Color Blindness Simulator

Cynthia Says Portal - Online Web accessibility evaluation tool

WAVE - Online Web accessibility evaluation tool

AChecker - Online Web accessibility evaluation tool

Make Wordpress Accessible

Keyboard Navigation

http://webaim.org/techniques/keyboard/#testing

https://www.ssa.gov/accessibility/keyboard_nav.html

Other information for Website Accessibility:

The A11Y Project

Simple Accessible

The Enabled Web -  Smart analysis simplified

WordPress Requirements for Accessible Themes

Alt Text resources

VA Section 508 Newsletter Summer 2016

http://webaim.org/articles/gonewild/#alttext

Map Accessibility

Presentation:  http://pz.tt/csun16-map

Fact sheet and other resources:  https://www.accessibilityoz.com/factsheets/interactive-maps/

  • Some important aspects of accessible maps include keyboard focus, color and contrast, text within map needs to be able to resize.
  • A good approach to alt text for maps is to say in the alt text the name of the map and then “long description follows image.”  In the long description, take as much text as needed to describe the important aspects of the map.
  • Different browsers and different screen readers will work differently in terms of accessing accessibility features.  Don’t assume that if it works in one combination, that it will work in other combinations.
  • To be accessible, all actions need to work with keyboard, mouse, or touch (phones/tablets).
  • Maps.google.com is keyboard accessible.
  • For more complex maps, use a table of data instead of a long description.