The need for Browser Zoom Media Queries for accessibility

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.

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.

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.

One clap, two clap, three clap, forty?

By clapping more or less, you can signal to us which stories really stand out.