Fluid and Adaptive Design

A huge part of designing for accessibility is letting go of the idea that our applications or websites will always look a certain way. Aesthetics and beautiful design are still very much cohesive with accessibility, but the concept of pixel-perfect design is not. It’s all well and good to have a mockup that we’re using as a reference as we build out our page. However, it’s also important to remember that our users will adjust and adapt that design to make it work for them. That can mean zooming or using screen magnifiers, changing brightness and contrast settings, viewing on all varieties of devices and screens, and more!

WCAG reflow requirements

To meet WCAG 1.4.10 requirements, our content needs to work at a minimum screen size of 320 pixels wide. While that number might seem arbitrary at first glance, it wasn’t chosen out of the blue. 320 pixels is only an approximate small mobile device size, but it’s also equivalent to a starting viewport width of 1280 pixels at 400% zoom. This is a way to help us multitask testing for mobile and testing for high-zoom situations, all in one fell swoop. If it works that small, it’ll work just about everywhere!

Responsive designing

Often, zooming or viewing content on very small screens will wreak havoc on unprepared designs: elements get bumped out of place, overlap each other, or get cut off. We can mitigate this by using responsive coding techniques, but it will, without question, change the look and feel of the page significantly. Designers should collaborate closely with developers during the implementation and testing of this part of the work to ensure that everything on the page is still usable, even when there are size limitations.