All posts

Six accessibility fixes you can make this afternoon

Unknown Author

You don't need a developer or a big budget to make your website noticeably easier to use. Most accessibility problems are small and fixable from whatever editor you already use. Here are six you can knock out in an afternoon.

1. Describe your images

Every image on your site has a spot for "alt text." It's a short description that screen readers read out loud for people who can't see the image. Search engines read it too.

Write what the image shows and why it's there. "Photo" is useless. "Our crew installing a new roof on a two-story house" is great. If an image is purely decorative, like a background swirl, leave the alt text empty so screen readers skip it.

2. Make your text easy to read

Light gray text on a white background looks sleek, and it's also the single most common accessibility error on the web. If you have to squint, so does everyone else.

Paste your text color and background color into a free contrast checker (search "WebAIM contrast checker"). For normal body text you want a ratio of at least 4.5 to 1.

3. Use headings like an outline

Screen reader users often jump from heading to heading to skim a page, the same way you'd skim bold titles. That only works if your headings are real headings, not just big bold text.

Give each page one main heading, then use smaller headings for sections in order. Don't jump from the biggest heading straight to the smallest because you liked how it looked.

4. Write links that make sense on their own

"Click here" and "Learn more" mean nothing when a screen reader lists all the links on a page. Make the link text say where it goes, like "See our pricing" or "Read our return policy."

5. Put the mouse down

Try using your site with just the keyboard. Press Tab to move forward, Shift+Tab to go back, and Enter to click.

Can you reach every button and link? Can you see where you are on the page? Can you get out of every pop-up? If you get stuck anywhere, so does everyone who can't use a mouse.

6. Label your form fields

On your contact form, every box should have a visible label, like "Email" or "Phone," sitting above or next to it. Placeholder text inside the box doesn't count, because it disappears as soon as someone starts typing and a lot of screen readers ignore it.

What these won't catch

These six cover a big chunk of the problems out there, but not all of them. Things like video captions, how a page behaves when zoomed in, and how custom menus work with screen readers take more hands-on testing.

If you'd rather not deal with any of this yourself, that's what we're here for. Every site we build is built to WCAG 2.1 AA and tested before launch. Get in touch and we'll take a look at where you stand.