- A11y
-
A11y is a numeronym for the word Accessibility. A numeronym is where you form an abbreviation for a word by replacing some letters with numbers. The end word may, or may not, be pronounced similar to the full word.
A11y stands for the fact that Accessibility begins with the letter A, ends with the letter Y, and has 11 characters in between. It is used to identify content related to digital accessibility in particular. Learn more on the About page of The A11y Project. The A11y Project is a community-driven effort to make digital accessibility easier.
- 8 Steps to Inclusive Web Design
- The 8 steps in this article give you a good idea of how to prepare to design an accessible site.
- American Printing House for the Blind
- The American Printing House is an amazing non-profit that specializes in educational aids, books, audio content, and more for indiviudals with visual accessibility needs. They have been serving the blind and visually impaired community for over 160 years. You can learn about visual accessibility in so many ways from them.
- APH Accessibility Hub
- An awesome resource created by the Accessibility Comittee at the American Printing House for the Blind.
- ARIA Authoring Practices Guide (APG) - W3C
- The ARIA Authoring Practices Guide (APG), by the W3C, helps describe the uses and best practices related to ARIA. The site also provides functional examples and design patterns.
- ARIA Landmarks Example - W3C
- This W3C article describes how landmarks help users identify content structures and gives visual examples.
- Assistive Technology Industry Association(ATiA)
- This page lists some great information about Assistive Technologies and the Assistive Technology Industry Association.
- BBC's My Web My Home page
- This page is archived and no longer being updated, but still serves as a great reference page to see Accessibility information divided up into different categories based on need.
- Beginner's Guide to Accessibility - Deque
- Deque is an Accessibility focused company whose Accessibility Assesment application, Axe, is a part of many other well known Accessibility assessment tools, including the Lighthouse tab in Google Chrome's Developer Tools and Microsoft's Accessibility Insights. In this article, they break down some information that is important for anyone wanting to learn more about Accessibility.
- Deque Blog
- The Deque Blog that features articles on various topics relating to Accessibility.
- Dos and Don'ts on Designing for Accessibility
- This is a great blog post of some example dos and don'ts to keep in mind when designing for Accessibility, and some amazing reference posters.
- Geri Reid - UI & UX Designer
- Geri Reid has some wonderful resources under the "Work" section of her site, including an Accessibility case study, WCAG for Designers, and an article on Form Design.
- Inclusive Components by Heydon Pickering
- A web version of the Inclusive Components book by Heydon Pickering. Learn ways to make accessible versions of various common web components.
- Moritz Geissmann's Accessibility Cheatsheet
- This is an awesome cheat sheet made by Moritz Geissman. It makes for a great condensed poster you can have available for quick reference.
- VisionAware
- VisionAware is a great resource for those in the process of losing their sight, as well as their friends and family.
- VisionCenter
- VisionCenter provides information on a wide array of vision related conditions and treatment options. Learn about everything from astigmatism, reading your vision prescription, different kinds of lenses, Lasik, how to gain access to free/low cost eye care, and more. Many of the articles have been written and/or reviewed by medical professionals with great source citing and links to information on the medical professionals.
- WCAG Guide
- A set of amazing virtual flash cards that can be used as a useful reference of the WCAG 2.1 Guidelines and Success Criteria.
- WCAG 2.1
- WCAG stands for Web Content Accessibility Guidelines. These are international guidelines developed by the W3C WAI. Version 2.1 was released in June 2018.
- ATAG 2.0
- ATAG stands for Authoring Tool Accessibility Guidelines. These are international guidelines developed by the W3C WAI. Version 2.0 was released in September 2015.
- UAAG 2.0
- UAAG stands for User Agent Accessibility Guidelines. These are international guidelines developed by the W3C WAI. Version 2.0 was released in December 2015.
- Section 508
- Section 508 of the Rehabilitation Act of 1973, handles accessibility of information and technology. They primarily apply to federal agencies and contractors. Section 508 received a refresh in January 2017.
- BBC Global Experience Language (GEL)
- This page is where the BBC stores all of their UX/UD guidelines, tutorials, and more for everyone to view and benefit from.
- BBC Global Experience Language
- This page highlights all of the UX Guidelines followed by the BBC. They are a great example of clear guidelines that help to improve the user experience for everyone visiting their sites.
- HTML5 Accessibility
- This page shows well various browsers support Accessibility.
- Accessibility - Material Design
- Learn about how Accessibility is a foundational design value for the Material design system.
- Accessible prototypes in Figma
- The general idea of Accessible prototypes in Figma, is that they will allow users to navigate with a supported screen reader. As of September 2022, accessible prototypes are currently in open beta.
Bookmarklets
- A11y Bookmarklets from Dylan Barrell
- A Github.io page, created by Dylan Barrell, that has a useful bookmarklet that lets you test for conformance the WCAG's 1.4.12 Text Spacing success criterion.
- Accessibility Bookmarklets
- The Accessibility bookmarklets on this page were created by Pixo and Disability Resources and Education Services (DRES) at the University of Illinois at Urbana Champaign
- Accessible Name & Description Inspector (ANDI)
- ANDI is a tool developed by the Social Security Administration (SSA) for use in Section 508 Conformance testing. It functions as a browser bookmarklet that lets you display an overlay to identify potential accessibility issues in the currently selected web page.
- JavaScript Bookmarklets for Accessibility Testing
- A set of useful JavaScript bookmarklets, developed by Paul J Adam, that can assist you with testing various elements of accessibility in a website.
- Holistic Accessibility Landmark Bookmarklet
- The Holistic Accessibility Landmark Bookmarklet highlights all ARIA landmarks, including HTML5 tags that are interpreted as landmarks.
Browser Extensions
- Accessibility Insights
- Accessibility Insights is a set of tools developed by Microsoft that are open source and available for free as a Windows application, Chromium browser extension, and more to assist with automated and manual Accessibility testing.
- axe DevTools
- axe DevTools are a set of tools that can be installed in FireFox, Google Chrome, and Microsoft Edge browsers that can be used to assist with automated and manual accessibility testing.
- Dark Reader
- Dark Reader allows you to simulate a dark mode look on individual websites. This browser extension is available on Chrome, Edge, FireFox, and Safari. It can be enabled to be on all the time, or per site. Great for simulating what a dark mode custom style sheet might make your site look like and to ease the strain on your own eyes.
- Landmark Navigation via Keyboard or Pop-Up
- This simple browser extension allows you to view the landmark regions on a page and then navigate through them in a way similar to how some screen readers, and other assistive technologies, may allow a user to do so. It is available for FireFox, Chrome, Edge, and Opera.
- Night Eye
- Night Eye is a useful, lightweight browser extension that helps transform pages into a dark mode view automatically, or per site. Useful for getting an idea of how your page might look with a dark mode stylesheet applied, or to help lessen the strain on your own eyes as you work. It is available for a variety of different browsers and applications.
- Web Accessibility Evaluation Tool (WAVE)
- WAVE is available as a browser extension and through a web page UI. This nifty tool allows you to view an overlay over a page to help identify potential Accessibility issues. It was developed by the Institute for Disability Research, Policy, and Practice at Utah State University. Additional tools they have developed can be found by navigating to their WebAIM site.
- Window Resizer
- Window Resizer is a browser extension available for Chrome and Microsoft Edge, through the Chrome App Store. The extension allows you to test how your site will resize at different window sizes and view the current size of your browser window if you want an easy way to tell what sizes you may need media queries for.
Desktop Applications
- axe Linter
- axe Linter is a tool developed by Deque that can be used with VSCode, GitHub Actions, and more to help developers identify potential accessibility issues in their code base. However, unlike some of the other tools listed here, it is not free. Though they do offer a free trial.
- Color Contrast Analyzer (CCA)
- The CCA application, is a free tool developed by TPGi to allow users to test contrast between colors to identify whether the combination would meet WCAG AA and AAA confromance.
Web Applications
- APCA Contrast Calculator
- The APCA Contrast Calculator, developed by Myndex Technologies, is a web application that can be used to decide whether or not 2 colors will have proper contrast when adjacent to one another.
- W3C Nu Html Checker
- The Nu Html Checker from the W3C helps to check for potential parsing errors in a page's HTML. This is important for ensuring conformance to WCAG's 4.1.1 Parsing Success Criterion.
- W3C Markup Validation Service
- The W3C's Markup Validation Service page is another tool you can use to identify potential parsing issues that could result in failing WCAG's 4.1.1 Parsing Success Criterion.
- Coolors Tools
- Coolors by Fabrizio Bianchi is a site that has a lot of tools, free and paid, that can be used to help with checking color contrast, selecting color palletes, and more. Some of the tools can integrate with other common design tools, like Figma and Adobe. I found the site because of their free Color Contrast Checker that has a simple and clean interface. In particular, I like it because, if your color combination does not meet WCAG guidelines, it provides an option for recommendations based on changing the font color or the background color.
Example Testing Processes
- Visa Global Accessibility Requirements (VGAR)
- A set of 120+ requirrements crafted by Visa Developers and Designers to help maintain Accessibility compliance.
- Section 508 ICT Testing Baseline
- Defines the minimum requirements of any test process used for Section 508 conformance testing.
Accessibility Report Tools
While many of these tools have their repos open to the public, it is important to check the licenses of the repos before making nay modifications or using them to ensure you are in compliance.
- WCAG-EM Report Tool
- Per the Readme for this repo,
The WCAG-EM Report tool is an assistant that takes the user through the process of evaluating the accessibility of a website, using the WCAG Evaluation Methodology.
- Voluntary Product Accessibility Template (VPAT™) - Section 508
- Per the Section 508 site's VPAT page, "A Voluntary Product Accessibility Template (VPAT™) is a document that explains how information and communication technology (ICT) products such as software, hardware, electronic content, and support documentation meet (conform to) the Revised 508 Standards for IT accessibility. VPAT™ help Federal agency contracting officials and government buyers to assess ICT for accessibility when doing market research and evaluating proposals."
- Open by the US General Services Administration (GSA)
- Reporting tool developed by the GSA for Section 508 Conformance testing.
- Accessibility Conformance Reporting Tool (ACRT) by the Department of Homeland Security
- A standalone, browser based Section 508 Conformance reporting tool.
- HUGR by Dig Inclusion Ltd.
- HUGR helps you create accessibility conformance reports that follow WCAG 2.1 based testing methodology. More information is available on the following Gov.UK site, Hugr: Accessibility auditing software. The application is available at HUGR app.
General Training
- UEB Online
- A free online course in Braille. Great for those who just wish to learn or those who wish to make Braille a part of their career.
- Accessibility & Inclusion Trailmix
- A custom Trailmix I made on Salesforce's Trailhead learning platform that consists of various Accessibility and Inclusion related content I have been completing.
- Custom Pluralsight Accessibility Channel
- A custom playlist of Accessibility courses and videos I have found on Pluralsight.
- Accessibility Collection on Microsoft Learn
- A custom collection of Accessibility content I have found on the Microsoft Learn site.
- Deque University
- Per the Deque University website,
Deque University offers training and on-demand reference materials for every level and every area of expertise in digital accessibility.
There are some free resources, but much of the content does require payment on a annual basis to maintain access to. They have groups of content particularly geared towards specific areas of accessibility, roles, and/or accessibility certifications. - Introduction to Web Accessibility - W3C - edX
- Free course on edX created by W3C that provides a strong foundation in Digital Accessibility.
- Learn Accessibility - web.dev
- An evergreen Accessibility course and reference on web.dev, which is under Google Developers.
- Digital.gov - Introduction to Accessibility
- An awesome article by Digital.gov providing an introduction to Accessibility.
- WebAIM - Introduction to Web Accessibility
- An introduction to accessibility by WebAIM with additional links to a wealth of information and examples.
- W3C - WAI - Introduction to Web Accessibility
- An introduction to web accessibility by the W3C's Web Accessibility Initiative (WAI).
Assistive Technology Use
General Screenreader Resources
NVDA from NV Access
- Screen Reader Basics: NVDA -- A11ycasts #09 - YouTube
- Learn Tech - YouTube Playlist
- Preparing for Work with Accessible Technology Solutions - YouTube
JAWS from Freedom Scientific
ZoomText from Freedom Scientific
- Getting Started with ZoomText - Freedom Scientific
- ZoomText Hotkeys - Freedom Scientific
- ZoomText Videos - YouTube Playlist
Return to Top
- Accessibility & Inclusion YouTube PlayList
- This is a playlist I put together of a variety of Accessibility and Inclusion related videos I have found on YouTube. I try to regularly update it as I find new videos.
- CorgiDev on YouTube
- My personal YouTube channel where I put a few videos I made as I learn about particular Accessibility topics.
- Jeremy Andrew Davis on Instagram
- One of my favorite Instagram channels. Jeremy shares loads of awesome content on a variety of Accessibility topics with a large focus on Cognitive conditions like Autism and ADHD. His content succeeds at being fun and informative.