Design decision 11 - Resize text testing methodology
Summary
- Author: @namjohn920
- Expert: @duboisp, @bsouster
- Status: Approved
- Last updated: 2020-12-02
- History:
- (2020-12-02) Approved
- (2020-09-11) Added references and minor edits
- (2020-02-14) Review by @bsouster editorial edit and added content reflow
- (2020-02-04) Review by @duboisp and added support rational note
- (2020-01-29) Initial draft
Issue
There is some ambiguity regarding to what method should be used for resizing text in regard of WCAG 2.0/2.1 Success Criteria 1.4.4.
Background
- According to WCAG guideline 1.4.4 - Resize Text, text can be resized up to 200% without losing its content or functionality.
- There is an overlap between 1.4.4 – Resize Text, and 1.4.10 – Reflow which requires support of browser zoom to 400% without loss of content. Satisfying 1.4.10 – Reflow automatically satisfies 1.4.4 – Resize Text.
- There are two methods of resizing text commonly available into web browsers.
- Zoom: resizing every contents of the page.
- Text resize: resizing text only leaving other contents such as image unchanged.
Support rational
As February 2020 and as defined by the design decision #2 - Browser supported here a quick view of zoom feature supported by those browser.
- Internet Explorer 11: Zoom and provide a text resize specifically for those text-size: Smallest, Smaller, Medium, Larger, Largest
- Firefox: Zoom and text resize in percentage available via the top application menu upon selecting the text-only zoom option which by-pass the other zoom
- Edge: Zoom and don’t seem to support text resize
- Chrome: Zoom and text resize available via the “font size” configuration in the Appearance settings with the following value: Very small, Small, Medium (Recommended), Large, Very large
- Safari: Zoom and don’t seem to support text resize
- Chrome (mobile): Zoom and text resize available in the accessibility section in the setting, the text size can be adjusted up to 200%.
Special note regarding WET 4.0.x
- Internet Explorer 11: Text resize doesn’t work since the initial version of WET 4
- Firefox and Chrome: Text resize has caused some issue where some accents and descenders was getting cut when text was oversize to 200%. In particular this was perceptible for value displayed in an HTML select box. Related to wet-boew issue #7884
Recommendation
The best practice is to develop digital content that passes Success Criteria 1.4.4 - Resize text by using both methods of resizing text (400% zoom, 200% text resize).
When only one testing methodology is used, it must be browser window set to 1280px wide and zoom up to 400%, simultaneously passing Success Criteria 1.4.4 – Resize Text (AA) and 1.4.10 – Reflow (AA).