Accessible Web Design Basics: Contrast, Captions, Keyboards and Clear Forms

Accessible web design means building pages that work for people who see, hear, move or think differently, including anyone using a screen reader, a keyboard instead of a mouse, a magnifier or captions. The basics are not exotic: enough colour contrast, text that can be enlarged, descriptions for images, captions for video, full keyboard control with a visible focus outline, headings in a sensible order and forms that explain their mistakes. Most of these choices also make a site easier for everyone else.

Text people can actually read

Colour contrast

Pale grey writing on a white background looks calm in a design mock-up and almost disappears on a phone in sunlight. Text needs a clear difference in lightness from whatever sits behind it. Free contrast checkers built into most browser developer tools will flag weak combinations, and the fix is usually just a darker shade of the same colour.

Colour should also never be the only signal. A form field marked only in red, or a chart that relies on green versus orange lines, leaves out anyone who cannot tell those colours apart. Add a word, an icon or a pattern as well.

Type size and spacing

Body text should be comfortably large on a phone without pinching, with generous line spacing and lines that are not stretched across a wide monitor. Sizes set in relative units let visitors enlarge text through their browser settings, and the layout should still hold together when they do. Avoid putting important words inside images, because they cannot be resized, translated or read aloud.

Images, audio and video

Every meaningful image needs alt text: a short description that a screen reader speaks in place of the picture. Describe what matters in context. A product photo might need the colour and style; a chart needs its main takeaway. Purely decorative images should have empty alt text so they are skipped rather than announced as "image".

Video needs captions for speech and important sounds, and ideally a transcript nearby. Auto-generated captions are a starting point, not a finished job; names, technical terms and accents trip them up. Clean source audio makes the whole process easier, which is one practical reason to record speech with a clip-on microphone close to the speaker.

Keyboard use and visible focus

Some visitors never touch a mouse. They move through a page with the Tab key, activate links with Enter and operate menus with the arrow keys. For that to work, every link, button and form field has to be reachable in a logical order, and the item currently selected needs a clearly visible outline. Designers sometimes remove that outline because it looks untidy; replacing it with a styled version is fine, removing it entirely is not.

Watch for common traps:

• Drop-down menus that open only on hover and cannot be reached by keyboard.
• Pop-ups and cookie banners that grab focus and offer no way to close them.
• "Buttons" built from plain boxes that look clickable but ignore the keyboard.
• Carousels that keep moving with no pause control.
• A long menu with no "skip to content" link at the top.

Headings that make sense out loud

Screen reader users often jump from heading to heading to get the shape of a page, much as sighted readers skim. That only works if headings are real heading tags, used in order: one main title, then sections, then subsections beneath them. Choosing a heading level because of its font size breaks the outline. Link text matters for the same reason. A list of links that all say "click here" or "read more" tells a listener nothing, while a link that names its destination makes sense on its own.

A good way to judge structure is to imagine reading only the headings and links. If that skeleton tells the story of the page, the structure is probably sound. A New Zealand business commissioning a new site from an Auckland web design studio such as Forge can ask to see this outline before any visual styling begins, and the same check works for anyone editing their own pages.

Forms and error messages

Forms are where many sites quietly shut people out. Each field needs a visible label tied to it in the code, not just grey placeholder text that vanishes as soon as typing starts. Group related options, such as a set of radio buttons, under a clear question. When something goes wrong, the message should name the field, say what the problem is and suggest the fix, and it should appear next to the field as well as in a summary at the top.

Login forms deserve extra care. Allowing paste into password fields helps people who rely on a password manager to fill in their logins, and avoiding puzzle-style checks that depend on sight or fine motor control keeps the door open for more visitors.

Simple ways to test a page

Questions that come up

Does accessibility mean a plain, boring design?

No. Strong contrast, clear type and visible focus styles can all be designed to match a brand.

Is accessibility a legal requirement?

Many countries have rules about digital accessibility, and some apply to private businesses as well as public bodies. What applies depends on where an organisation operates and what it does, so check the rules that cover your own situation rather than relying on a general article.

Where should a small site start?

Start with the pages people use most, usually the home page, the contact form and any checkout. Fix contrast, labels, alt text and keyboard access there first, then work outwards.