Lets start a wiki on this… The ideal is to keep this a short 5 minute read that covers the basics. Link to more advanced documents/resources. This is a living document please!!! feel free to make changes! I’ll leave spelling mistakes so your forced to make some edit :)
Basics
Always write HTML code with accessibility in mind!
Make your HTML code as semantic as possible.
Semantic elements are elements with a meaning; if you need a button, use the <button>
element.
Examples of non-semantic elements:
<div>
and<span>
- Tells nothing about its content.Examples of semantic elements:
<form>
,<table>
, and<article>
- Clearly defines its content.
Use alt
attribute to describe images.
Use clear language:
Keep sentences as short as possible
Avoid characters that cannot be read clearly by a screen reader
Avoid dashes. Instead of writing 1-3, write 1 to 3
Avoid abbreviations. Instead of writing Feb, write February
Avoid slang
A link text should explain clearly what information the reader will get by clicking on that link.
Links
https://uwaterloo.ca/digital-accessibility
https://uwaterloo.ca/web-resources/resources/accessibility
WAVE browser plugin
Lighthouse - built into Chrome browser
This site has some neat examples of Some quick useful items.
Notes
AA level - required for public and student content. What about staff?