Test the accessibility of your website: enlarge font size
- February 25, 2023
- 3 minutes
This is part 2 of our blog series about testing the accessibility of your website. Also read the other parts:
Color and contrast
Keyboard navigation
Automatic testing
Screen readers
Do you want to get started with the accessibility of your website? Then it helps to test how your website is now. You learn a lot from this, so that you can then take more targeted measures. This is part 2 of our blog series about testing the accessibility of your website. In this section, we will discuss increasing the font size on your website.
Many people with visual challenges cannot read the text on your website in the normal format. Even people with healthy eyes sometimes feel the need to enlarge text. For example, because fonts are too small or eyes are tired. Sometimes people use a magnifying glass, but more often they enlarge the text on the website itself. This can be done in many ways. For example with digital magnifying glasses in the browser or with magnification software. What happens to your website when someone enlarges the font?
The WCAG on enlarging text
Something is said about enlarging text in the WCAG. In success criterion 1.4.4 it says the following:
Except for captions and images of text, text can be resized without assistive technology up to 200 percent without loss of content or functionality.
It is important that no usability issues arise when enlarging the font. Sometimes scaling text will be cut off, overlap with other content, or displayed too much vertically (for example, because only 1 word fits on a line).
According to the WCAG workgroup, users are better off zooming the entire page (not just the text) if they want to enlarge the font by more than 200%. The user may then have to scroll horizontally or vertically. When the font size is enlarged by more than 200%, the aforementioned usability problems arise earlier.
What happens if you enlarge the font size on your website?
What happens to your website if you enlarge the font by 200% or if you zoom in on the page? Is the text still legible? Can you still easily find your way on your site? Is everything still functioning properly? There are a number of software packages available that allow you to enlarge the font. Examples are Magic, ZoomText or Supernova. However, these are quite expensive for these types of tests. A free zoom option is also offered within each operating system:
Enlarge font size and zoom in Windows: If you go to Settings in Windows and then Accessibility, you will find the option to enlarge text. You can also use the magnifying glass.
Enlarge font size and zoom in MAC OS: Apple devices also allow you to enlarge fonts by enabling Apple Zoom accessibility options in the MAC OS and zooming in on a web page.
In any case, check these points
At least check the following during testing the enlargement of your text:
- Is all content still on the page and still in a logical order?
- Does part of the content overlap, is it too close or is it far apart?
- What happens to the page navigation? Are navigation bars and menus still visible?
- What about the overall layout? Is your site responsive or does text start to pile up vertically?
- Do you have to scroll horizontally to read everything? If so, how does that affect the user experience?
- This is an important one: is everything still working? Do links, buttons, forms and menus still work with zoomed in content?
In part 3 of this blog series, we are going to talk about using the keyboard while navigating your website.