Thanks to visit codestin.com
Credit goes to github.com

Skip to content

Affordance for oversized text in WCAG Success Criterion 1.4.4: Resize Text #261

@scottkellum

Description

@scottkellum

Regarding https://www.w3.org/WAI/WCAG21/quickref/?showtechniques=144#resize-text

It seems an affordance should be made for when text gets too big for words to reliably be expected to fit within their container. Most websites have a breakpoint or use another technique to scale headline styles down when they become oversized for the area in which they occupy. This is because text overflowing a container can result in far worse legibility issues than text not uniformly increasing in size.

The intent of this seems to be around ensuring body copy and smaller text on the page can reliably and consistently be scaled up so that people can read the content of a website. As headlines are often already big, they should not need to increase in size at the same rate, or be allowed to scale down when they get too big for the space provided.

This is a result of this issue opened on my project in which it was discovered that just about every responsive website’s headlines fail 1.4.4: Resize Text: Typetura/Typetura#44 — It should be noted that I’m not looking for a pass on the demo site I made that the poster is talking about, but there should be some affordance for the general issues raised in all the examples. Large text should be able to scale down to better fit in a layout.

Mitigation of failure states

There is already documentation of failure states for this: https://www.w3.org/TR/WCAG20-TECHS/F69

However this documentation does not take into consideration the box that is too small may be the viewport itself or an area of the page where the text is already significantly larger than other areas. In both these cases it would reduce failure states and increase legibility to create affordances for text in these two instances to be scaled down.

Internationalization

Different languages have different sized words and text breaking patterns. This needs to be taken into consideration when codifying what affordance needs to be made to ensure text doesn’t overflow containers.

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions