The need for Browser Zoom Media Queries for accessibility

seananteau
Jun 8, 2015 · 2 min read

When Ethan Marcotte released his book “Responsive Web Design” he demonstrated excellent uses for CSS media queries to help modify a page’s layout based on viewport sizes. This effectively allowed the layout of a page to change without having to change stylesheets or redirect to a specific mobile sub-domain. This helped increase accessibility across devices, but not the needs of different users.

There are many users which have bad eyesight and cannot use websites without zooming in the page or forcing the font size to increase. This will often cause a page to break as the browser respects the page layout, an attempt to make a page accessible quickly become less accessible. Take this screenshot of Engadget with text zoomed as an example.

Screenshot of page with text zoom using default layout. www.engadget.com

While the page has a nice clean font and layout, it isn’t helping the user any if they need to increase the font size. What is needed is a new type of media query for browser zooming to help users. The designer’s layout is limiting the page width and that sidebar is really limiting how wide the copy can be. If the designer had access to something like media queries for text zoom they might be able to do something like this;

@media only text-zoom(4){
.content {
width: 100%;
padding: 0 20px;
}
.content p {
font-family: serif;
font-size: 4em;
line-height: 1.1em;
}

Which would lead to something like this;

Text Zoom Media Query layout example. www.engadget.com

Now the layout is using the whole browser window, the font is larger and using a serif font which is much easier for someone with bad eyesight to read. While this may not be as beautiful as the designers might want it to be, its certainly easier for the end user. A media query like this would be helpful to developers looking to make their sites more accessible to users with limited vision.

Written by

Front End Developer

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade