Hidden Accessibility Gems

Accessibility Settings

Today's desktop computers and mobile devices have built-in accessibility settings to allow users to adjust their experience according to their needs. These settings vary between operating systems (OS). When an update to the OS is applied, it can also contain updates to the accessibility features or add new features. These may be given a passing mention in the OS update release notes or are not mentioned at all! Therefore, it is a good idea to occasionally review the accessibility settings and discover what new accessibility gems are found.

Looking beyond the accessibility settings of the OS is a good idea because there are features that often exist outside of the accessibility settings. We refer to these as "hidden accessibility gems".

An example of this is the ability to increase the font size of web pages. Most touchscreen and touchpad users are familiar with the pinch-to-zoom gesture to increase the size of the content. The hidden accessibility gem to which we are referring goes beyond pinch-to-zoom. Before we get to that, let's briefly talk about pinch-to-zoom to make sure we are all on the same page.

Pinch to Zoom

On a desktop computer the user easily makes a web page's content larger by holding down the Control key and pressing the plus (+) key to increase the zoom level. This works in most modern desktop browsers. The user also makes the content smaller by holding down the Control key and pressing the minus (-) key to reduce the zoom level. On a MacOS computer this is done by holding down the Command key and pressing the plus (+) or minus (-) keys.

For devices that have a touchpad or a touchscreen this is accomplished using the pinch-to-zoom multi-touch gesture. There are many multi-touch gestures available. Pinch-to-zoom is just one of them and probably the most well-known and used multi-touch gesture.

Pinch-to-zoom uses two touch points on the screen to zoom in (or make something on the screen larger) by moving those two points away from each other. The user can also zoom out (or make something on the screen smaller) by moving those two points closer together.  As illustrated in the following image, pinch-to-zoom likely gets its name because it is common to use the forefinger and thumb to execute this gesture. The same two fingers that most use to pinch an object or another person. We do not recommend pinching other people unless you are prepared to be pinched back!

Illustration of the forefinger and thumb moving away from each other for the pinch to zoom gesture to increase zoom level.

Since most mobile devices do not have a manual keyboard, pinch-to-zoom is one way content creators claim conformance on their mobile content with the Web Content Accessibility Guidelines (WCAG) Success Criterion 1.4.4 Resize Text (Level AA). This criterion states, "Except for captions and images of text, text can be resized without assistive technology up to 200 percent without loss of content or functionality."

Pinch to Zoom is Not a Fix-all

While pinch-to-zoom works for many, there are situations that relying only on pinch-to-zoom does not fully address a user’s need. Here are a few:

  • Mobility/Dexterity Impairments
  • Situational Impairments
  • Low Vision Impairments

Mobility/Dexterity Impairments

If someone cannot use their fingers to perform the pinch-to-zoom gesture due to a mobility or dexterity impairment, they are not able to benefit from the pinch-to-zoom gesture. Some may reason that a person can use a single finger on both hands to perform this gesture, and that is true. Yet this requires the device be placed on a surface to allow the person to use both hands to execute the pinch-to-zoom action. On a mobile device, this is not always possible and may not be a reasonable accommodation since a "mobile" device is meant to be used anywhere and often requires a hand to hold the device, thus leaving only a single hand for interacting with the device. This situation prevents the user from using pinch-to-zoom when they most need the ability to increase the zoom level of web content.

Situational Impairments

Other instances where pinch-to-zoom is not a viable solution is with situational impairments. For example, someone who has lost the use of one hand due to an injury such as a broken wrist. It is not a permanent impairment but one that prevents the use of both hands. Another example would be a person holding a bag of groceries or holding an infant. In these situations, it is not possible to free both hands when needed to make use of the pinch-to-zoom feature.

Low Vision Users

It may seem that the pinch-to-zoom gesture primarily benefits low-vision users. Even if that were true, does pinch-to-zoom alone address the need for the low-vision user? Not necessarily.

Imagine if you must rely on pinch-to-zoom to view the content for every web page you visit. This requires constant extra effort and requires the user to scroll horizontally to read the content once it has been zoomed. Scrolling horizontally to read content could be considered a failure of WCAG Success Criterion 1.4.10 Reflow (Level AA).

Beyond Pinch to Zoom

Most operating systems provide the ability to adjust the system text size. This doesn’t mean all the applications that run on those platforms will adjust to match the OS text setting, but when they do, it is greatly appreciated!

When it comes to web browsers, the browser itself may apply the system text settings to the browser controls but it doesn’t apply those settings to the web page content. What can a user do if they require larger text and don’t want to always rely on pinch-to-zoom? This is where our hidden accessibility gem comes in!

In the Safari browser on an Apple iPhone there are two ways to adjust the text zoom level of web content:

  1. Adjust text zoom level settings on the fly via the "Page Settings Button" next to the "Address Bar" in the browser.
  2. Set the text zoom level for all websites via the "Safari" settings screen.

Let’s take a closer look at each of these methods.

Adjusting Text Zoom Level for Specific Websites

Next to the address bar in Safari mobile, there is the "Page Settings Button" that opens a menu. At the bottom of the menu the "Page Scale" control is used to decrease or increase the text zoom level for the website.

Screen shot showing the Page Settings Button in Safari with text that reads - select the page settings button next to the address bar to access the page scale control.

Screen shot showing the Page Scale control in the Page Settings menu of Safari with text - decrease font size and increase font size.

Once the desired text zoom level is selected for the website, Safari remembers the setting for that specific website. Whatever zoom level is selected in this manner is considered "sticky" in that is does not change until you change it. Each time you visit that site or load a different page on that site, it will be displayed using the text zoom level that has been set previously.

Adjusting Text Zoom Level for All Websites

To set the default font zoom level for all websites in Safari mobile, you go to the Safari settings, not the iOS Accessibility settings! Ah, a hidden gem.

Go to the system Settings. Then scroll down and find "Safari".

Screen capture of the iOS Settings screen with Safari highlighted with text - Go to the Safari app settings.

Next, scroll down and find "Page Zoom" and select it.

Screen shot of the Safari settings screen highlighting the Page Zoom selection with text - Scroll down to Page Zoom.

This displays a screen with two sections, "Page Zoom On" and "Other Websites".

Screen shot of the Safari Page Zoom settings highlighting both the Page Zoom On and Other Websites sections.

The "Page Zoom On" shows you the text zoom level settings for any websites which were set directly within the Safari browser. Remember, setting the text size for a specific website is "sticky" and this screen is a good way to see which sites you have set a custom setting and the zoom level set. You can also clear these settings or change them from this screen.

Screen shot of the Safari Page Zoom settings showing the Page Zoom On section with text - Website set to 200% text zoom.

Under "Other Websites", set the default text size for all other websites. This way if a user knows they prefer a zoom level of 175% for mobile sites, they set it once and forget it via this section.

Screen capture showing the Safari Page Zoom settings set at 175% for Other Websites with text - all other sites set to 175% zoom.

Once the text zoom level is set for “Other Websites”, this zoom level is applied to each site that is visited in Safari. An example is shown in the following images of the WebAlign site displayed at 100% zoom level and then again after the “Page Zoom” level is set to 175% for “Other Websites”.

Screen capture of the WebAlign mobile layout with 100% zoom level with text - 100% zoom setting.

Screen capture of the WebAlign mobile layout at 175% zoom with text - 175% zoom setting.

Other mobile browsers, such as Microsoft Edge, have some text settings adjustments for content but, as of this posting, none seem to match the text zoom level feature provided in Safari for the iPhone.

Summary

The text zoom level setting in Safari mobile is a great example of an accessibility related feature that is not found within the system’s accessibility settings. It is also not a feature that is prominently mentioned and requires some exploring to discover.

As outlined in this blog post, not all users can easily make use of the pinch-to-zoom gesture. Those that can perform this gesture may not want to be forced to pinch-to-zoom for every webpage they visit. Using the zoom level setting in Safari mobile is a great accommodation and can also be used to verify conformance of mobile content with WCAG Success Criterion 1.4.4 Resize Text (Level AA) and of WCAG Success Criterion 1.4.10 Reflow (Level AA).

This hidden gem is found on Apple iOS 16.2. While we focused on iOS for this hidden gem, chances are there is something similar on your operating system of choice. To know for sure, start exploring!

If you and your team are ready to be proactive about accessible content and want to embed accessibility into your content development lifecycle, please inquire about a baseline web accessibility audit and to find out how WebAlign helps guide your efforts.

Want to See More Content Like This?

Want the latest blog posts, videos, white papers, and announcements? Sign up for our mailing list and stay in the loop!

We're Here to Help When You're Ready

Take a deep breath. Then feel free to reach out to our team when you're ready to discuss your accessibility needs.

0 comments on “Hidden Accessibility Gems

Leave a Reply

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

Click to access the login or register cheese