Accessibility is often seen as something for a narrow group of people with special needs. In fact far more visitors need it: someone reading on a phone in the sun, someone who struggles with small print, someone with a broken arm using only a keyboard, someone watching video on a bus without sound.
Below are the basics that make a site easier for everyone and cost almost nothing if they are built in from the start.
Contrast and text size
Light gray text on a white background looks elegant in a mockup and reads poorly in real life. Text should stand out clearly from the background, and the main font size should be comfortable without zooming. If a user enlarges text in the browser, the layout should not break.
Keyboard navigation
Try moving through the site using only the Tab key. You should see which element you are on and the order should make sense. Menus, pop-ups, and the form should work without a mouse, and a pop-up should close with the Esc key.
Forms
- Every field has a label that does not disappear once the person starts typing
- An error explains what is wrong and how to fix it, rather than just turning the field red
- Required fields are marked by more than colour alone
- Phone and email fields bring up the right keyboard on mobile
A clear form also means more requests. Where they get lost is covered in the note on missing form requests.
Images, links, and buttons
Meaningful images need a text description in the alt attribute, which screen readers read aloud. Links and buttons should say what will happen: “Download the price list” is clearer than “Click here.” Buttons should be large enough to hit easily with a finger.
Video and animation
Video with sound is worth captioning: captions help both people who cannot hear and people watching without sound. Animations should not flash or get in the way of reading, and for people who turned animations off in their system settings, the site should stay calm.
How to check it yourself
- Go through the site with the Tab key and send the form without a mouse
- Zoom the page in the browser and see whether anything falls apart
- Open the site on a phone outdoors in bright light
- Run the automatic accessibility check in the browser’s developer tools
Accessibility fits well with the other basics from the note on SEO before launch. If you want us to check your site, use the contact form.