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.
- Become familiar with WCAG standards and practices (text alternatives, access via keyboard, etc).
- Adopt a checklist into your workflow to ensure you’ve addressed needs for new content and functionality.
- Scan new content and functionality for standard violations.
Standards
- WCAG 2.0
- Section 508
- Section 508 now incorporates (WCAG) 2.0. Must comply beginning January 18, 2018.
- The Section 508 Update
- Improving Website Accessibility
- International accessibility laws and 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.
- W3C: (WAI-ARIA) 1.1
- W3C: WAI-ARIA Overview
- Google: Introduction to ARIA
- MDN: An overview of accessible web applications and widgets
- WebAIM: ARIA
- A11y Project: Getting Started With ARIA
- Videos of screen readers using ARIA
#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
- An Alphabet of Accessibility Issues
- 7 Principles of Universal Design
- Accessibility according to actual people with disabilities
- Colorblind Accessibility on the Web – Fail and Success Cases
- Inclusive Design Principles
- Let’s Talk About Speech CSS
- People to Follow in Web Accessibility
- Try Reading This Font And You’ll Better Understand What Dyslexia Is Like
- Writing CSS with Accessibility in Mind
- Writing HTML with Accessibility in Mind
- Writing JavaScript with Accessibility in Mind
- Small Tweaks That Can Make a Huge Impact on Your Website’s Accessibility
- Tips for Getting Started with Web Accessibility
Books
- Accessibility for Everyone, by Laura Kalbag
- Design for Real Life, by Eric Meyer & Sara Wachter-Boettcher
Certifications
Checklists
- Image alt text decision tree
- 18F Accessibility Checklist
- The A11Y Project Checklist
- WebAIM WCAG 2.0 Checklist
- “Wuhcag” WCAG 2.0 Checklist
- WCAG Accessibility Checklist (Mac iOS app)
Courses/Professional Development
- Google: Introduction to Web Accessibility
- Developing with empathy: Web Accessibility course from Google and Udacity
- Inclusive Design 24 conference
- A free 24-hour online community event on accessibility, archived on YouTube.
Newsletters/Podcasts
Presentations
- The API You Probably Didn’t Know Existed – Amanda Rush, LoopConf
References (by subject)
Modals/Dialogs
Websites
- The A11Y Project
- Inclusive Design at Microsoft
- WebAIM
- Accessibility Wins
- Showcasing accessible user interfaces and tools.
- WUHCAG: Web accessibility for developers
WordPress
WPCampus Sessions
The following sessions include video recordings. View all accessibility sessions in our learning library
- Access granted: Working with an accessibility mindset (July 2018)
- Accessibility and life beyond the ALT tag (July 2018)
- Accessibility case study: WCAG and screen reader solutions for accordions and tabs (July 2017)
- Create accessible navigation from scratch with WordPress (July 2018)
- Empathy and Accessibility for the Web (January 2017)
- Incorporating the aXe Accessibility Testing Engine Plugin in WordPress (January 2018)
- Techniques, Tools and Resources for Making WordPress Website WCAG 2.0 Compliant (July 2016)
- Tools and approaches for managing content, accessibility and web identity at scale (July 2017)
- WordPress Accessibility: Where We Are and Where We’re Going (July 2016)
- WORKSHOP: WordPress and A11y (July 2017)
- [Picture of woman hunched over keyboard, typing furiously]: Case studies in implementing accessibility for difficult content (January 2018)
What Schools Are Using
- Birkbeck, University of London
- Birkbeck for All: Joined-up thinking on accessibility
- Guidelines to support inclusivity of learning resources.
- Birkbeck for All: Joined-up thinking on accessibility
- Hampshire College
- Built a web app using the WAVE API to scan multiple URLs.
- Harvard University
- Harvard University Online Accessibility
- Contains checklists, guides, resources, and policies.
- Harvard University Online Accessibility
- University of Nebraska-Lincoln
- UNL Web Audit
- Uses Axe. Helps you maintain your site by running automatic audits that help you find and fix problems that affect user experience.
- UNL Web Audit
- NC State
- NC State Accessibility Helper uses aXe to check for common accessibility issues.
- Stanford University
- Washington State University
- Audit process:
- Automatic scan with accessibility collector.
- Browser scan with Axe Chrome extension.
- Manual check of elements not caught by automatic scans.
- Accessibility Policy
- Accessibility Guides for the web, forked from the 18F accessibility guides.
- WSU Accessibility Collector (in development)
- Uses Pa11y for accessibility checking, which in turn uses HTML_CodeSniffer.
- WSU Accessibility Dashboard (in development) and the corresponding public facing dashboard.
- They have a lot of open-sources tools in their Github repo.
- Audit process:
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
- Is a Google Chrome extension.
- Adds a tab to your developer tools to run a scan/audit of your current page.
- 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
- List of available screen readers from the American Foundation for the Blind
- Designing for Screen Reader Compatibility
- Screen Reader Survival Guide
- For Windows: NVDA
- Free Open-source screen reader. Only works with Microsoft Windows.
- Works well with Firefox. Can be installed as a portable app on a thumb drive.
- For Mac: VoiceOver
- Is built-in to Mac OS.
- Helpful guide to VoiceOver commands
- Chromevox
- Is a Google Chrome extension.
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
- Inclusive Components
- A blog/pattern library for designing inclusive web interfaces.
- Accessible UI Components List from the W3C
- Modals
- Documentation