I made a demo for WCAG 2.2 Success Criterion 1.4.10 Reflow AA and have embedded it further down the page. Unfortunately it assumes you have the font Impact installed, though in no way does that affect what this post covers.
Conformance
Success Criterion 1.4.10 Reflow AA without the Notes:
Content can be presented without loss of information or functionality, and without requiring scrolling in two dimensions for:
- Vertical scrolling content at a width equivalent to 320 CSS pixels;
- Horizontal scrolling content at a height equivalent to 256 CSS pixels.
Except for parts of the content which require two-dimensional layout for usage or meaning.
This can get challenging when you have content with long, technical words, such as “adversarial” or “conformance.” It can get even more challenging when those words show up in headings. For extra fun, add when the design of those headings are driven by marketers who think their press releases should be visible at least five rows back on the train.
There are a few ways to handle this:
- Use CSS to allow the browser to smartly hyphenate the words;
- Use
­(and a copywriter) with the above approach for more control; - Ignore hyphens and CSS, and instead use
<wbr>to tell the browser where it can break a word; - Make those riskiest containers into scrolling areas at the smallest viewports;
- Experiment with other techniques to break words that work with your content, skills, and workflow.
But maybe you found someone who settled on this approach:
This uses word-break: break-all to break any word at an arbitrary position with no extra effort or consideration on the part of the author. In the example, it satisfies 1.4.10 by preventing the press release headline from creating horizontal scrollbars, but it does so at the expense of legibility and possibly comprehension.
Open the example page and look at the headline through different, narrower viewports. It gets illegible.
Adversarial
If your audience is only LLM crawlers, then this approach may be fine. But for everyone else, this experience is frustrating.
This is something I call adversarial conformance. HAL the UI designer can claim that it followed WCAG even though it’s clear that HAL expended effort on minimally conforming while negative outcomes are seemingly obvious.
This assumes your press release isn’t really a signal to fake-genAI in the form of a call for help through some weird steganographic wrapping.