Accessible Web Design Basics: Build a Site Everyone Can Use

An accessible website is one that people can use regardless of ability, device or situation. That includes visitors with low vision, hearing loss, motor difficulties or cognitive differences, and also anyone squinting at a phone in bright sunlight. These accessible web design basics give you a practical starting point, with no technical background required.

Why accessibility matters for every business

Accessibility is often framed as a legal or ethical duty, and both views are valid. It is also plain good business. A site that is easy to read, navigate and operate serves more customers and creates fewer abandoned visits.

Many accessibility improvements overlap with good usability and search optimisation: clear headings, descriptive links, readable text and sensible structure help everyone, including search engines. You do not need to be perfect on day one. Progress counts, and the steps below are the ones that tend to make the biggest difference.

Requirements differ between countries, so if your business operates in a regulated sector or serves public bodies, check the rules that apply to you. The widely used reference is the Web Content Accessibility Guidelines, which organise good practice around making content perceivable, operable, understandable and robust.

Colour, contrast and readable text

Text must stand out clearly from its background. Pale grey text on white, or coloured text on a similarly bright background, is a frequent problem.

• Choose dark text on light backgrounds or the reverse, and test your colour pairs with a free contrast checker.
• Never use colour alone to carry meaning. If errors are red, also add an icon or words.
• Keep body text at a comfortable size and allow it to scale when users enlarge it.
• Use generous line spacing and limit very long lines.
• Avoid text placed directly over busy images without an overlay.

If you are defining or revisiting your palette, the brand colour palette guide explains how to build a set of colours that remain readable in practice. Type choices matter too, as covered in typography for brands.

Structure: headings, landmarks and page order

Many users rely on screen readers, which announce headings and let people jump between them. A clear structure acts as a table of contents.

1. Use one main heading per page, as the page title.
2. Use second-level headings for main sections and third-level headings for subsections, without skipping levels.
3. Choose headings for meaning, not for looks. Do not pick a heading level just because it is bigger.
4. Use real lists for lists and real buttons for actions.
5. Keep the reading order logical, so the page makes sense when styling is removed.

A descriptive page title and a clear language setting also help assistive tools and search engines.

Images, media and alternative text

Every meaningful image needs a short text description, called alternative text, that conveys its purpose.

Writing good alt text

• Describe what matters, not every pixel: "Customer scanning a QR code at a cafe counter".
• Do not begin with "image of" or "picture of".
• If the image contains text, include that text in the description.
• For purely decorative images, use empty alternative text so screen readers skip them.

Video and audio

Provide captions for videos and a written transcript where practical. Avoid autoplay with sound, and give users control to pause or stop moving content. Captions also help people watching in noisy or quiet places, which is why they pair well with the approach in video marketing for small business.

Keyboard use, links and navigation

Not everyone uses a mouse. Some people navigate entirely with a keyboard or other assistive device.

• Make sure you can reach every link, button, menu and form control using the Tab key, in a sensible order.
• Keep a visible focus indicator, such as an outline, so users can see where they are.
• Avoid traps where focus gets stuck inside a popup with no way to close it.
• Provide a skip link to jump past repeated navigation to the main content.
• Write link text that makes sense alone. "View our pricing" is better than "Click here".
• Make touch targets large enough to tap accurately on mobile. The advice in mobile-friendly website design tips applies here too.

Try this quick test: put your mouse aside and attempt to complete your main goal, such as booking or purchasing, using only the keyboard. Note where you get lost.

Forms that people can complete

Forms are common barriers, so they deserve extra care.

• Give every field a visible, properly connected label.
• Do not rely only on placeholder text, which vanishes and can have low contrast.
• Mark required fields clearly.
• Write specific error messages next to the field and explain how to fix the problem. The UX writing and microcopy guide has examples.
• Allow enough time for people to complete steps, and avoid unexpected timeouts.
• Keep captchas to a minimum, and offer alternatives where possible.

Test regularly and build good habits

You do not need specialist tools to begin. A simple routine can reveal most obvious problems.

1. Zoom the page to a larger size and check that nothing breaks.
2. Use only the keyboard on key pages.
3. Run a free automated checker, then remember that these tools catch only some issues.
4. Turn on a screen reader briefly and listen to a page, or ask someone who uses one regularly to review it.
5. View the site on a small phone in bright light.
6. Read the page without images to check that meaning is preserved.

Build accessibility into your normal workflow rather than treating it as a one-off clean-up. Add it to your website redesign checklist and your regular website maintenance checklist, and check each new page before it goes live.

Imagine a small cinema that sells tickets online. It lifts the contrast of its pale grey text, adds labels to the booking form, writes alt text for posters and makes sure the seat selector can be operated by keyboard. None of these changes alters the brand, yet far more customers can complete a purchase.

If you rely on a page builder or theme, check what accessibility support it offers, and choose themes that are lightweight and well maintained.

Content that is easy to understand

Accessibility is not only technical. How you write affects who can follow your message.

• Use plain language. Prefer short sentences and familiar words. If a technical term is necessary, explain it once.
• Break up long text with headings, short paragraphs and lists.
• Put the main point first. Readers who stop early should still have the key message.
• Spell out abbreviations the first time you use them.
• Be clear about links and downloads. Say when a link opens a document and what type of file it is.
• Avoid time-pressured design, such as moving banners that vanish before they can be read.

Good writing for the web follows many of the same habits as the content marketing strategy for beginners, because clarity serves all readers.

Motion, popups and distractions

Movement and interruptions can be disorienting for some people and annoying for everyone.

• Avoid flashing content and rapid animation.
• Let users pause, stop or hide carousels and moving backgrounds.
• Use popups sparingly, make them easy to close, and never block the content for the first few seconds.
• Respect settings that ask for reduced motion, where your platform allows it.
• Do not play sound automatically.

Accessibility audit starter plan

If you want a structured start, spread the work over four weeks.

1. Week one: look. Test your homepage, a service page and your contact page for contrast, text size and headings.
2. Week two: operate. Complete your main task with the keyboard only, then on a phone.
3. Week three: content. Add missing alt text, fix vague links and simplify the most complex paragraphs.
4. Week four: forms and media. Add labels, rewrite error messages and caption your videos.

After the month, record what you fixed and what remains. Share the list with anyone who updates the site so new content follows the same rules.

Mistakes that cause problems

• Treating an accessibility overlay or widget as a complete solution. These can help some people but do not repair underlying issues.
• Using images of text instead of real text.
• Hiding the focus outline for visual neatness.
• Relying on hover effects to reveal important information.
• Publishing documents such as PDFs without checking that they can be read by assistive tools.
• Assuming new designs are accessible because they look clean.

A design that works for the widest range of people is usually simpler, clearer and more robust, which benefits every visitor and your business.

Key takeaways

Start with the fundamentals: strong contrast, clear headings, descriptive alt text, keyboard access and labelled forms. Test often, fix the biggest barriers first and treat accessibility as an ongoing habit rather than a project with an end date.

Pick your most important page, run through the quick tests above and write down three fixes to make this week. If you would like support auditing or rebuilding your site with these principles in mind, get in touch or review the website portfolio.