In this repository you will find some information on web accessibility, split into sections and with code examples.
Try and complete the quick fire checklist below to see whether there are any missing from your product.
- Colour
- Page Structure and Semantic HTML
- ARIA attributes
- Visual Content
- Keyboard Only
- Forms
- Tables
- Common Accessibility issues/Examples with UI libraries
- Testing resources
- Is the lang attribute set to the correct language?
- Does your codebase have documentation in a README and comments where necessary?
- Is the HTML valid? (You can check with this W3 validator)
- Does the design have accessible colours? If not, have the colours been checked?
- Can you still navigate your site if it was in black and white?
If no - read through the colour section.
- Do all of your pages have unique and descriptive
titletags? - Is there only one
h1heading present on each page? - Are the
htags in a logical order matching the structure? - Is semantic HTML used where possible?
If no, read through the page-structure section.
- Are ARIA attributes used if semantic HTML is not possible?
If no, read through the aria section.
- Do all images have descriptive alt text?
- Does any visual/audio content have the option to pause?
- Can you resize your website to 200% and still use it?
If no, read through the visual-content section.
- If you have a navigation header, is a 'skip to main content' link present?
- Are interactive attributes focusable, with obvious visible styling on focus?
- Can you tab through your website in a logical order without using your mouse?
If no, read through the keyboard-only section.
- Do your forms use clear labels and alternative text if needed?
- Do your forms provide guidance to the user upon error?
- Are all required fields marked?
- Do all of your input fields have a purpose specified? e.g.
input type="email"
If no, read through the forms section.
- Does your table have headers with listed scope of 'col' or 'row'?
- Does your table include a Caption?
If no, read through the tables section.
Want to contribute to this repository? Please do!
You can do this by...
- Creating an issue - if it is a minor addition or if it is a complicated accessibility issue that everyone can input into.
- Opening a Pull Request - if there is a particular area you would like to add a chunk of information or some examples to.