Accessibility Basics Every Designer and Developer Should Know

Published October 2026 · ramza.shop

Accessibility means making sure people with different abilities can use what you build. It also improves the experience for everyone, such as someone reading a phone screen in bright sunlight. These basics cover most of the common problems.

Colour contrast

Text needs enough contrast against its background. The Web Content Accessibility Guidelines (WCAG) suggest at least 4.5:1 for normal text and 3:1 for large text. Free contrast checkers make this a ten-second test.

Do not rely on colour alone

If an error is shown only in red, people with colour blindness may miss it. Add an icon or text such as “Error: email is required”.

Keyboard access

Everything clickable should be reachable with the Tab key, in a logical order, with a visible focus outline. Never remove the focus style without replacing it.

Alt text

Meaningful images need a short description of what they show or do. Decorative images should have empty alt text so screen readers skip them.

Use real HTML

Buttons should be button elements, links should be links, and headings should follow a logical order. Screen readers rely on this structure to describe the page.

Forms

Every field needs a visible label, and error messages should say what went wrong and how to fix it.

Text size and spacing

Allow text to be enlarged without breaking the layout, and use readable line spacing. Keep tap targets large enough, around 44 by 44 pixels.

Motion

Avoid flashing content, and respect the “reduce motion” setting for animations.

Test it

Try using your site with only a keyboard, then with a screen reader such as NVDA or VoiceOver for a few minutes. You will find real issues quickly.