Checking for text resize and zoom functionality of a website is an important part of ensuring a website is accessible. Text resize and zoom functionalities empower users with diverse needs and preferences to customize their browsing experience.
- The importance of text resize and zoom functionality on websites for users with low vision.
- How to check for text resize and zoom functionality using Firefox and Chrome browsers.
- Issues with text overlapping and content being inaccessible when zooming in on a website.
- Websites should be designed to maintain content and functionality when text is resized or zoomed.
- There are two tests for text and zoom resize to ensure accessibility.
Transcript
Welcome back to the Easy A11y Guide channel and the Quick Audit series. I’m Gen Herres, and in this video, I’ll show you how to check for text resize and zoom.
Check for text size
The first thing that we’ll check for is text resize. Text should be able to be resized 200% without loss of content or functionality. We are going to use the Firefox browser and do a text-only zoom. First, we will take a look the website without any zoom used to find out how it actually looks and what functions are available. Frequently, when I do this test, I will have two windows open side by side so I can compare the two versions of the website.
Now, I’m going to use the text-only zoom in Firefox, and I will go to 200%. At this point, I should still be able to use the entire website without any loss of content or functionality. So far, the website looks the same. Next, we’ll hop over to another website and take a look at that. Here, we have a look at the website as it is. For example, this menu drops out and brings three columns of content.
Now, I’m going to do a text-only zoom to 200%. Now, when I drop down this I continue, I only have four pieces of information that I can access. I can no longer access the other information. If I scroll down a bit, I also have some issues where text is overlapping with other text. It’s running outside of its bounding boxes.
Do a zoom resize
Next, we are going to do a zoom resize, and in this time, we will be using the Chrome browser and zooming here to 400%. This essentially gives us a mobile version on the desktop. People with low vision will frequently use this zoom and navigate essentially a mobile version of the website on their desktop computers.
Now, I am zooming in the website to 400%. I have now zoomed in, and I’m now going to scroll down on the website. I am actually scrolling, and you can see some content changing at the very bottom of the screen, but you’ll notice that this static header is stationary and is covering nearly the entire website, rendering the website unusable with zoom.
Now, I’m going to test our second website, and I’m going to zoom this to 400%. Now, I essentially have a mobile version on the desktop. And now the menu is actually usable on the mobile version. And I also don’t have any issues with text overrunning on this mobile version on desktop. Those are the two tests that I do for text and zoom resize. It’s generally a pretty quick process. Just open one window that shows the website as normal and one window showing it zoomed and make sure that content and functionality are the same between those two versions.
Thanks for watching. I’m Gen Herres from the Easy A11y Guide, where we try to make accessibility easier to implement through done-for-you services, tools, and processes. If you enjoyed this video, please give it a thumbs up. It really helps our channel.
You can subscribe to our channel for more accessibility tips and to be notified when new videos are released. For more information on web accessibility, including services, tutorials, and more, please visit easya11yguide.com. Thank you so much again for watching, and I look forward to seeing you in the next video.