An accessible website is one that people can use regardless of disability, device or situation. That includes visitors who use screen readers, people who navigate with a keyboard instead of a mouse, users with low vision or colour vision deficiency, and anyone reading on a small phone in bright sunlight. Accessibility is often treated as a technical checklist for developers, but many of the most important decisions are made much earlier, at the design stage.
Here are the basics every designer should know, and how to build them into your process from the start.
Why accessibility belongs in design
When accessibility is left until the end of a project, fixes tend to be awkward and expensive. Changing a colour scheme or rethinking a navigation pattern after development is much harder than getting it right in the wireframes. Designing accessibly from the beginning also tends to improve the experience for everyone. Clear headings, readable text and obvious buttons help all users, not only those with a disability.
There is a legal side too. Many countries have accessibility requirements for public sector websites, and in some places they extend to private businesses. The Web Content Accessibility Guidelines (WCAG), published by the W3C, are the most widely used reference for what an accessible website looks like.
Contrast and readable text
Text must stand out clearly from its background. WCAG level AA asks for a contrast ratio of at least 4.5:1 for normal body text and 3:1 for large text. Light grey text on a white background is one of the most common failures, even on otherwise polished sites.
Readability is about more than contrast. Use a comfortable font size, generous line spacing and line lengths that are not too long. Avoid long passages in all capitals or in thin, decorative typefaces. Make sure text can be enlarged without the layout breaking.
Do not rely on colour alone
Colour is a helpful signal, but it should never be the only one. A form that marks errors only by turning a field red will confuse users who cannot distinguish that colour. Add a clear message and, where it helps, an icon. The same applies to charts, links within body text and status labels. Links in a paragraph, for example, are easier to spot when they are underlined as well as coloured.
Keyboard and focus states
Many people navigate websites with a keyboard or with assistive technology that behaves like one. Every interactive element, from menu items to buttons and form fields, must be reachable and usable without a mouse. As a designer, you can help by planning a logical order for the page and by designing visible focus states. A focus outline that is removed for visual reasons leaves keyboard users unable to see where they are.
Structure, alt text and clear language
Screen readers rely on the structure of a page. Design with a clear heading hierarchy, use real lists for list content, and label form fields with visible labels rather than placeholder text that disappears when someone starts typing.
Images that carry meaning need a short text alternative that describes their purpose. Purely decorative images can be marked so assistive technology skips them. Finally, write plainly. Short sentences, familiar words and descriptive link text such as "View our services" are easier for everyone than vague phrases like "click here".
Making accessibility part of the process
Accessibility is easiest when it becomes a habit rather than a final check. Add contrast checks to your design reviews, include focus and error states in your component library, and test pages with a keyboard before launch. Good accessibility and good UX design share the same goal: making it easy for people to do what they came to do. If you are new to the field, our article on what UX design is is a useful place to start.