Around one in six people worldwide lives with a significant disability, and far more experience temporary or situational limitations — a broken arm, bright sunlight on a phone screen, a noisy train with no headphones. Accessible design serves all of them, and in many countries it is also a legal requirement. It overlaps heavily with good form design, because forms are where inaccessible interfaces most often lock people out of buying, booking or signing up.
This guide covers the practical essentials of web accessibility, then the principles of forms that are accessible, easy to complete and good for conversion. It is part of a series with UX design fundamentals, visual design and navigation, mobile and performance.
Accessibility
Why Accessibility Is a UX Issue, Not Just a Legal One
Accessibility is often approached as compliance — avoiding lawsuits or meeting procurement rules. But inaccessible design is simply bad UX for a large group of people: they cannot read the text, operate the controls or complete the task. Accessible design also tends to improve the experience for everyone: captions help in noisy places, clear focus states help power users, good contrast helps in sunlight, and plain language helps everyone. Many accessibility improvements also align with SEO, such as descriptive headings, alt text and meaningful link text.
The reference standard is the Web Content Accessibility Guidelines (WCAG), with WCAG 2.2 level AA the common target.
Running an Accessibility Audit on an Existing Website
- Automated scan of key templates with free tools (such as Lighthouse or browser extensions). These catch perhaps a third of issues — missing alt text, low contrast, missing labels.
- Keyboard test: navigate every key journey using only Tab, Shift+Tab, Enter, Space and arrow keys.
- Screen reader spot-check with a free screen reader (NVDA on Windows, VoiceOver on Mac and iOS).
- Zoom test: zoom to 200% and 400% and check that content reflows without loss.
- Content review: headings, link text, alt text, captions, plain language.
- Prioritise issues that block tasks (cannot submit the checkout) over cosmetic ones.
Designing With Keyboard Navigation in Mind
Many people navigate without a mouse — screen reader users, people with motor disabilities and power users. Every interactive element must be reachable and operable by keyboard, in a logical order that follows the visual layout. Watch for custom dropdowns, modals and menus that trap focus or cannot be opened with the keyboard, and add a "Skip to content" link so keyboard users can bypass repeated navigation.
Designing Accessible Focus States
The focus indicator shows keyboard users where they are on the page. Removing it (the infamous outline: none) makes a site unusable for them. Design a clearly visible focus style with strong contrast — a thick outline or ring — and use :focus-visible to show it for keyboard users without distracting mouse users.
ARIA Labels and When You Actually Need Them
ARIA attributes add accessibility information for assistive technology. The first rule of ARIA is to use native HTML elements whenever possible — a real <button> is keyboard-operable and announced correctly with no ARIA at all. Use ARIA to fill gaps: aria-label for icon-only buttons, aria-expanded for menus and accordions, aria-live for content that updates dynamically. Incorrect ARIA is worse than none, because it gives screen readers wrong information.
Writing Alt Text That Actually Helps Screen Reader Users
Alt text should convey what the image communicates in context, concisely:
- Describe the content and purpose ("Bar chart showing sales doubling from 2023 to 2025"), not just the object ("chart").
- Do not start with "image of" — screen readers already announce images.
- For linked images, describe the link destination.
- Use empty alt text (
alt="") for purely decorative images so screen readers skip them. - Put detailed data from complex charts in nearby text or a table.
Ensuring Sufficient Color Contrast for Low-Vision Users
WCAG AA requires a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text and essential interface components such as input borders and icons. Check text over images and gradients, placeholder text (often too faint), disabled states and focus indicators. Never use colour alone to convey information — add text or icons.
Typography for Accessibility and Dyslexia-Friendly Design
Readable typography helps everyone, especially people with dyslexia and low vision: body text of at least 16px, line height around 1.5, comfortable line lengths, left-aligned text (justified text creates uneven gaps), sufficient spacing between paragraphs, and avoiding long passages in italics or all caps. Let users resize text without the layout breaking.
Designing for Cognitive and Learning Disabilities
People with cognitive disabilities benefit from clarity and predictability: plain language, short sentences, clear headings, consistent navigation, familiar patterns, generous time limits (or none), clear instructions, and forgiving error handling. Avoid unexpected changes like content that moves on its own or pages that change without warning. These principles reduce cognitive load for every user.
Designing for Users With Motion Sensitivity
Animations such as parallax scrolling, zooming transitions and auto-playing motion can trigger dizziness, nausea or migraines for people with vestibular disorders. Respect the prefers-reduced-motion setting by reducing or removing non-essential animation, avoid flashing content (never more than three flashes per second), and give users controls to pause anything that moves automatically.
Captioning and Accessible Video Content
Videos need captions for deaf and hard-of-hearing users — and for the many people who watch with the sound off. Provide accurate captions (edit auto-generated ones), transcripts for audio content and podcasts, audio description or descriptive narration where visual information matters, and accessible player controls. Transcripts also make video content searchable.
Forms
Form Optimization: Every Field Is a Small Decision to Leave
Each field asks the user for effort and information, and each is an opportunity to abandon the form. Remove every field you do not genuinely need, make optional fields clearly optional (or remove them), use smart defaults, and explain why you need sensitive information. Cutting unnecessary fields is one of the most reliable conversion improvements available.
Designing for Form Accessibility
Accessible forms have:
- A visible, programmatically associated
<label>for every field - Logical tab order and full keyboard operability
- Clear instructions before the form, not only in placeholders
- Errors identified in text, announced to screen readers and linked to the relevant field
- Groups of related inputs (like radio buttons) wrapped in a fieldset with a legend
- Support for browser autofill through correct
autocompleteattributes
Choosing the Right Input Type for Each Field
HTML input types bring the right mobile keyboard and built-in behaviour: type="email" for email addresses, tel for phone numbers, number or inputmode="numeric" for numeric codes, date where a date picker helps, and url for web addresses. Combined with autocomplete attributes, the right input types can make forms dramatically faster to complete on phones.
Label Placement Best Practices for Form Fields
Labels placed above fields are generally the fastest to scan and work well on mobile. Avoid using placeholder text as the only label — it disappears when the user starts typing, has poor contrast, and leaves people unsure what a field was for. Floating labels can work if implemented accessibly, but simple top-aligned labels are the safest choice.
Inline Validation vs Submit-Time Validation
Inline validation checks fields as users complete them, so errors are caught immediately. It works best when triggered after the user leaves a field, not while they are still typing (nobody wants "invalid email" after typing one character). Submit-time validation checks everything at once and is simpler but can overwhelm users with a list of errors. A common best practice combines both: validate a field when the user leaves it, and summarise any remaining errors at submit.
Writing Helpful Error Messages for Form Validation
Good error messages say what went wrong and how to fix it, in plain language: "Enter a postcode, like SW1A 1AA" rather than "Invalid input". Place them next to the field, use text and an icon (not colour alone), keep the user's input so they do not retype everything, and be flexible about formats (accept phone numbers with or without spaces).
Multi-Step Forms: When They Help Conversion
Splitting long forms into steps can reduce perceived effort and increase completion — especially when the first steps are easy and the form shows progress clearly. Multi-step forms work well for quotes, applications and checkouts with many fields. They hurt when steps are arbitrary, progress is unclear, or users cannot go back without losing data. Keep related questions together and let users review before submitting.
Designing a Simple, High-Converting Contact Form
For most businesses, a contact form needs only name, email and message — perhaps a topic dropdown to route enquiries. Tell people what happens next and when they will hear back, show a clear confirmation after submission, protect against spam with low-friction methods rather than difficult CAPTCHAs, and offer alternatives like phone or email for people who prefer them.
Reducing Form Abandonment Through Progressive Profiling
Progressive profiling collects information over time instead of all at once: ask for the essentials at sign-up, then request additional details at later, natural moments — after a first purchase, in onboarding, or when a feature needs it. Users give more information willingly once they have experienced value, and your initial form converts better.
The Bottom Line
Accessible design and good form design share the same goal: removing barriers between people and what they came to do. Use native HTML, visible focus and real labels, write meaningful alt text and captions, respect contrast and motion preferences, and ask for as little as possible in forms — clearly, forgivingly and in plain language.
Next step: Run a quick technical check of any page with the free SEO Audit tool, then follow up with the keyboard and screen-reader tests above.