Responsive and Accessible Design

Introduction

People use phones, tablets, laptops and big monitors. They use touch, mouse, keyboard and voice. Some are blind, deaf, have limited movement, have dyslexia, or are simply in bright sunlight or a noisy train. A good design works for all of them. This is not an extra, it is core quality, and in many places it is a legal requirement.

Responsive design

Responsive design makes a layout adapt to the screen.

• Mobile first: design for the small screen, then add for larger ones. It forces you to focus on what matters.
• Flexible layouts: use relative sizes and flexible grids, not fixed pixel widths.
• Breakpoints: points where the layout changes, such as one column on a phone and two or three on a wide screen. Choose them by where the content breaks, not by specific devices.
• Flexible images and media that scale.
• Readable text at every size, without pinch-zooming.
• Touch targets large enough, with space between them.
• Test on real devices, and with browser tools that resize the screen.
• Do not hide important content on small screens. Reorganise it.

Accessibility and WCAG

The Web Content Accessibility Guidelines (WCAG) are international guidelines. They are organised under four principles, remembered as POUR:

1. Perceivable: people can perceive the content. Examples: text alternatives for images, captions for video, sufficient colour contrast, content that does not rely on colour alone.
2. Operable: people can use the controls. Examples: everything works with a keyboard, enough time, no content that flashes dangerously, clear focus, easy navigation.
3. Understandable: content and operation are clear. Examples: plain language, predictable behaviour, helpful errors.
4. Robust: content works with different browsers and assistive technologies, such as screen readers, through correct, standard code.

There are conformance levels, A, AA and AAA. AA is a common target.

Practical checks you can do today

• Contrast: 4.5 to 1 for normal text, 3 to 1 for large text and interface components. #767676 on white passes at 4.54 to 1, while #777777 fails at 4.48 to 1.
• Keyboard: put the mouse aside and use Tab, Shift Tab, Enter, Space and arrow keys. Can you reach and use everything? Is the focus indicator always visible? Is the order logical?
• Zoom: at 200 percent zoom, is everything still readable without horizontal scrolling?
• Headings: a clear hierarchy, so screen reader users can jump around.
• Alt text: meaningful images are described, decorative ones marked as such.
• Links and buttons: descriptive text, not "click here". Real link and button elements.
• Forms: every field has a label linked to it, and errors are announced.
• Video and audio: captions and transcripts.
• Motion: respect the setting that reduces animation, and avoid auto-playing content.
• Language: set the page language, so screen readers pronounce correctly.
• Text spacing and resizing: allow users to change text size.

Testing

• Automated tools (browser extensions and checkers) catch around a third or fewer of issues, but are a quick start.
• Manual testing with keyboard and a screen reader, such as the free NVDA on Windows, VoiceOver on Apple devices or the built-in tools on phones.
• Testing with disabled users gives the most valuable insight. Involve them in research, with fair payment and respect.

Design inclusively

Designing for permanent, temporary and situational limitations helps everyone: one arm (permanent), a broken arm (temporary) and holding a baby (situational) all affect how a person uses a phone. Features such as captions, clear contrast and large targets benefit all.

Make it part of the process

• Include accessibility from the start, because retrofitting costs more.
• Add checks to design reviews and definition of done.
• Write an accessibility statement and a way for users to report problems.
• Train the team, and keep learning as standards evolve.

Try it yourself

Take one page of a site. Test it with keyboard only, at 200 percent zoom and with a contrast checker on three colour pairs. List five issues, rank them by impact and suggest fixes.

Summary

• Responsive design adapts layouts to any screen, starting mobile first, with flexible grids and large touch targets.
• WCAG's POUR principles are perceivable, operable, understandable and robust, and AA is a common target.
• Test with keyboard, zoom, contrast checks, screen readers and real disabled users, and build accessibility in from the start.