Create content-present-reflow-sc9kkf by WilcoFiers · Pull Request #2445 · act-rules/act-rules.github.io

WilcoFiers · 2026-08-31T10:14:08Z

First draft of the content-present-reflow rule: content is not missing at 320 CSS pixels.

Split from #2429 so each reflow rule can be reviewed independently. Original work by @HelenBurge.

Related to #2424.

Need for Call for Review:
This will require a 2 weeks Call for Review

Pull Request Etiquette

When creating PR:

Make sure you're requesting to pull a branch (right side) to the develop branch (left side).
Make sure you do not remove the "How to Review and Approve" section in your pull request description

After creating PR:

Add yourself (and co-authors) as "Assignees" for PR.
Add label to indicate if it's a Rule, Definition or Chore.
Link the PR to any issue it solves. This will be done automatically by referencing the issue at the top of this comment in the indicated place.
Optionally request feedback from anyone in particular by assigning them as "Reviewers".
If your PR is for a new rule with an Accessibility Support note, or for updating the Accessibility Support note of an existing section, make sure to open a corresponding Accessibility Support issue.

When merging a PR:

Close any issue that the PR resolves. This will happen automatically upon merging if the PR was correctly linked to the issue, e.g. by referencing the issue at the top of this comment.

How to Review And Approve

Go to the “Files changed” tab
Here you will have the option to leave comments on different lines.
Once the review is completed, find the “Review changes” button in the top right, select “Approve” (if you are really confident in the rule) or "Request changes" and click “Submit review”.
Make sure to also review the proposed Call for Review period. In case of disagreement, the longer period wins.

Made with Cursor

Split from #2429. Original work by Helen Burge. Co-authored-by: HelenBurge <41951878+HelenBurge@users.noreply.github.com>

netlify · 2026-08-31T10:14:13Z

✅ Deploy Preview for act-rules ready!

Name	Link
🔨 Latest commit	`6597029`
🔍 Latest deploy log	https://app.netlify.com/projects/act-rules/deploys/6aabfb8f64f75e00086266d4
😎 Deploy Preview	https://deploy-preview-2445--act-rules.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.
🤖 Make changes	Run an agent on this branch

To edit notification comments on pull requests, go to your Netlify project configuration.

Applied feedback from https://github.com/act-rules/act-rules.github.io/pull/2429/changes#r3924801295

WilcoFiers

I stopped after the expectation. Plenty to do already. I can't request changes since this is my own PR.

WilcoFiers · 2026-09-17T13:24:03Z

+
+## Applicability
+
+This rule applies to any non-excepted element containing visible content or functional components, requiring text to reflow when the viewport is set to a width of 320 CSS pixels for horizontal languages or a height of 256 CSS pixels for vertical languages; to align applicability more closely with these reflow requirements, it can be refined to target only visible content with a height of at least 320 CSS pixels on pages with vertical scrolling, or a height of at least 256 CSS pixels on pages with horizontal scrolling.


"non-excepted" What does that mean?

did you mean (visible content) or (functional components) or visible (content or functional components)?

"requiring text to reflow" How do I know if the text requires reflow? I would probably pull this and say regardless of if it requires reflow, if content disappears on.a 320x256 viewport that's a failure.

"320 CSS pixels for horizontal languages" WCAG doesn't say this only applies to horizontal writing systems. Why would we limit it that way? Horizontal text can easily end up being clipped vertically when the width of the viewport changes.

"to align applicability more closely with these reflow requirements..." I don't understand what this means or what its doing here.

Does this include decorative content? For images, are you sure ANY truncation should result in a failure?

Is it acceptable to replace larger things with smaller ones? Like a text "home" with a home icon for instance?

You're not accounting for text that was clipped/hidden in the original view. Presumably content that's cut off in any resolution shouldn't fail this requirement.

I think we need to specify the original viewport. If I start at 321x257 and then go to 320x256 that isn't likely to make much of a difference. I don't think people can test this consistently if we don't establish the starting resolution.

I am going to rewrite this in my own words soon... maybe...

Start with 1280 x 1024 resolution going down to 320 to 256

https://www.w3.org/WAI/WCAG22/Techniques/general/G224

Example - non-wrapping code - Wilco wants a pass - if the code must maintain a line then do not wrap it.

Procedure for code snippets
Display the web page in a user agent where the page can be zoomed, or the user agent can be resized.
Zoom in or resize the browser window so that the viewport is equivalent to 320 CSS pixels wide.
The code snippets fits within the width so that it is only necessary so scroll vertically to read each line of code.
Or, for code where non-wrapping lines are not essential, the code wraps or a mechanism is provided to allow line wrapping.
Or, the indentation and linebreaks are meaningful to the code language.

Explain in background that the tester knows the language requirements

Clarify the reflow tests specifically
Text is not cutoff at 320 CSS pixels
Orientation scrolls do not exist at 320 CSS pixels without a content exception
Content is not missing at 320 CSS pixels - this is this one

WilcoFiers · 2026-09-17T13:38:06Z

+Each target element:
+
+Retains all content and functionality when viewed with a height of at least 320 CSS pixels on pages with vertical scrolling, or a height of at least 256 CSS pixels on pages with horizontal scrolling:


This doesn't exactly follow how to write an ACT rule. I'd do something like this:

Suggested change

Each target element:

Retains all content and functionality when viewed with a height of at least 320 CSS pixels on pages with vertical scrolling, or a height of at least 256 CSS pixels on pages with horizontal scrolling:

For each target element, when the viewport is set to 320 by 256 CSS pixels, the content is not cut off, removed, or obscured by another element, except if one of the following is true:

- the hidden content can be scrolled into view, or

- an [instrument][] is available to reveal the content.

I think you're throwing far too much at the wall here hoping to find issues.

First you say things can't be cut off, and then you follow it up by saying it can if you can scroll it into view.

"unavailable as a result of viewport constraints, zoom, or responsive behaviour;" what are these things, and how do I test them? I know at least 3 different zoom methods, which ones do you mean? I think this can be cut.

WilcoFiers · 2026-09-17T13:38:38Z

+Each target element:
+
+Retains all content and functionality when viewed with a height of at least 320 CSS pixels on pages with vertical scrolling, or a height of at least 256 CSS pixels on pages with horizontal scrolling:
+- Does not cut-off, remove, or make content unavailable as a result of viewport constraints, zoom, or responsive behaviour; and


Is truncation allowed at all? Like with the three dots.

Yes - that is ok if the content is still available in a form - like the subsequent page

WilcoFiers · 2026-09-17T14:27:47Z

@@ -0,0 +1,257 @@
+---


This should be a .md file. File extension is missing.

Co-authored-by: Wilco Fiers <WilcoFiers@users.noreply.github.com>

Create content-present-reflow-sc9kkf

49bcb66

Split from #2429. Original work by Helen Burge. Co-authored-by: HelenBurge <41951878+HelenBurge@users.noreply.github.com>

WilcoFiers added the Rule Use this label for a new rule that does not exist already label Aug 31, 2026

WilcoFiers assigned HelenBurge Aug 31, 2026

WilcoFiers mentioned this pull request Aug 31, 2026

Create Reflow Tests #2429

Closed

8 tasks

Update content-present-reflow-sc9kkf

7d42c7a

Applied feedback from https://github.com/act-rules/act-rules.github.io/pull/2429/changes#r3924801295

HelenBurge requested review from G0dwin and giacomo-petri September 3, 2026 13:03

HelenBurge marked this pull request as ready for review September 3, 2026 13:03

WilcoFiers commented Sep 17, 2026

View reviewed changes

Apply suggestion from @WilcoFiers

6597029

Co-authored-by: Wilco Fiers <WilcoFiers@users.noreply.github.com>

Navigation Menu

Create content-present-reflow-sc9kkf - #2445

Create content-present-reflow-sc9kkf#2445
WilcoFiers wants to merge 3 commits into
developfrom
content-present-reflow-sc9kkf

WilcoFiers commented Aug 31, 2026 •

edited by HelenBurge

Loading

Uh oh!

netlify Bot commented Aug 31, 2026 •

edited

Loading

Uh oh!

WilcoFiers left a comment

Uh oh!

WilcoFiers Sep 17, 2026

Uh oh!

HelenBurge Sep 17, 2026

Uh oh!

HelenBurge Sep 17, 2026

Uh oh!

HelenBurge Sep 17, 2026

Uh oh!

HelenBurge Sep 17, 2026 •

edited

Loading

Uh oh!

HelenBurge Sep 17, 2026

Uh oh!

HelenBurge Sep 17, 2026

Uh oh!

Uh oh!

WilcoFiers Sep 17, 2026

Uh oh!

WilcoFiers Sep 17, 2026

Uh oh!

HelenBurge Sep 17, 2026

Uh oh!

WilcoFiers Sep 17, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants


		## Applicability

		This rule applies to any non-excepted element containing visible content or functional components, requiring text to reflow when the viewport is set to a width of 320 CSS pixels for horizontal languages or a height of 256 CSS pixels for vertical languages; to align applicability more closely with these reflow requirements, it can be refined to target only visible content with a height of at least 320 CSS pixels on pages with vertical scrolling, or a height of at least 256 CSS pixels on pages with horizontal scrolling.

		Each target element:

		Retains all content and functionality when viewed with a height of at least 320 CSS pixels on pages with vertical scrolling, or a height of at least 256 CSS pixels on pages with horizontal scrolling:

-Each target element:
-Retains all content and functionality when viewed with a height of at least 320 CSS pixels on pages with vertical scrolling, or a height of at least 256 CSS pixels on pages with horizontal scrolling:
+For each target element, when the viewport is set to 320 by 256 CSS pixels, the content is not cut off, removed, or obscured by another element, except if one of the following is true:
+- the hidden content can be scrolled into view, or
+- an [instrument][] is available to reveal the content.

Conversation

WilcoFiers commented Aug 31, 2026 • edited by HelenBurge Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Pull Request Etiquette

When creating PR:

After creating PR:

When merging a PR:

How to Review And Approve

Uh oh!

netlify Bot commented Aug 31, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

✅ Deploy Preview for act-rules ready!

Uh oh!

WilcoFiers left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

HelenBurge Sep 17, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

WilcoFiers commented Aug 31, 2026 •

edited by HelenBurge

Loading

netlify Bot commented Aug 31, 2026 •

edited

Loading

HelenBurge Sep 17, 2026 •

edited

Loading