Design 4 min read

Accessible by default: five checks we run on every page

Contrast, focus, headings, alt text and touch targets, and why they help everyone.

Website accessibility: three dots on a lime green dot grid, the cover of this Tiga Titik journal note

An accessible website works for people with low vision, colour blindness, motor difficulties or a screen reader. It also works better for everyone else: someone in bright sunlight, someone using one hand on a crowded train. These are five checks we run on every page before launch.

Website accessibility can sound like a long technical standard, and the full one is. But most of the problems we find on real sites come down to the same five things, and anyone can check them in an afternoon, without special tools.

1. Contrast

Body text needs a contrast ratio of at least 4.5:1 against its background, and large text at least 3:1. Light grey text on white often fails, and it is hard to read outside.

To check, pick the text colour and the background colour and enter them in WebAIM’s contrast checker. Check buttons, placeholder text in forms and text on photos too: those fail most often.

2. Focus

Everything you can click must also work with a keyboard, and the focused element needs a clearly visible outline. Removing the outline for looks leaves keyboard users lost.

3. Headings

One main heading per page, then headings in order. Screen reader users jump between headings to scan a page, the way sighted visitors scan with their eyes.

4. Alt text

Pictures that carry meaning get a short description of what they show. Decorative ones get an empty description, so screen readers skip them.

Good alt text describes what matters in the picture for this page. For a product photo, that is the product and its colour; for a team photo, who is in it. Don’t start with “image of”: screen readers already announce that it is an image.

5. Touch targets

Buttons and links need to be big enough, and far enough apart, to tap with a thumb. A comfortable target is about 44 by 44 pixels.

Accessibility is not an extra feature. It is how the site should work.

Website accessibility beyond the five checks

The five checks catch the most common problems. A few more are worth adding once they are in place:

  • Forms: every field has a visible label, not only a placeholder, and errors say what went wrong and how to fix it.
  • Links: link text says where it goes. “Read our pricing” works out of context; “click here” doesn’t.
  • Zoom: the page still works when the text is enlarged to 200%, without content being cut off.
  • Motion: animations respect the “reduce motion” setting on the visitor’s device, and nothing flashes.
  • Video: captions for speech, so the video works with the sound off as well.

The full standard is the Web Content Accessibility Guidelines (WCAG) 2.2. Level AA is the common target for business websites. The W3C’s easy checks are a good next step after the five above.

Why it is good for business

Accessible sites are usually easier for everyone to use, which means more people finish what they came to do. Many accessibility basics overlap with search engine best practice, such as clear headings, descriptive links and alt text. And it is simply part of building something properly, like making sure the front door opens.

Questions people ask

Is website accessibility required by law in Indonesia?

Indonesian law recognises the rights of people with disabilities, including access to information, though specific technical requirements for private websites are less detailed than in some countries. If you sell abroad, check the rules in those markets. Either way, the checks above are good practice.

Can an accessibility plugin or overlay fix everything?

No. Overlays can’t fix missing labels, poor structure or unreadable colours in the design itself. Accessibility has to be built into the design and the code.

How do we test with a screen reader?

Every phone has one built in: VoiceOver on iPhone and TalkBack on Android. Turn it on, close your eyes, and try to find your contact details. It is humbling, and very informative.

Website accessibility is part of how we design and build every site in our web design service. It also overlaps with speed and type: see why a website feels slow on a phone and choosing fonts for two languages.