Accessibility Page Zoom

People with low vision need to zoom the content in order to use the page

Why

People with low vision need to zoom the content in order to use the page.

What

The big brother of text zoom is page zoom. Zoom everything! The principles are easy to understand:

Available means that nothing is clipped, truncated or obscured.

Page zoom often triggers mobile view on responsive sites, which is good.

How

You will now learn five techniques to support page zoom.

Provide enough space for key content

Do not let secondary content occupy the screen.

Hidden icons

In this example from Samsung India, the page is zoomed 400 %. The content is scaling properly. No horizontal scrollbar. However, the chat button occupies a big part of the browser window. It is not easy to access the buttons for search, cart or menu. And the quality of the button graphic is low. In addition, there is a huge ad for an app.

Improvements:

No clutter

In this example from Philips, the entire viewport is available for main content. The main navigation is opened, and there is no clutter. The text and graphics are scaled well.

The viewport is set:

Learn more about responsive web design.

Avoid horizontal scrolling

Scrolling in two dimensions is confusing.

Fixed width

In this example from Dell, we can only see a small part of the header. The site does not scale when zoomed. The result is a large horizontal scroll that makes it hard to navigate the page in two dimensions.

In addition, the cookie consent button is fixed, not possible to remove even though the consent is given. The logo and the icons are low resolution PNGs that does not scale well. Viewport is not set.

Improvements:

All content and functionality is available

No content should be hidden when zoomed.

Hidden tabs

In this example from Sony, the tabs with product information is not accessible in a desktop browser with page zoom. Even if the user scrolls, the scrolling is happening outside of the browser window. All the specifications, features, reviews and support are inaccessible. The problem is that the entire section is "sticky":

This section is 159 pixels high in a mobile view. When zoomed four times, the fixed section occupies 636 pixels of the desktop view. With a browser height of 720 pixels, minus the top part of the browser, leaves not much room for the main content.

Fixed content is not necessarily inaccessible. The takeaway is that you should always test your site with page zoom in common browser sizes.

In a mobile view, the content beneath the tabs is accessible.

The sticky navigation from Huawei is not too high, so there are enough space for the main content.

Avoid text in images

In this example from Xiaomi, the zoomed text is pixelated because it is part of the image. Parts of the text is also outside the browser window, so that the user has to scroll to read the entire product title. Displaying text with pure HTML and CSS has many benefits, in addition to be accessible: responsive, translatable and searchable.