Skip to content

Accessibility

What is accessibility?

Refers to the inclusive practice of removing barriers that prevent interaction with, or access to, websites by people with disabilities.

Though estimates vary, most studies find that about one fifth (20%) of the population has some kind of disability. Each of the major categories of disabilities requires certain types of adaptations in the design of web content. Most of the time, these adaptations benefit nearly everyone, not just people with disabilities. Almost everyone benefits from helpful illustrations, properly-organized content, and clear navigation. Similarly, while captions are a necessity for deaf users, they can be helpful to others, including anyone who views a video without audio.

The major categories of disability types

  • Visual
    • Blindness, low vision, color-blindness
  • Hearing
    • Deafness and hard-of-hearing
  • Motor
    • Inability to use a mouse, slow response time, limited fine motor control
  • Cognitive
    • Learning disabilities, distractibility, inability to remember or focus on large amounts of information

Common barriers

  • Non-text content (images, videos, audio, etc) without text equivalent
    • Do images have alt attributes? Do videos have captions?
  • Being unable to access actions and functionality via keyboard and keyboard traps
    • Can you access links, buttons, modals, tooltips, form fields, esp. radios and checkboxes?
  • Actions without defined purpose or context
    • For example: <buttons> without text or a title attribute
    • A screen reader would just read “button” and user would have no idea what happens when they click the button.
  • Using color to convey information and insufficient design contrast (for those with color blindness)
    • For example: links that are not underlined.
    • If a user is color blind to blue and there is no underline, they can’t tell that a word is a different color and are unaware of the action.
  • Unable to visually determine if an element has focus
    • If you tab to a button, a link, or a form field, can the user tell it has focus?
  • Unable to skip large blocks of repeatable content
    • For example: If a user is navigating via keyboard, and can’t skip over the header, they have to tab through your entire header on every page.

How To Get Started

Introducing accessibility practices into your workflow has a few steps but over time it will become second nature. It makes your technology better for everyone. You’ll find all the information you need on this page.

The W3C also has a great resource for Tips for Getting Started with Web Accessibility.

  1. Become familiar with WCAG standards and practices (text alternatives, access via keyboard, etc).
  2. Adopt a checklist into your workflow to ensure you’ve addressed needs for new content and functionality.
  3. Scan new content and functionality for standard violations.

Standards

ARIA (Accessible Rich Internet Applications)

WAI-ARIA (Accessible Rich Internet Applications or ARIA) is a W3C protocol for enhancing and supporting accessibility of scripted and dynamic content to be provided to assistive technology. It especially helps with dynamic content and advanced user interface controls developed with Ajax, HTML, JavaScript, and related technologies. ARIA enhances accessibility of interactive controls (such as tree menus, drag and drop, sliders, sort controls, etc.), provides content roles for identifying page structure (navigation, search, main content, etc.), areas that can be dynamically updated (called “live regions” in ARIA), better support for keyboard accessibility and interactivity, and much more.

ARIA is supported by most up-to-date browsers and screen readers. It is also supported by many scripting libraries. Although ARIA is not yet universally supported, when used with existing HTML and scripting accessibility techniques, it can provide additional accessibility support where it is supported while not causing compatibility issues where it is not yet supported.

#a11yCat shirts

Buy an #a11yCat shirt and support an accessibility charity!

Resources

When one resource page isn’t enough, here are some more options. There will no doubt be crossover.

Articles

Books

Certifications

Checklists

Courses/Professional Development

Newsletters/Podcasts

Presentations

References (by subject)

Modals/Dialogs

Websites

WordPress

WPCampus Sessions

The following sessions include video recordings. View all accessibility sessions in our learning library

What Schools Are Using

Tools

Color Contrast

  • Colorblind Web Page Filter
    • A tool that allows you to view a webpage with “filters” that mimic how a color blind user views the page.
  • Color Contrast Analyzer
    • Is a Google Chrome extension.
    • Adds a button to the top of the browser that, when clicked, will analyze a web page for conformance with WCAG 2.0 color contrast requirements.
  • “I want to see like the colour blind”
    • Is a Google Chrome extension.
    • Adds a button to the top of the browser that, when clicked, will show you how your web page appears to those with color blindness.
  • A11y Color Palette
    • Helps you visualize an entire palette of all color combinations with accessibility in mind. The combinations are ordered by color contrast ratio. Try it out with sample colors or create a palette of your own.
  • Color Safe
    • Accessible color palettes based on WCAG Guidelines of text and background contrast ratios.
  • Color Tool
    • Web page that allows you to insert your color palette and view accessibility information.
  • Hex Naw
    • Hex Naw is a tool that helps designers and developers test entire color systems for contrast and accessibility.
  • Sim Daltonism
    • Free Mac OS app that lets you visualize colors as they are perceived with various types of color blindness.
  • WebAIM color contrast checker
    • Simple foreground vs. background checker.
    • WebAim color contrast checker API
      • Pass foreground and background color. Returns a JSON object with the contrast ratio and the AA/AAA pass/fail states.
  • Firefox Accessibility Inspector Simulator
    • The simulator in the Accessibility Inspector in Firefox Developer Tools lets you see what a web page would look like to users with various forms of color vision deficiency (better known as “color blindness”), as well as contrast sensitivity loss.

Scanning/Audits

  • Accessibility Developer Tools
  • Accessibility Insights
    • Has an extension for Google Chrome and Microsoft Edge
    • Has Windows desktop application
  • A11y Command-line Tools
    • Web accessibility audits powered by the Chrome Accessibility Developer Tools.
    • Run audits against local or remote URLs in the command-line to return a list of accessibility improvements that can be made.
  • Axe
    • Axe-core is a Javascript file you can use to scan your site.
    • Offers a Google Chrome extension. Adds a tab to your developer tools to run a scan/audit of your current page.
      • aXe-Coconut is a Chrome extension that allows you to try their latest APIs and experimental rules before they are released.
    • They offer premium services.
  • ARIA validator
    • Is a Google Chrome extension.
    • Adds a button to the top of the browser that, when clicked, will scan and audit ARIA usage.
  • Functional Accessibility Evaluator
    • Developed by the Disability Research and Educational Services at the University of Illinois at Urbana-Champaign. Learn more about the tool
  • HTML CodeSniffer
    • A Javascript application that can be used to run scans.
    • Also has a bookmarklet for quick scans on any web page.
  • Koa11y
    • Koa11y is a desktop app that allows you to automatically detect accessibility issues on webpages.
  • Lighthouse
    • Works as a Chrome DevTool, CLI, or node module.
    • Will check for accessibility issues along with performance issues, best practices, and if the site is a progressive web app.
  • Pa11y
    • They have a lot of open source tools.
  • Siteimprove
    • Offers a Google Chrome extension. Adds a button to the top of the browser that, when clicked, will scan/audit your web page.
    • They offer premium services.
  • Tota11y
    • Has Javascript file you can place on site.
    • Offers a Google Chrome extension.
    • Both the file and the extension will add a button to the bottom of your page that, when clicked, will show you the results of a scan.
  • WAVE
    • Offers a Google Chrome extension.
    • Both the main tool and the extension will scan/audit your site and show you results.
    • They also have a premium API.
  • Firefox Accessiblity Inspector
    • The Accessibility Inspector provides a means to access important information exposed to assistive technologies on the current page via the accessibility tree, allowing you to check what’s missing or otherwise needs attention.

Screen Readers

WordPress Plugins

  • Font Resizer
    • Allows you to give the visitors of your site the option to change the font size.
  • GSpeech Text to Speech
    • A text to speech solution for WordPress. It uses Google power to provide you the best quality of automatic text to speech service.
  • NC State Accessibility Helper
    • Adds “Run Accessibility Check” button to post editor, generating an annotated preview highlighting potential accessibility issues.
    • Still in active development – contributions welcome!
  • WP Accessibility
    • Helps with a variety of common accessibility problems in WordPress themes.
  • Automatic Alternative Text
    • Adds alt text using Microsoft cognitive services
  • wA11y – The Web Accessibility Toolbox
    • Provides a toolbox of resources to help you improve the accessibility of your WordPress website.

Components

Login to WordPress