Our company is addressing gaps in accessibility on the Native side of our app. We get a general diagnostic indicating lack of zooming on text on the Native app. The ticket looks like this:
1.4.4 Resize text: Except for captions and images of text, text can be resized without assistive technology up to 200 percent without loss of content or functionality. (Level AA)
Zooming and scaling should not be disabled.(meta[name="viewport"]).Fix the following: user-scalable on <meta> tag disables zooming on mobile devices
We use react-native-web which allows for both web and native in one codebase. Looking at the top HTML file, I don’t see anything indicating user-scalable is disabled.
In order to be able to use pinch gesture to zoom in on text, do I need to go through every text component and add a prop to enable this? Don’t want to use a jack hammer for a nail but we might have to if this is what’s required. I would think it would be automatic.
2
Answers
Your ticket seems to come from an automatic test, by axe-core : https://dequeuniversity.com/rules/axe/4.4/meta-viewport
Unlike what your ticket said, it’s not a WCAG 1.4.4 failure but an accessibility best practice for the web.
If you don’t have user-scalable in your HTML file, maybe the automatic test did not run correctly ?
Anyway, to manually check if your mobile app is WCAG 1.4.4 compliant, you have to increase the font size to 200% in the accessibility settings of your phone.
You absolutely do NOT need to go through every text component.
The error is accurate. You have disabled some resizing capabilities in your meta tags.
Just check the head of your document for a meta tag with the attribute name="viewport". You will probably find it has an attribute of content set to either "width=device-width, user-scalable=no" or "width=device-width, user-scalable=0". Reset the content attribute to "width=device-width, initial-scale=1". You should be all set.