Updated Reflow understanding doc #4055
Conversation
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)
✅ Deploy Preview for wcag2 ready!
To edit notification comments on pull requests, go to your Netlify site configuration. |
fix some missing/stray markup end tags
Co-authored-by: Dan Bjorge <[email protected]>
|
Briefly discussed on backlog call 9/6. |
attempt at further addressing issues: 2043 and 366
trying this text out to see what people think. again i'm wary about saying viewport here since that's not always what is needed.
attempting to briefly address issue 3311 and 648
|
making notes of existing issues addressed with this PR (more to come):
|
add in the carousel/swimlane examples that were noticed as missing during today's call. fix the broken animated gif and put it into a disclosure widget so that someone who doesn't want to see the animation can open/close it.
|
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. |
thanks @mfairchild365 for suggestions in simplifying my wordy intro paragraphs.
- wording updates per feedback i received off-github - added content to replace the "todo" placeholder content for section that introduces the carousel example
- spelling mistakes corrected - wording modifications to in brief section - expand tabular data section to call out grid-based UI, incorporating from off-github suggestion to reference "electronic program guides"
part 1 of at least 2. various wording adjustments for things that people commented could have been clearer. comment in the html to add a failing example (line 96)
the images were rather large - so made them a bit smaller to hopefully make the doc feel less 'broken up' by them
move the scoping of exceptions section into the exceptions section (preceded it, and that was weird) also fixes a paragraph with a missing start tag
|
This is the link to the preview: https://deploy-preview-4055--wcag2.netlify.app/working-examples/reflow-nested-lists/ |
|
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. |
@scottaohara I should have the illustration pair for the first one in the next hour, but am adding these for you to have a look at.
added in draft figcaption for final interfaces with persistent toolbars example
|
thank you for adding the examples @mbgower |
NP. Let me know when you think it's ready to send out for WG review. |
|
@mbgower sorry, didnt' see your message till now. but i think we can send it out. |
| padding: 0 20px; | ||
| } |
There was a problem hiding this comment.
Make the scrolling nicer by "snapping" the cards (part 1 of 2):
| padding: 0 20px; | |
| } | |
| padding: 0 20px; | |
| scroll-snap-type: x mandatory; | |
| } |
| padding:20px; | ||
| } |
There was a problem hiding this comment.
Make the scrolling nicer by "snapping" the cards (part 2 of 2):
| padding:20px; | |
| } | |
| padding:20px; | |
| scroll-snap-align: center; | |
| } |
| <p>The focus of the Reflow success criterion is to ensure that users are not prevented from zooming into web pages, and when doing so text within sections of content will wrap so that the text can be read without having to scroll in two directions. <a href="resize-text">Success criterion 1.4.4 Resize Text</a> overlaps with this goal, as it should be possible to increase the size of all text to at least 200% while simultaneously meeting the reflow requirement. For many web pages, the text of the page is expected to continue to enlarge as the browser magnification increases, so that users can magnify text up to (and beyond) 400%. In an implementation where text does not consistently increase its size as people zoom in (such as when it is transformed based on a media query to adapt to small-screen usage), it must still be possible to get to 200% enlargement to satisfy the Resize Text criterion. It is important to note that while the intent of Reflow will commonly result in the enlargement of text, Reflow does not specifically require any text size enlargement be reached. There may even be instances where one needs to prevent some text from becoming too large, and thus requiring unwanted two-dimensional scrolling.</p> | ||
|
|
||
| <p>For example, if at the default browser setting of 100% zoom, text is set at 20px when the window is 1280 CSS pixels wide, at 200% zoom it will visually appear at twice the size. After zooming by 400% the page reflows to fit within the 320 CSS pixel viewport, the author may decide to set the page's text size to 10px. The text is now half the original size in CSS pixels, but as it has been enlarged to 400%, so it is still displayed at twice the size compared to the default browser setting of 100% zoom. It is not required to achieve 200% text enlargement while remaining inside a specific breakpoint (as zooming may result in the variation for a new breakpoint becoming active), but it should still be possible to get 200% text enlargement in some way compared to the default 100% zoom.</p> | ||
|
|
There was a problem hiding this comment.
| <p>On small-screened devices (e.g., a device with a 320 CSS pixel display), it is acceptable for a Reflow-conformant page to introduce two-dimensional scrolling when zoomed to 200%, in support of Resize Text.</p> |
The “Overlap with other success criteria” section says “it should be possible to increase the size of all text to at least 200% while simultaneously meeting the reflow requirement.”
Although this is certainly true for tablet/desktop-ish displays, 2-dimensional scrolling may still necessarily occur at 200% zoom on narrower displays. And this is fine, right?
For example, if I view the G302 card carousel demo at 320px and zoom to 200%, I do need to scroll in 2 dimensions to understand a single card in its entirety. And yet Resize Text and Reflow are both still independently satisfied, right?
If so, how about an explicit note like the suggestion above?
There was a problem hiding this comment.
As Reflow is motivated by zooming 400%, where the understanding text states if the text increases to 200% while zooming, I am afraid this remark might be confusing. Does it talk about increasing the text size starting from normal text size on a 320px wide device? I feel that falls under txt resizing. The text resizing SC does not talk about device size, which implies, the support needs to be granted on the device(s) supported.
The text resizing SC allow tow-dimensional zooming anyway.
I see your motivation. Can we word the snetence differently?
Like "Supporting Text resizing on a 320 CSS px wide device goes beyond the Reflow requirement. As a consequence, introducing two-dimensional scrolling while resizing text to 200% on a 320 CSS px wide device does not collide with Reflow-conformance."
There was a problem hiding this comment.
I like Gundula's suggestion, with the exception of the term "collide", which sounds a little odd in this context.
I think "combine" would work? Or perhaps "conflict"?
There was a problem hiding this comment.
i took the gist of gundula's suggestion, and generalized it a bit - so it's not just about having a specific 320px viewport and then zooming in - but any default smaller viewport that when zoomed in, becomes smaller than specific sizing requirements of reflow.
it's far more likely that people's smaller devices will not neatly match 320px, after all.
Co-authored-by: Adam Page <[email protected]>
Co-authored-by: Adam Page <[email protected]>
Co-authored-by: Adam Page <[email protected]>
|
In order to conform to WCAG SC 1.2.5 shouldn't the 4 videos in the Understanding Reflow doc have audio descriptions in addition to their already-present textual equivalents? |
|
@kfranqueiro can the CSS for |
@jorycunningham audio desriptions are required for videos with synchronized media. None of the videos use audio; they are video-only, and so instead need to meet Audio-only and Video-only (Prerecorded). All videos contain figure captions which provide an explanation of what they are demonstrating; as well, surrounding text provides further explanation, and in some cases, further material has been added via the title attribute. Please identify which videos you feel do not provide a sufficient alternative and we will address. |
|
@mbgower apologies I misread the success criteria. You can ignore my comment then. |
adds a note to explicitly call out that it is not a failure of reflow if someone zooms in a website and that results in a viewport smaller than reflow's sizing requirements - and thus 2 dimensional scrolling is needed.
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).
The latest updates will be visible via this preview link of the understanding doc
Closes #3121