Accessibility Glossary

Responsive Design – Accessibility Glossary

What does responsive design mean in the context of accessibility?

Responsive design refers to an approach in web development in which content automatically adapts to different screen sizes and device types. Whether smartphone, tablet or desktop, the website remains usable and clear, regardless of the end device.

Responsive design is particularly important for accessibility. People with visual impairments who need to zoom in or rely on smaller displays benefit from content that is not cut off, distorted or difficult to read.

People with motor impairments who operate mobile devices with touch also need easily accessible buttons and sufficient space between controls.

A responsive design not only improves the user experience for everyone, but is also a technical must for compliance with accessibility standards such as WCAG or BITV.

It stands for a flexible, inclusive web design that excludes no one, regardless of device or individual abilities.

Technically, responsive design relies on flexible grids, scalable images and CSS media queries that adapt the layout to the screen width. Instead of separate mobile and desktop pages there is one page that changes. This simplifies maintenance and keeps content consistent across all devices.

For accessibility this is particularly important because many people enlarge their screen. WCAG requires content to remain usable at 400 percent zoom without horizontal scrolling and not to be restricted when the orientation changes. A clean responsive layout largely meets these requirements by itself.

When implementing, pay attention to sufficiently large touch targets, readable font sizes and menus that can be operated by keyboard and screen reader. Test your pages on real devices and with enlarged text before going live.

A practical tip: begin the design with the smallest screen size and extend it for larger ones. This mobile-first approach forces you to prioritise content and usually leads to clearer, faster and more usable pages for everyone.

In short: Responsive Design: Making Websites Accessible for All.

Checklist illustration for the TYPO3 accessibility guide

A structured approach to TYPO3 accessibility

The guide walks through law, testing, templates, editorial work, forms and maintenance in 8 chapters. With a checklist you can tick off.