Breaking Down Accessibility Barriers: Top 4 Challenges with Screen Magnifiers

Top Accessibility Issues Regarding Screen Magnifiers

A screen magnifier is a type of assistive technology (AT) that enlarges the size of the screen’s content for users with visual impairments.

Screen magnifiers are designed to help visually impaired people utilize the internet and mobile applications. It’s crucial to cater to a wide range of needs when creating content. This includes allowing users to zoom in on web pages if necessary.

Make sure that users who use screen magnification aren’t hindered by the design decisions you make. Errors may be avoided by adhering to the WCAG (Web Content Accessibility Guidelines).
In this blog, we will explore the four most common accessibility barriers faced by screen magnifier users and how to fix them.

Four Common Accessibility Issues for Screen Magnifiers 

1. Improper Content Reflow 

Although reflow isn’t required for screen magnifiers, many low-vision individuals still use browser-based scaling tools. Magnifying content by 400% may require the user to scroll horizontally and vertically if the text does not reflow. You might have encountered this problem if you’ve ever tried to access a non-responsive website from a mobile device; it’s annoying for all users. 

Relevant WCAG Criterion to help you fix it:

Success Criterion 1.4.10 Reflow (Level AA): Content can be presented without loss of information or functionality and without requiring scrolling in two dimensions for:

  • Vertical scrolling content at a width equivalent to 320 CSS pixels;
  • Horizontal scrolling content at a height equivalent to 256 CSS pixels.

Except for parts of the content that require a two-dimensional layout for usage or meaning.

320 CSS pixels is equivalent to a starting viewport width of 1280 CSS pixels wide at 400% zoom. For web content that is designed to scroll horizontally (e.g., with vertical text), 256 CSS pixels is equivalent to a starting viewport height of 1024 CSS pixels at 400% zoom.

Reflow is a dynamic layout that provides a more pleasant reading experience by arranging text into a single column. It takes some work with CSS, but it’s worth it since it’s flexible and robust enough to respond to multiple viewports, which in turn lowers bounce rates and increases mobile traffic.

2. Low Contrast

The color contrast of your website’s font and background determines how easily the text can be read. Even when enlarged, text with a low contrast ratio might be difficult to read. This is particularly true for people with color vision deficiency (CVD). 

Relevant WCAG Criterion to help you fix it

Success Criterion 1.4.3 Contrast (Minimum) (Level AA): The visual presentation of text and images of text has a contrast ratio of at least 4.5:1, except for the following:

Large Text:

Large-scale text and images of large-scale text have a contrast ratio of at least 3:1;

Incidental:

Text or images of text that are part of an inactive user interface component, that are pure decoration, that are not visible to anyone, or that are part of a picture that contains significant other visual content have no contrast requirement.

Logotypes:

Text that is part of a logo or brand name has no contrast requirement.

You can identify low-contrast content using automated tools that evaluate your website against WCAG contrast requirements and then remediate it. 

3. Unavailability of Focus Indicators

Certain screen magnifiers, such as ZoomText by Freedom Scientific, may alter the size of the user’s mouse pointer, resolving some focus indication difficulties; however, you should not require the user to alter their settings to utilize your website.

Relevant WCAG Criterion to help you fix it

Success Criterion 2.4.7 Focus Visible (Level AA): Any keyboard-operable user interface has a mode of operation where the keyboard focus indicator is visible.

To adhere to this standard, you should evaluate your content for visual effects that might hide the focus signal and refrain from using CSS to override users’ focus indicators.

4. Pointer Gestures

Magnifying a small section of the screen might prevent the user from using certain gestures. For instance: If, on a website, you have to move one symbol to another, not everyone will be able to do it.

But it doesn’t mean you should discard gesture controls for the sake of accessibility just because they allow users to point and click. However, you should give them a choice of what to do.

Relevant WCAG Criterion to help you fix it

Success Criterion 2.5.1 Pointer Gestures (Level A): All functionality that uses multipoint or path-based gestures for operation can be operated with a single pointer without a path-based gesture unless a multipoint or path-based gesture is essential. 

This requirement applies to web content that interprets pointer actions (i.e. this does not apply to actions that are required to operate the user agent or assistive technology).

Wrapping Up 

If you want your content to be truly accessible, you should design your website such that it works with as many assistive devices as possible, such as screen readers, screen magnifiers, eye-tracking systems, etc. Adhering to WCAG standards can help you avoid accessibility issues and attract more users.

At AEL Data, we have a team of specialists who carefully audit each web page to identify accessibility issues and remediate them. We also offer post-project transition support plans to ease your team into tackling issues when you go live.

Click here to schedule your free call today.

Picture of Aditya Bikkani

Aditya Bikkani

Aditya is the COO of AELData, a growing technology company in the Digital Publishing and Education sectors. He is also an entrepreneur and founder of an accessibility tool called LERA. A W3C COGA (Cognitive and Learning Disabilities Accessibility) Community Member Aditya contributes to researching methodologies to improve web accessibility and usability for people with cognitive and learning disabilities.

Leave a Reply

Your email address will not be published. Required fields are marked *

Share on Social Media

Facebook
Twitter
LinkedIn
Email
Pinterest
Reddit
WhatsApp

Related Blogs

What is AEL Accessibility Checker (AAC)

What is AEL Accessibility Checker (AAC)?

Wondering how Accessible your website is to everyone? With AEL Accessibility Checker (AAC), you can quickly evaluate your web page against automated Accessibility violations.  AAC

How Accessible Is Your Website?

Check your site’s accessibility in few seconds with our FREE accessibility checker. Ensure compliance with ADA & WCAG guidelines and improve user experience across the board.

Skip to content