Web Accessibility Tools, Tests and Resources


Tools

A list of very helpful tools for testing your website's accessibility.

A11Y - Tools

Expand All Collapse All
  • Siteimprove

    Siteimprove monitors your site for WCAG 2.0 accessibility conformance in web content and PDF documents. Our subscription based service offers an intuitive interface, unlimited training and support, customized reporting based on website responsibilities and high priority areas, and CMS integration.

    https://siteimprove.com/en/resources/accessibility-resources/

  • 508checker

    With 508checker.com you can quickly check a webpage for 508 compliance and learn more about how to become 508 compliant across your entire organization

    http://www.508checker.com/

  • A-Tester

    Checks the pre-enhanced version of a web page designed with progressive enhancement against Evaluera's "WCAG 2.0 Level-AA conformance statements for HTML5 foundation markup" making a report that can serve as a broad and easily confirmed WCAG 2.0 Level-AA claim, even for enhanced versions.

    http://www.evaluera.co.uk

  • A11Y Compliance Platform

    Tools, reports and services to help organizations achieve, maintain and defend the accessibility of their organization's websites. Standards and guidelines used includes Section 508, Web Content Accessibility Guidelines (WCAG) & Americans with Disabilities (ADA)

    http://www.boia.org?wc3

  • a11y.css

    Pronounced « Alix ». Because it's fun. This CSS file intends to warn developers about possible risks and mistakes that exist in HTML code. It can also be used to roughly evaluate a site's quality by simply including it as an external stylesheet. If you want to get involved in this project, be sure to take a look at its wiki. I'll be pleased to read your issues or pull requests! Note that this bookmarklet might take a couple of seconds to load since it basically injects the a11y.css stylesheet within the DOM of the page you're browsing. It might be a bit slow at first because it is being downloaded from GitHub, but it's the price to pay to keep it up-to-date.

    http://ffoodd.github.io/a11y.css

  • Accessibility Developer Tools by Google Accessibility (Chrome)

    Adds an Accessibility audit, and an Accessibility sidebar pane in the Elements tab, to your Chrome Developer Tools. - 17 audit rules; most documented at http://goo.gl/L7gCXu - Sidebar pane in Elements tab provides extra debugging information, for example color contrast values and color suggestions, missing required ARIA attributes, reason for lack of visibility, accessible name calculation information, etc.

    https://chrome.google.com/webstore/detail/accessibility-developer-t/fpkknkljclfencbdbgkenhalefipecmb?hl=en

  • Accessibility Viewer

    The Accessibility Viewer (aViewer) is an inspection tool for Windows that displays the accessibility API information (MSAA, IAccessible2, UI Automation, ARIA, HTML DOM) exposed by web browsers to the operating system, and thus to any assistive technology (AT) such as screenreaders.

    https://www.paciellogroup.com/resources/aviewer/

  • ACE: the Accessible Color Evaluator

    With a user-centered design approach, we developed the Accessible Color Evaluator (ACE) which enhances web developers’ and designers’ ability to balance aesthetic and accessibility constraints for choosing a website’s color scheme.

    http://daprlab.com/ace/

  • Tanaguru

    Nice, but not free - Tanaguru is an opensource (AGPL license) website assessment tool. It is dedicated to accessibility (a11y) audits, and focuses on reliability and high level of automation.

    http://www.tanaguru.com/

  • NVDA (free screenreader)

    http://www.nvaccess.org/

  • Accessible-email.org

    Accessible-email.org is specifically focused on email and email-HTML. It offers a pragmatic and fast insight into accessibility features which are best applicable in email.

    http://www.accessible-email.org/

  • ARIA Validator for Chrome

    Scans page for WAI-ARIA implementation issues.

    https://chrome.google.com/webstore/detail/aria-validator/oigghlanfjgnkcndchmnlnmaojahnjoc

  • ChromeLens

    ChromeLens is a set of developer tools that allow developers to code websites better suited for the visually impaired. The three tools that are currently available are: Filters to experience a website; Scanners to audit; Trackers to visually show the path

    http://chromelens.xyz/

  • Visual ARIA

    Visual ARIA allows engineers, testers, educators, and students to physically observe ARIA usage within web technologies, including ARIA 1.1 structural, live region, and widget roles, proper nesting and focus management, plus requisite and optional supporting attributes to aid in development.

    http://whatsock.com/training/matrices/visual-aria.htm

  • WAVE by WebAIM

    WAVE is a suite of tools for facilitating web accessibility evaluation by providing a visual representation of accessibility issues within the page. There is an online service at http://wave.webaim.org/, Firefox and Chrome extensions, and an online and installable API engine.

    http://wave.webaim.org/

  • Visolve (color)

    Visolve is the software tool that transforms colors of the computer display into the discriminable colors for various people including people with color vision deficiency, commonly called color blindness. The web version and iOS version have the simulation feature that can simulate the appearance of an image for people with color blindness. By using this feature, people with normal color vision can check how color-blind people see a scene or a signage, etc.

    http://www.ryobi-sol.co.jp/visolve/en/

  • Tingtun PDF Checker

    Checks PDF documents based on WCAG 2.0. Upload or refer to online documents to generate report with detected barriers and proposed remedies. Tingtun PDF checker is an online, open source tool, used both in practical quality assurance and monitoring of national document quality.

    http://checkers.eiii.eu/en/pdfcheck/

  • Tingtun Accessibility Checker

    Checks web pages based on WCAG 2.0. Reports barriers, their location together with WCAG references and proposed remedies.

    http://checkers.eiii.eu/en/pagecheck/

  • Tenon

    Tenon is a one of a kind accessibility testing tool in that it is aimed at offering unprecedented flexibility in tooling for designers developers testers and content authors. Tenon achieves these goals via its API which can be seamlessly integrated into your existing toolset.

    http://www.tenon.io

  • AInspector Sidebar (Firefox)

    Web accessibility evaluation tool for Firefox based on WCAG 2.0 and ARIA. The Firefox Accessibility Extension is a Firefox toolbar that allows you to inspect every aspect of a web page to determine its accessibility. A helpful toolbar feature is the Text Equivalents menu which allows you to generate lists of elements such as images and links to see whether each are standards-compliant. You can also launch 3rd party applications such as the WC3 HTML Validator and Link Checker services directly from the toolbar. See: https://ainspector.github.io/ 

    https://addons.mozilla.org/en-US/firefox/addon/ainspector-wcag/

  • aDesigner (screen reader)

    aDesigner, developed by IBM, simulates the experience of visually-impaired individuals so that designers can better understand how a web page is interpreted by screen readers. It has a plenty of features including a summary and detailed report of compliancy to web accessibility guidelines and simulations for blind or low-vision impairment. See: http://jimthatcher.com/adesigner.htm

    https://www.ibm.com/developerworks/community/groups/service/html/communityview?communityUuid=18d10b14-e2c8-4780-bace-9af1fc463cc0

  • WebAnywhere: A Screen Reader On-the-Go

    WebAnywhere is a browser-based web application that works similarly to screen readers such as JAWS. It’s an excellent way to see how a web page is read and navigated by assistive technologies.

    http://webinsight.cs.washington.edu/papers/webanywhere-html/

  • Vischeck

    Vischeck simulates how a web page or image will look if viewed by people affected with color-blindness. It simulates three types of color-blindness. You can conduct the test by entering a URL or uploading images.

    http://www.vischeck.com/vischeck/

  • Accessibility Color Wheel

    The Accessibility Color Wheel is a web-based tool to help you select the background color and font color. You can enter the hexadecimal values of the colors you want to test, or you can hover over the color wheel to select colors.

    https://www.giacomo.page/en/colorwheel/wheel.php

  • The Color Contrast Analyzer (Firefox)

    The Color Contrast Analyzer, developed by Juicy Studio, is a Firefox extension (currently in alpha) that checks all the elements in the Document Object Model for color contrast to insure that content is accessible by people who are color-blind or affected by other visual-impairments. It uses the color and brightness differences algorithm suggested by the WC3 "Techniques For Accessibility Evaluation And Repair Tools" (AERT). Juicy Studio also has other web accessibility evaluation tools such as the Readability Test, CSS Analyzer, and Image Analyzer.

    http://juicystudio.com/article/colour-contrast-analyser-firefox-extension.php

  • The TAW Web Accessibility Test

    The TAW Web Accessibility Test evaluates your website’s accessibility based on the WCAG 1.0. It marks trouble spots directly on the web page, allowing you to quickly see where the errors are. Clicking on the error/warning indicator will bump you down to a summary of the issue. It’s a great way to visualize the areas of a web page that needs work.

    http://www.tawdis.net/

  • Web Accessibility Toolbar (IE + Opera)

    The Web Accessibility Toolbar (WAT) is an extension for Internet Explorer or Opera that offers designers a ton of useful tools and features to help in the analysis of a web page’s accessibility. One helpful feature is the Greyscale (Colour > Greyscale) feature which renders the web page in black in white to help you find low-contrast spots in the design.

    https://www.paciellogroup.com/resources/wat/

  • Fangs

    Screen reader emulator for Firefox. This Mozilla Firefox extension creates a textual representation of a web page similar to how the page would be read by a modern screen reader. The extension and source can be downloaded from the SourceForge project page located at https://sourceforge.net/projects/fangs/.



Tests

A good list of baseline tests for your site's accessibility compliance.

A11Y - Baseline Tests

Expand All Collapse All
  • Keyboard navigation
    Keyboard access and control must be available for all interactive interface components and frames that can be accessed or controlled with a mouse. Where non-standard keyboard commands are employed, notify users of the existence and use of Alternate keyboard commands through the interface, application help, and/or documentation.
  • Focus (visible)
    There must be a visible indication of the currently focused interactive component.
  • Focus (order)
    When the sequence of interface components has meaning or requires an order of operation, the focus/TAB order must logically flow with the application/content.
  • Focus (Revealing hidden content)
    Components that reveal hidden content (dialog boxes, light boxes, popups, content accordions, drop-down menus etc.) must either (i) shift focus to the content they reveal, or (ii) the component must describe that a change to the content will occur if selected.
  • Skip links
    A method must be provided to skip blocks of repeated content or links on pages, allowing a user to move directly to page-specific content.
  • Multi-state components
    Components that can change their state must reveal their current state and function to Assistive Technology.
  • Images
    All images must have associated text describing the purpose and/or function of the image. Decorative images do not require a description.
  • Color (meaning)
    Color must not be the only means of conveying information, indicating an action, prompting a response, or indicating status. Information conveyed through color must also be provided in text displayed on the screen or by visual differentiation.
  • Color (contrast)
    There must be contrasting colors/shades at a ratio of 4.5:1 for discerning between background and foreground content.
  • Flashing (reserved)
    Sections(s) of the screen should not flash at or above 3Hz.
  • Forms (associated instructions)
    Labels, instructions, directions and cues necessary to complete a form must be programmatically associated with their respective input control.
  • Page Titles
    Programmatically identify Page Titles.
  • Data Tables (headers)
    Column and row header cells of data tables must be programmatically identified.
  • Data Tables (cell-header association)
    Data cells on complex tables must include markup to associate the data cell with the correct header.
  • Headings
    Headings must be programmatically identified and must match the visual outline level.
  • Links and User controls
    Links and/or user controls must have meaningful names that describe the unique destination, function, and/or purpose of the control for assistive technology.
  • Language
    A default language must be programmatically identified for each page, and for passages that use a language other than the default. Exceptions: proper names, technical terms, or foreign words that have become part of the vernacular.
  • Audio (transcripts)
    Audio-only content must be accompanied by transcripts.
  • Video (descriptions)
    Video-only content must be accompanied by descriptions.
  • Synchronized media (captions)
    Synchronized media must have captions that are time-synchronized with the dialog and relevant sounds.
  • Synchronized media (descriptions)
    Synchronized media must have audio descriptions that are time-synchronized with the video.
  • Style-sheet non-dependence
    Web pages must be structured so that their reading order is consistent whether they are viewed with or without an associated style sheet. Layout and appearance of the page may change visually, as long as the logical reading order is maintained.
  • Frames
    Frames and iframes must have a meaningful description using the title or name attribute.
  • Alternate pages
    When the primary page/site cannot be made accessible, an Alternative page/site must contain equivalent and up-to-date content.
  • Time outs
    Users of assistive technology must be alerted about a pending time out, and users must be able to request more time to complete their task.
  • Image maps
    Server-side image maps may not be used. Client-side image-maps must be used instead.
  • Plug-in Links
    When public-facing pages utilize content delivered via plugins, or contain downloadable content that must be opened with a separate application, a link to obtain the plug-in and/or application must be provided.
  • Built-in accessibility features
    Operating System (OS) user-configurable accessibility appearance settings and functions must not be disrupted or disabled by the software application.


Resources

A good list of informative web accessibility resources.

A11Y - Resources

Expand All Collapse All

Design, Tools & Training

Top