These three things cause the most problems, and are the easiest to fix.
Headings
Screen reader users move through a page by headings. Keep the outline logical.
index.html
HTML
<h1>Juniper Books</h1>
<h2>Events</h2>
<h3>Poetry night</h3>
<h3>Book club</h3>
<h2>Contact</h2>Images
| Situation | alt text |
|---|---|
| Informative photo | Describe what matters: Two staff members unpacking a box of books |
| Image that is a link | Say where it goes: Juniper Books home |
| Decorative image | Empty: alt="" |
| Chart or diagram | A short summary, with the full details in text nearby |
Links and buttons
index.html
HTML
<!-- Poor -->
<a href="/returns">Click here</a>
<!-- Better -->
<a href="/returns">Read our returns policy</a>Link text must make sense without the text around it. If several links look the same, such as many “Read more” links, add context:
index.html
HTML
<a href="/post/12">Read more <span class="visually-hidden">about poetry night</span></a>Colour and contrast
Text needs enough contrast against its background. A common target is a contrast ratio of at least 4.5 to 1 for normal text. Browser developer tools can measure this for you.
warning
Color-only information
“Fields in red are required” does not help someone who cannot see red. Add the word “required” or a symbol too.