Design & UX
Responsive Design and Accessibility: Building for Everyone
Websites are used on every kind of screen and by people with different abilities. These principles make a site work well for all of them.
Responsive design and accessibility are closely related. Both are about making sure a website works for the people using it, whatever their device, abilities or circumstances. Building them in from the start is far easier than adding them later.
What responsive design really means
A responsive website adapts its layout to the screen it is shown on. That is more than shrinking things down: navigation may change form, columns may stack, images may be cropped differently and spacing adjusts so content stays comfortable to read.
- Design for small screens as a first-class experience, not an afterthought.
- Keep text at a readable size without zooming.
- Make sure nothing scrolls sideways unintentionally.
- Test on real phones, not only a resized desktop browser.
Accessibility basics
Accessibility means people with visual, motor, hearing or cognitive impairments can use the website. The Web Content Accessibility Guidelines (WCAG) are the widely used standard, but a handful of habits cover a lot of ground.
Readable text and colour
Text needs enough contrast against its background. WCAG asks for a contrast ratio of at least 4.5:1 for normal body text. Never rely on colour alone to communicate something, such as an error.
Keyboard access
Everything that can be done with a mouse should be possible with a keyboard: menus, sliders, forms and pop-ups. Focus should be clearly visible, and it should move in a logical order.
Meaningful structure
Use real headings in order, descriptive link text and proper labels on form fields. Screen readers rely on this structure to help people navigate.
Images and media
Informative images need alternative text that describes their purpose. Decorative images should be hidden from screen readers so they don’t add noise.
Respect motion preferences
Some people experience discomfort from animation. Operating systems let users ask for reduced motion, and websites should honour that setting by toning animation down or switching it off.