geemanjs / a11y-links

Collection of useful accessibility links

a11y-links

A collection of useful accessibility links

Table of Contents

• How this list was formed
  • Learn more sections
  • Libraries sections
  • Content
    • Headings
    • Typography
    • Tables
    • Colour
  • Forms
    • Inputs
    • Select
    • Radios & Checkboxes
    • Buttons
    • Validation
  • Navigation
  • General Components
    • Tabs
    • Dialogs
• Testing
  • Tools
    • In Browser
    • CLI
    • IDE (Could be considered CLI)
  • Tool Testing

How this list was formed

The articles/libraries were tested in Google Chrome with:

• JAWS
• Dragon
• Zoomtext
• OSX Voiceover

Learn more sections

• Could someone with a basic grasp of JS,CSS,HTML understand it?
• Is it well written?
• Is it well presented?
• Are coding samples supplied?
• Do the coding samples follow 'best' practice?
• Do the coding samples follow WCAG Guidelines/advice?
• Does the output from the coding samples work well with the tools?
• Does the guidance come from a 'well known' resource?

Libraries sections

• Does the recommended output work well with the tools?
• Is it easy to produce errors?
• Library size?
• Library usability?
• Library extension points?

Content

Headings

Learn more

Links
W3
BBC
Mozilla

Libraries

You should be using HTML, CSS only for these

Typography

Learn more

Links	Description
WebAIM	Font considerations
[Hemming Way] (http://www.hemingwayapp.com/)	Improve content readability
Penn State university	<b> vs <strong> & <i> vs <em>
UK Government

Libraries

You should be using the semantics of HTML for text

Tables

Learn more

Links	Description
WebAIM	Comprehensive Guide
Hong Kiat	Good write up with good content
Usability.com	Old, but covers complex tables

Libraries

Links	Description
Pivotal Table	Great Library from an accessibility perspective, limited extension
React Bootstrap Table	Apart from Headers been in a seperate table, the rest of the markup is pretty good!

Bad Tables

Links	Description
React Tables	See Issue 130
Facebook Fixed Data Table	See Issue 129 for more details

Colour

Learn more

Links	Description
WCAG2.0 colour	WCAG advice
Contrast Checker	-
WEBAIM Contrast Checker	-
'We Are Color Blind'	A movement to try and raise awareness of colour blindness
Designing for colour blindness	Good blog post on designing for colour
blindness
How users change colours	gov.uk research
article on how users change colours in the browser

Libraries

Forms

Inputs

Learn more

Links	Description
W3 WAI advice	More general than just input fields but solid tutorials
WebAIM form advice
Building accessible forms	In depth write up
including the why

Libraries

Standard HTML/CSS/JS recommended

Select

Learn more

Links	Description

Resources

Standard HTML/CSS/JS recommended

Radios & Checkboxes

Learn more

Links	Description
GDS Improving Radios & Checkboxes	Good write up by GDS with well backed up research
W3 grouping controls	Using fieldset/legends to group content
Multi level grouped checkboxes	Interesting method of 'select all'

Libraries

Standard HTML/CSS/JS recommended

Buttons

Learn more

Links	Description
Mozilla 'Button role'

Libraries

Standard HTML/CSS/JS recommended

Validation

Learn more

Links	Description
WebAIM advice	Covers the basics well
Deque advice	Good explanation of HTML5
methods
Andrew Burton Blog Post	Helps set
you in the right mindset

Libraries

Navigation

Learn more

Links	Description
W3 Guidance	Fantastic resource from W3 with a collection of recommendations & best practices
Heydon works guidance	Navbar with dropdown, works really well!
Terril Thompson guidance	Slightly outdated, but very relevant recommendations

Libraries

Links	Description
React Router	When combined with advice above can produce great menus
React Bootstrap	Accessible bootstrap navigation bar
React Tray	Instructure library - Very well made!

General Components

Tabs

Learn more

Link	Description
Smashing Magazine	Good writeup which links out to further examples
OAA Accessibility	Good example with well marked up ARIA
W3	How users expect tabs to behave

Libraries

Link	Description
React tabs	Extensible and well marked up
React accessible tabs	Uses ARIA, but worked well

Bad Libraries

Link	Why?
MUI CSS	No Keyboard Navigation
Material UI	No linking between title & content. See Issue 61 for updates

Dialogs

Learn more

Link	Description
Mozilla Guidance	Mozilla's advice on managing dialogs
Smashing Magazine Guidance	Detailed post by smashing magazine recommending best practices

Libraries

Link	Description
A11y Dialog	Lightweight library, html, js api
React Modal	Good community who actively test with assistive tools
React Overlays	Twitter bootstrap implementation

Bad Libraries

Link	Why?
Material UI	No ARIA and poor markup

Testing

Tools

In Browser

Link	Description
aXe	Chrome/Firefox extension, pretty in depth
Google Lighthouse	Chrome extension for Progressive Web Apps. Uses aXe for accessibility assesment
Html CodeSniffer	Bookmark with different levels of WCAG
Tenon	(Online only) Type your url in and off you go
Tota11y	Bookmark covers the very basics

CLI

Link	Description
aXe Cli	Uses aXe framework - Any browser supported using Webdriver
Pa11y	Collection of tools uses PhantomJS

IDE (Could be considered CLI)

Link	Description
ESLint - JSX	ESLint plugin for spotting issues in JSX

Tool Testing

Link	Description
Terrible HTML page	Useful tool to test the effectiveness of accessibility testers