Web Accessibility Basics

Accessibility means building a website that people with disabilities can perceive, understand, and use — including those who browse with a screen reader, navigate by keyboard, or need larger text and stronger contrast. It is both the right thing to do and, in many places, a legal expectation. Happily, most of what makes a site accessible also makes it better for everyone.

Abstract illustration of accessible design: high contrast, a clear focus outline, and keyboard navigation

Who accessibility is for

A large share of any audience benefits from accessible design: people who are blind or have low vision, people who are deaf or hard of hearing, people with limited motor control who cannot use a mouse, people with cognitive differences, and the very many of us who are temporarily limited — a broken arm, bright sun on a screen, a noisy room, an aging pair of eyes. Design for the edges and the middle gets easier too.

The authoritative reference is the World Wide Web Consortium's Web Accessibility Initiative, which explains the principles in plain terms and underpins the standards used around the world.

Describe your images with alt text

Every meaningful image needs alternative text — a short written description that screen readers announce and that appears if the image fails to load. Good alt text conveys the purpose of the image, not a literal catalogue of pixels: for a photo of your storefront, "our shop on the high street" is more useful than "building." Purely decorative images should carry empty alt text so screen readers skip them rather than reading noise.

Alt text has a side benefit: it gives search engines a way to understand your images, which we touch on in images for the web.

Use enough colour contrast

Text that sits too close in colour to its background is hard for many people to read and impossible for some. The Web Content Accessibility Guidelines set measurable contrast ratios — a common target is at least 4.5 to 1 for normal body text — and free checkers let you test a colour pair in seconds. WebAIM's contrast checker is a reliable one. Never rely on colour alone to carry meaning, either: if the only signal that a form field has an error is that it turned red, people who cannot distinguish that red will miss it, so pair colour with text or an icon.

Make everything work with a keyboard

Many people cannot use a mouse and navigate entirely by keyboard, tabbing from link to link and button to button. Every interactive element must be reachable and operable this way, and the element currently in focus must be clearly visible with an outline or highlight. If you cannot tab to your own menu and open it without touching the mouse, neither can a keyboard user.

This also helps power users and anyone on a device where the pointer is awkward. Keyboard access is a good proxy for overall robustness.

Structure content clearly

Assistive technology relies on the underlying structure of a page, not just its appearance. Use real headings in a logical order so a screen-reader user can jump between sections the way a sighted reader skims. Write descriptive link text — "read our pricing" rather than "click here" — because many people navigate by pulling up a list of links out of context. Label form fields properly so the software can tell a user what each box is for.

None of this is exotic; it is simply using the web's building blocks the way they were intended. Clear structure is the same thing that helps your writing scan well and your pages rank.

Build it in, do not bolt it on

Accessibility is far cheaper and better when it is part of the plan than when it is retrofitted after complaints. Ask for it in your brief, check the basics before launch, and treat it as a mark of a professional site rather than an optional favour. A site everyone can use is simply a well-made site.