Accessibility is sometimes abbreviated to a11y (starts with A, ends with Y and 11 letters long).
Some level of website accessibility may be a legal or contractual requirement. Regardless of this, it is right to consider which accessibility techniques we can use to benefit our visitors.
W3C tips for web design emphasises the need for accessibility to start with the design. The W3C also publishes Easy Checks — A First Review of Web Accessibility that provides preliminary checks for any web page and a list of accessibility tools. There are then plenty of more specific resources.
- 10 guidelines to improve your web accessibility on the aerolab blog. From fundamentals to hiding elements and tools.
- 27 accessibility testing tools.
- Accessibility cheatsheet from Moritz Giessmann.
- Accessibility style guide, an open-source resource.
- Accessibility workflow video. Addy Osmani with Rob Dodson, a developer advocate on the Chrome team, about his workflow for accessibility testing.
- Accessible Accessibility, a talk given by Digital Ocean software engineer Brian Sinclair at EmpireJS 2016, discusses modern trends in website accessibility. Includes introduction to WCAG quickref, semantic markup, aXe from Deque, and other tools.
- Accessibility check-list by Vox Media with preview in a choice of markup that can be copied to a group's work schedule.
- Accessibility resources list by Paul J Adam.
- a11y project, collaboration to make web accessibility easier. It includes an accessibility checklist. The a11y project github repository.
- Accessible video blog post by Gian Wild on Sitepoint.com in . A later post, , discusses whether mobile accessibility shortcomings require WCAG 3?
- Accessibility whack-a-mole by Eleanor Ratliff, . Fixing an accessibility problem for one group of users can cause difficulty for a different group. The article looks at the specific case where the chosen solution was to modify the proprietary Progress Two font to make Wellcome Bold.
- Accessible menu systems in detail by Heydon.
- achecker accessibility tester lists possible problems.
- Accessibility Nutrition Cards for components by Dave Rupert
- Colour schemes need to be suitable. The W3C
wiki on Colour Theory is a useful starting point. The use of colour within CSS is documented in the
W3C CSS Color Module Level 3 recommendation.
- A Nerd’s Guide to Color on the Web by Sarah Drasner, .
- Boost usability with intelligent color choices by Preston Pierce, .
- HTML color codes by Dixon & Moe provides colour charts, conversions and schemes.
- Color accessibility workflows by Gert Coady, .
- Color Safe colour palettes that meet WCAG guidelines.
- Colour contrast analyser from the Paciello Group.
- CSS and accessibility, an article on Medium by Manuel Matuzovic, September 2017.
- Open Color is a color scheme for UI design. All the color is tested on deuteranopia and protanopia mode.
- paletton.com provides a tool to assist colour scheme design.
- Practical Color Theory for People Who Code by Natalya Shelburne gives an overview of colour theory with code implementation for colour wheel relationships. Jonathan Z White wrote an article on Designing in Color.
- RGBA demonstrations in a CSS-Tricks article.
- CSS image replacement, text indent, negative margins and more from Sitepoint by Baljeet Rathi on looks at the range of techniques to hide text but leave it visible to search engine bots and assistive technologies.
- EU guidance on website accessibility validation.
- Firefox and Chrome have several extensions that are helpful for improving accessibility, notably Chris Pederick’s Developer Tools Extension and accessibility evaluation tool aXe dev tools from Deque including a Chrome browser extension.
- gov.uk accessibility guidelines and posters blog posts.
- Google Accessibility Developer add-on from Google for Chrome has good colour checking options.
- Icon accessibility is addressed in How Can I Make My Icon System Accessible? by Chris Coyier on CSS-Tricks, 31 May 2017.
- Interaction design checklist.
- Internationalization tips from W3C.
- Koa11y is a desktop app to evaluate web page accessibility built using Pa11y.
- Modal dialog that is lightweight, flexible and accessible. Written by Edenspiekermann.
- Pa11y publish a range of free and open source tools to help designers and developers make their web pages more accessible:
- Simply accessible articles.
- Jim Thatcher on skiplinks, includes a 2009 update on the use of skiplinks, s508 mandated, by some US Government websites.
- Source Order, Skip links and Structural labels, paper by Roger Hudson on the value of skiplinks and other techniques to support screen reader and text browser users.
- SVG accessibility is covered in a CSS-Tricks article from by Heather Migliorisi.
- W3C WCAG 2.0, Web Content Accessibility Guidelines (WCAG) 2.0. Web Content Accessibility Guidelines 2.1 became a W3C recommendation in June 2018; Understanding WCAG 2.1 and Techniques for WCAG 2.1 have also been published. W3C also publish A quick reference on how to meet WCAG 2.0 and Accessibility Requirements for People with Low Vision.
- Transcript element is being considered by W3C to aid accessibility.
- UK Home Office posters recommending a11y techniques for different groups.
- W3C WAI (Web Access Initiative) including
- WCAG 2.0 summarised and explained by Alan Dalton at 24 Ways, December 2017.
- Web accessibility basics by Marco Zehe, the accessibility QA engineer and evangelist at Mozilla. This article on Marco’s accessibility blog was published on .
- WebAIM, a web accessibility services organisation, maintain a useful library of resources and articles as well as the WAVE accessibility evaluator tool.
- WebAxe.org blog and podcast on web accessibility.
- WuhCAG, the website of Luke McGrath, helping to make accessible websites. Luke was interviewed by Jen Simmons in Episode 69 of Web Ahead.
- The A11yproject Web Accessibility Checklist includes a useful summary of the ARIA landmarks.
- ARIA Landmark Roles article by Lyza Danger Gardner, on AListApart, gives more background and discussion on the Landmark roles.
- ARIA Roles on MDN.
- Improve Your Website’s Accessibility With WAI-ARIA by Louis Lazaris, .
- Use ARIA effectively with HTML5 is an article covering the use of new HTML5 tags and ARIA to improve accessibility. The article is by Georgie Luhur, published by SitePoint on .
- W3C Aria in HTML working draft defines the web developer rules for the use of wai-aria-1.1 attributes on HTML5.1 elements. The Editor's draft is on GitHub.
- W3C Web Accessibility Initiative (WAI): definitions, strategies, guidelines and resources to make the Web accessible including Accessible Rich Internet Applications (WAI-ARIA) 1.1.
Validation and testing
This section is just on tools that have specific accessibility testing components. General web validation and testing tools have their own section. Other validation tools still matter: the foundation for good web accessibility is well-structured, semantic, valid HTML and CSS.
- Check My Colours verifies colour schemes for accessibility.
- Contrast checker by Lea Verou. This provides the contrast value used by WCAG.
- Contrast checking limitations are demonstrated in an article by Kevin Marks on modern typography, including “how font weight changes what is ostensibly the same contrast ratio”.
- Cynthia Says usability checker.
- Firefox accessibility inspector is explained in this MDN article from June 2018.
- Pa11y accessibility testing suite using npm.
- Tenon.io accessibility testing with API and some free services.
- tota11y [TOTA11Y], an accessibility visualization toolkit from Khan Academy.
- Total Validator Java application. No-cost single URL validator, low cost site validator and a browser plug-in. The site validator is a low licence fee plus annual maintenance and is run locally rather than a per-page online service.
- WAVE from WEbAIM is a no-cost tester for web accessibility of a single URL. Includes contrast checker. Needs the HTTP request to set Referer (sic) Header to allow display of checked page (otherwise ‘Forbidden’ is displayed).