/a11y-boilerplate

A summary of accessibility best practices and tools

Primary LanguageHTML

a11y

CODE EDITOR

Sublime

Accessibility https://packagecontrol.io/packages/Accessibility

Intelesence for roles and available aria attributes.

  • fantastic to see what's available
  • downside. Just a long list of all options.

W3CValidators https://packagecontrol.io/packages/W3CValidators

  • Really good validation.
  • Can't deal with <% template tags %>

TOOLS

Evaluera

http://www.evaluera.co.uk/

Enter a url and get a good summary of potetial issues

  • No local testing
  • Fast
  • Easy to see related markup

Color Contrast Analyzer

https://chrome.google.com/webstore/detail/color-contrast-analyzer/dagdlcijhfbmgkjokkjicnnfimlebcll?hl=en

Chrome plugin

Applies a mask to the page to highlihgt what areas are easy and hard to see.

  • Give an overall good feeling of the color contrast
  • Can test agains different levels e.g AA and AAA

a11y.css

http://ffoodd.github.io/a11y.css/

Add a bookmark to outline potential issues with css.

  • fast
  • Higlits things other tools did not pick up.
  • It's very clear in it pressentation
  • works on local
  • Not descriptive errors or learn more links.

a11yTools Safari

http://pauljadam.com/extension.html

Extension for Safari macOS

This tool is pretty extensive. A simple right click on a page and pick something to test.

  • Fast
  • Works on local
  • extensive
  • Visual and good explanations
  • User in controll of what to test. Less noice
  • Donwside. Only in safari.
  • Ather goog features such as liks to docs. WCAG checklist. html validator (many tools in one)
  • picks up on a lot
  • in wave you can see heading outline.
  • Only works in safari.

Accessibility Developer Tools

https://chrome.google.com/webstore/detail/accessibility-developer-t/fpkknkljclfencbdbgkenhalefipecmb?hl=en

Chrome pugin.

Go to inspectort audit tab and run a test. works a bit similar to axe.

  • fast
  • local
  • Cant crawl.
  • Give a percentage of how well the site performs.
  • Clear overview
  • Can't higlight elements like axe.

AATT PayPal

https://github.com/paypal/AATT

Get testing into development.

  • Crawls the site
  • Intergrate with the build tooling
  • PayPal
  • checks pages behind firewalls and passwords.
  • (I haven't tested this yet)

CKEditor 4

https://ckeditor.com/ckeditor-4/pricing/#accessibility-checker

  • Can be used for free but more feature is available if paying.
  • mentioned on a few blogs.
  • (I haven't tested this yet)