A collection of useful accessibility links
Table of Contents
The articles/libraries were tested in Google Chrome with:
- JAWS
- Dragon
- Zoomtext
- OSX Voiceover
- 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?
- Does the recommended output work well with the tools?
- Is it easy to produce errors?
- Library size?
- Library usability?
- Library extension points?
| Links |
|---|
| W3 |
| BBC |
| Mozilla |
You should be using HTML, CSS only for these
| 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 |
You should be using the semantics of HTML for text
| Links | Description |
|---|---|
| WebAIM | Comprehensive Guide |
| Hong Kiat | Good write up with good content |
| Usability.com | Old, but covers complex tables |
| 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! |
| Links | Description |
|---|---|
| React Tables | See Issue 130 |
| Facebook Fixed Data Table | See Issue 129 for more details |
| 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 |
| 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 |
Standard HTML/CSS/JS recommended
| Links | Description |
|---|---|
Standard HTML/CSS/JS recommended
| 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' |
Standard HTML/CSS/JS recommended
| Links | Description |
|---|---|
| Mozilla 'Button role' |
Standard HTML/CSS/JS recommended
| 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 |
| 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 |
| 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! |
| 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 |
| Link | Description |
|---|---|
| React tabs | Extensible and well marked up |
| React accessible tabs | Uses ARIA, but worked well |
| Link | Why? |
|---|---|
| MUI CSS | No Keyboard Navigation |
| Material UI | No linking between title & content. See Issue 61 for updates |
| Link | Description |
|---|---|
| Mozilla Guidance | Mozilla's advice on managing dialogs |
| Smashing Magazine Guidance | Detailed post by smashing magazine recommending best practices |
| Link | Description |
|---|---|
| A11y Dialog | Lightweight library, html, js api |
| React Modal | Good community who actively test with assistive tools |
| React Overlays | Twitter bootstrap implementation |
| Link | Why? |
|---|---|
| Material UI | No ARIA and poor markup |
| 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 |
| Link | Description |
|---|---|
| aXe Cli | Uses aXe framework - Any browser supported using Webdriver |
| Pa11y | Collection of tools uses PhantomJS |
| Link | Description |
|---|---|
| ESLint - JSX | ESLint plugin for spotting issues in JSX |
| Link | Description |
|---|---|
| Terrible HTML page | Useful tool to test the effectiveness of accessibility testers |