Skip to end of metadata
Go to start of metadata

You are viewing an old version of this page. View the current version.

Compare with Current View Page History

« Previous Version 7 Next »

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.

https://uwaterloo.ca/digital-accessibility

https://uwaterloo.ca/web-resources/resources/accessibility

WAVE browser plugin

Lighthouse - built into Chrome browser

https://picocss.com/

  • This site has some neat examples of Some quick useful items.

WCAG2.1 Help Tool

Notes

AA level - required for public and student content. What about staff?

  • No labels