Updated Reflow understanding doc

[scottaohara]

This initial commit takes the current draft from the google doc that had been worked on for quite some time now, and makes it into a PR for further editing and review.

Not all feedback from the google doc was directly taken/addressed, but there have been additional changes made that attempted to consider a good portion of the unresolved comments.

Marking this PR as a draft, as there is still work to do (and I also need to upload all the new graphics for the examples - and a few examples still need to be created, which are currently marked as comments in the HTML file).

• identify all the reflow related issues this PR will close or address in some form (see: this comment)
• add all the new graphics to this PR / render properly
• identify additional examples / techniques that could be created as additional future improvements

The latest updates will be visible via this preview link of the understanding doc

Closes #3121)

[netlify]

✅ Deploy Preview for wcag2 ready!

Name	Link
🔨 Latest commit	a9da106
🔍 Latest deploy log	https://app.netlify.com/sites/wcag2/deploys/67afa4d80d74360008a4c484
😎 Deploy Preview	https://deploy-preview-4055--wcag2.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

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

[bruce-usab]

Briefly discussed on backlog call 9/6.

[scottaohara]

making notes of existing issues addressed with this PR (more to come):

• G206 seems to be allowing a failure to exist #656 - a few instances added to indicate that bi-directional exceptions apply to specific content and that content should have bi-directional scrollbars. Not the page. (though also have noted that bi-directional scroll bars at the page level do not necessarily mean that Reflow has been failed)
• 1.4.10 clarification (again) on "without loss of information or functionality" in relation to landscape aspect ratios #2043 and Reflow: Fixed Position Fields wcag3#198 addressed by some updates today
• clarify the 320 and 256 are separate from each other, regarding Reflow and Mobile Testing #3311 and Testing 1.4.10 Reflow: No equivalence of testing at 320px or 1280px with 400% zoom? #648
• Reflow and diverging content behaviour desktop vs. mobile #668 is addressed by the addition of the carousel example
• Semantic conveyed through Indented UI and Reflow 1.4.10 #887 is addressed by inclusion of new examples and supporting technique doc
• 1.4.10 Reflow needs a preamble #3121 - the intent is being significantly updated, as well as a lot of other information added, which should sufficiently address this issue.
• What does "content" mean in SC 1.4.10 Reflow #2073 - this PR helps clarify what 'content' Reflow is meant to be concerned with.

[bruce-usab]

Discussed on backlog call 9/13, thank you @scottaohara! A preview is available but a reminder that the PR is still a work in progress. Most (but not all) content from Google Doc drafting has been pulled in and Scott has placeholders and inline notes-to-self. Looking really good! Outstanding question to @iadawn about replacing 4mb animated gif with an MP4, but where should a multimedia file go? TF would be okay with publishing without (and adding later) as the MVP need not be perfect.

[detlevhfischer]

masonry layout

Hearing the term for the first time. Is this a commonly used and understood thing? Explain?

[fstrr]

Masonry layout has been around for several years, initially using JavaScript to create the layout (for example: Cascading grid layout library). It's slowly being standardized (for example: Masonry layout).

[bruce-usab]

Discussed on backlog call 2/7. @gundulaniemann offered to make one more editorial pass. TF goal is to send to AG by next Friday (2/17).

[gundulaniemann]

I had another look at the preview to see everything in context.
A few remarks and questions from my side:

Is it possible to add an image of an "electronic program guide"? I have no idea how this might look like, even not from the description.

My next finding has three points, ending with a question.

1. In technique G301, in the first working example (nested list), the resulting page is too wide in that still horizontal scrolling is needed to read a line of text (tested in edge emulator with 320 px widdh as well as with 1280x1024 with 400% zoom, in the latter case the horizontal scrollbar is not readily available, but the user needs to scroll vertically to reach it, which is very inconvenient.
   The same effect as described above happens in the second example (indented coding): scroll to find the horizontal scrollbar, line of text still doesn't fit into viewport.
2. In technique G302, in the working example I love the user can proceed via buttons. Nevertheless, wehe emulating in edge the content of one carousel panel cannot be fully seen. a part approximately the double scrollbar width is missing. An horizontal scrollbar to accommodate the padding is not available (and shouldn't be necessary, anyway).
3. at the end of section "Not all user agents will support this SC's normative sizing requirements" it says:
   "While one can regard the inability to resize fixed-dimension browsers to the 320 CSS pixel or 256 CSS pixel sizes used by this criterion a user agent support issue, it is not the intent of this criterion to mandate that devices need to support these specific sizes for presenting content, nor is it to be assumed that if content cannot be presented within such sizes on specific devices that the web page would pass or fail Reflow. If a web page can be viewed on a device where the sizing requirements of this criterion can be accurately tested, then it is on such devices where a web page's ability to meet Reflow is best to be determined."
   Does that mean that my emulator tests are not suitable? Should a test with emulator be done with other dimensions, like 336x272 CSS px (adding the scrollbar widths)?

I see the test rule "Meta viewport allows for zoom" says all examples passing it also pass reflow, yet the original is for resizing text, which does not imply two dimensional scrolling to be avoided.
So how should reflow be tested?

[patrickhlauke]

@patrickhlauke to make a stylised/simplified diagram for what an EPG looks like (a la https://en.wikipedia.org/wiki/File:Mythbuntu_Program_Guide.png)

[scottaohara]

some quick notes to about the responses to gundula's prior comment in this issue, which were made during the task force call today (but posting here so others who may read this issue don't think the comment went unaddressed):

• we are going to link to a wikipedia page that helps describe the electronic program guide, so as to not have to introduce a tangent to explain that term - while keeping the reference to it per the ask that it'd be included from feedback outside of the wg.
• Giacomo is helping to update g301, and already showed me a revised update to the working example which should help clarify this. Additionally - it was explained that the expectation for the horizontal scrollbar of the scrollable area to be within the viewport was a topic that had been discussed previously. That expectation goes beyond what reflow requires - though it can be a good recommendation for better usability. Also of note, one of the reasons this attempt at testing wasn't working out so well, we determined, was there were some issues with the testing due to use of emulation.
• g302 similarly should be working fine, but some emulation testing issues seem to be what prompted this query.
• for point/question 3 - this section being referenced is companion content to wcag2ict's section on reflow - see wcag2ict relfow note 7. The end of the quoted content, stating to test of devices where reflow can be properly evaluated is because if one tests on a device where a 320px wide viewport, for example, cannot be achieved - then that is not a good way to test when you could be reviewing the website within a desktop browser where a user can manipulate the viewport to be 320px. Per the question about emulation, I noted the common issues that people have creating proper emulation tests, and that more accurate results will come from testing with one's browser and adjusting its viewport via zooming, resizing or both.

[giacomo-petri]

Wow, perfect timing! I just committed the update with the second example for comparison. Feel free to tweak the explanation if it's not clear enough!

Thanks @scottaohara for all of this! Truly amazing work!

[giacomo-petri]

This is the link to the preview: https://deploy-preview-4055--wcag2.netlify.app/working-examples/reflow-nested-lists/

[scottaohara]

thank you @giacomo-petri. i played around with some of the wording and expanded the last paragraph that introduces the examples a bit. really appreciate you getting this done so quickly.