Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Updated Reflow understanding doc #4055

Draft
wants to merge 120 commits into
base: main
Choose a base branch
from
Draft
Changes from 1 commit
Commits
Show all changes
120 commits
Select commit Hold shift + click to select a range
1cb8c80
Updated Reflow understanding doc
scottaohara Sep 5, 2024
8d0f1f9
Update reflow.html
scottaohara Sep 5, 2024
b1e767f
Update understanding/21/reflow.html
scottaohara Sep 6, 2024
7504dd2
Update understanding/21/reflow.html
scottaohara Sep 6, 2024
005e080
new graphics used in the examples
scottaohara Sep 10, 2024
60c3d71
add img folder to all new img src
scottaohara Sep 13, 2024
8c2236e
note for sticky/fixed content
scottaohara Sep 13, 2024
54adc01
fix missing word in 'what to do'
scottaohara Sep 13, 2024
627dbc5
add clarifying note to 320x256 section
scottaohara Sep 13, 2024
bf3d520
pull in missing content from the external doc
scottaohara Sep 13, 2024
6d1d428
revise initial intent paragraphs
scottaohara Sep 25, 2024
89cecfe
updates to reflow doc
scottaohara Oct 3, 2024
5e1ee84
content updates
scottaohara Oct 3, 2024
cfb36fb
Merge branch 'main' into scottaohara-reflow-understanding-rewrite
scottaohara Oct 4, 2024
a6dd504
Merge branch 'main' into scottaohara-reflow-understanding-rewrite
scottaohara Oct 15, 2024
2453865
updates per external feedback
scottaohara Oct 18, 2024
633eaa2
finish addressing external feedback
scottaohara Oct 18, 2024
473a63b
adjust example image widths
scottaohara Oct 23, 2024
030256f
re-arrange and fix p markup
scottaohara Oct 23, 2024
845c55a
rewording of reorganized content
scottaohara Oct 23, 2024
ca79e05
new example screenshot
scottaohara Oct 23, 2024
6296a9e
simplify wording
scottaohara Oct 23, 2024
9dcfcbd
addressing issue 887
scottaohara Oct 23, 2024
ac903e5
fix incomplete sentence and punctuation fixes
scottaohara Oct 23, 2024
a475898
Create g20x.html
scottaohara Oct 24, 2024
67e1761
Update understanding/21/reflow.html
scottaohara Oct 25, 2024
bc1d2f5
off screen to off-screen
scottaohara Oct 25, 2024
2fdad82
Update understanding/21/reflow.html
fstrr Oct 26, 2024
3670020
Update techniques/general/g20x.html
scottaohara Nov 4, 2024
b89e94f
address some of the feedback
scottaohara Nov 19, 2024
7597c58
updates to first intent paragraph
scottaohara Nov 19, 2024
9fe9bae
add more content to new indentation technique
scottaohara Nov 22, 2024
9db3dba
Update understanding/21/reflow.html
scottaohara Nov 22, 2024
9034790
Update understanding/21/reflow.html
scottaohara Nov 22, 2024
8ffffcf
remove in-page link / text that was broken
scottaohara Nov 22, 2024
acbbb3f
Update understanding/21/reflow.html
scottaohara Nov 22, 2024
389a46e
more wording updates
scottaohara Nov 22, 2024
dd46e18
Update understanding/21/reflow.html
scottaohara Nov 22, 2024
d2f5623
Update understanding/21/reflow.html
scottaohara Nov 22, 2024
ef48bf4
Update reflow.html
scottaohara Nov 22, 2024
295747f
Update understanding/21/reflow.html
scottaohara Nov 22, 2024
9eea703
Update understanding/21/reflow.html
scottaohara Nov 22, 2024
5f390a5
Move image to correct folder
patrickhlauke Nov 29, 2024
5e478ab
Subtly anonymise NPR examples, fix typos
patrickhlauke Nov 29, 2024
bf3507f
Tweak carousel images
patrickhlauke Nov 29, 2024
7db653d
Merge branch 'main' into scottaohara-reflow-understanding-rewrite
patrickhlauke Nov 29, 2024
17da9a4
Revise paragraph on table + paragraph reflow expectations
scottaohara Dec 6, 2024
5287894
Update understanding/21/reflow.html
scottaohara Dec 6, 2024
62dd7eb
Update understanding/21/reflow.html
scottaohara Dec 6, 2024
e720c0a
Update understanding/21/reflow.html
scottaohara Dec 6, 2024
37ff092
Update alt text for code-diff gif
scottaohara Dec 6, 2024
be502a6
Merge branch 'main' into scottaohara-reflow-understanding-rewrite
patrickhlauke Dec 7, 2024
9716370
Update understanding/21/reflow.html
scottaohara Dec 18, 2024
4067f0d
Update understanding/21/reflow.html
scottaohara Dec 18, 2024
bb187a5
Working example of a new horizontally scrollable panel for the update…
giacomo-petri Dec 19, 2024
ccf6efa
Technique of a new horizontally scrollable panel for the updated refl…
giacomo-petri Dec 19, 2024
573a3dc
pull in suggestions
scottaohara Dec 19, 2024
75cd4c4
Merge branch 'main' into scottaohara-reflow-understanding-rewrite
patrickhlauke Dec 31, 2024
7bd05ba
intent revisions
scottaohara Jan 8, 2025
292aad8
Merge branch 'main' into scottaohara-reflow-understanding-rewrite
scottaohara Jan 17, 2025
22cf5e1
a few more intent updates
scottaohara Jan 21, 2025
d6b16ee
revert in brief text
scottaohara Jan 23, 2025
161fd19
new sections added, and further rewording
scottaohara Jan 23, 2025
0a12d36
Merge branch 'main' into scottaohara-reflow-understanding-rewrite
scottaohara Jan 24, 2025
d1e83a1
Add files via upload
scottaohara Jan 24, 2025
1d98aa6
Rename g20x.html to g301.html
scottaohara Jan 24, 2025
b2c67a3
Rename g20x2.html to g302.html
scottaohara Jan 24, 2025
2d7de42
significant restructuring of the understanding doc
scottaohara Jan 25, 2025
41a7bfd
fix typo
scottaohara Jan 31, 2025
c4412a2
cut down initial note
scottaohara Feb 4, 2025
b5250f4
cutting down first note some more
scottaohara Feb 4, 2025
4ffe380
Delete understanding/21/img/reflow-macbook-resolutions.jpg.jpg
scottaohara Feb 4, 2025
94c36c4
simplify figcaption text
scottaohara Feb 4, 2025
b984ba5
revise more content
scottaohara Feb 4, 2025
ac01e6f
Fix image file extension for figure 16
scottaohara Feb 4, 2025
77ff758
relocate content from note 1
scottaohara Feb 4, 2025
b762a5e
code snippet working examples
scottaohara Feb 4, 2025
b67b061
Update index.html
scottaohara Feb 4, 2025
89fc3bf
revise 301 tech
scottaohara Feb 5, 2025
d4eb537
revise g301
scottaohara Feb 5, 2025
9bcd667
add working example for new 301 tech
scottaohara Feb 5, 2025
795fd4c
Update understanding/21/reflow.html
scottaohara Feb 6, 2025
aeded95
Update understanding/21/reflow.html
scottaohara Feb 6, 2025
6aeeb00
Update understanding/21/reflow.html
scottaohara Feb 6, 2025
b065239
revert merged suggestion
scottaohara Feb 6, 2025
b9707ec
Update understanding/21/reflow.html
scottaohara Feb 6, 2025
54a691e
Update understanding/21/reflow.html
scottaohara Feb 6, 2025
1028d0c
Update understanding/21/reflow.html
scottaohara Feb 6, 2025
28b3c4c
Update understanding/21/reflow.html
scottaohara Feb 6, 2025
7714c1d
Update understanding/21/reflow.html
scottaohara Feb 6, 2025
3f1d823
Update understanding/21/reflow.html
scottaohara Feb 6, 2025
0c181ef
Update understanding/21/reflow.html
scottaohara Feb 6, 2025
333b9b5
Update understanding/21/reflow.html
scottaohara Feb 6, 2025
a0c7e38
Update understanding/21/reflow.html
scottaohara Feb 6, 2025
de88e1c
Update understanding/21/reflow.html
scottaohara Feb 6, 2025
d3f4342
Update understanding/21/reflow.html
scottaohara Feb 6, 2025
739f907
Update understanding/21/reflow.html
scottaohara Feb 7, 2025
d83480a
Update understanding/21/reflow.html
scottaohara Feb 7, 2025
e729d5f
Update understanding/21/reflow.html
scottaohara Feb 7, 2025
0d448bd
Update understanding/21/reflow.html
scottaohara Feb 7, 2025
08503e5
Update understanding/21/reflow.html
scottaohara Feb 7, 2025
76bc862
Update understanding/21/reflow.html
scottaohara Feb 7, 2025
24e4e7b
Update understanding/21/reflow.html
scottaohara Feb 7, 2025
92cc454
Update understanding/21/reflow.html
scottaohara Feb 7, 2025
6f68917
Update understanding/21/reflow.html
scottaohara Feb 7, 2025
8d1a094
Update understanding/21/reflow.html
scottaohara Feb 7, 2025
b42e91e
Update understanding/21/reflow.html
scottaohara Feb 7, 2025
c32f5dd
Update understanding/21/reflow.html
scottaohara Feb 7, 2025
9a80c83
revise intro paragraph for 'reflowing websites and apps'
scottaohara Feb 7, 2025
89e32aa
adjust intro to 'content that can benefit from 2-d layout..." section
scottaohara Feb 7, 2025
0e1dca5
remove swimlanes and adjust content accordingly
scottaohara Feb 7, 2025
ce25641
Create .gitignore
scottaohara Feb 7, 2025
21d7ef1
add video files
scottaohara Feb 7, 2025
8c53c64
Rename carousel-pass-fail.mp4 to carousel-fail.mp4
scottaohara Feb 7, 2025
6a1a1a6
Add video elements and update carousel descriptions
scottaohara Feb 7, 2025
6c24b78
Delete understanding/21/video/.gitignore
scottaohara Feb 7, 2025
8e42728
Update image width from 550px to 320px
scottaohara Feb 7, 2025
778f719
Add files via upload
scottaohara Feb 7, 2025
fe61c6d
Update video source paths and content exception text
scottaohara Feb 7, 2025
44bcdd6
make videos smaller to take up less vertical space
scottaohara Feb 7, 2025
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
7 changes: 4 additions & 3 deletions understanding/21/reflow.html
Original file line number Diff line number Diff line change
Expand Up @@ -16,8 +16,8 @@ <h2>In brief</h2>
<dt>What to do</dt><dd>Allow long lines and other related content to reflow within .</dd>
scottaohara marked this conversation as resolved.
Show resolved Hide resolved
<dt>Why it's important</dt><dd>People who need bigger text find it difficult if they need to scroll to two directions to read long lines which do not reflow.</dd>
</dl>

</section>

<section id="intent">
scottaohara marked this conversation as resolved.
Show resolved Hide resolved
<h2>Intent of this Success Criterion</h2>
<p>The intent of the Reflow success criterion is to allow users who need to enlarge (zoom in) content, to read multiline text content without having to scroll in multiple directions. Lines of text that extend beyond the sizing requirements defined by this success criterion will result in the need for such scrolling, the act of which can significantly increases both the physical and cognitive effort required to read. Decreasing the necessary effort can help mitigate the likelihood of a user losing their place when they reach the end of a non-reflowing line, and then need to scroll back to the start of the next line to continue reading.</p>
Expand All @@ -34,7 +34,8 @@ <h2>Intent of this Success Criterion</h2>
<p>An important factor in being able to support Reflow is for the user agent to allow users to adjust the size of content within the window that the content is presented within. For instance, the browser's viewport.</p>
<p>Technologies such as HTML/CSS, PDF and ePub have methods of reflowing content to adjust to the size of the viewport. When appropriately authored, users can use zooming features, provided by the user agent (browser), to enlarge the content within the viewport. Unless otherwise prevented by author styling, the content of the web page will reflow (wrap) to adjust to the size of the viewport - while the actual user agent, and any UI provided directly by the user agent, remain scaled to the zoom level set by the operating system.</p>
scottaohara marked this conversation as resolved.
Show resolved Hide resolved
</div>

</section>

<section>
<h3>Horizontally and vertically scrolling content</h3>
<p>A common way for many article-driven web pages to meet the Reflow success criterion is to ensure that the presentation of a web page can adjust to a single column of content, fitting into a 320 CSS pixel wide viewport and only requiring a user scroll vertically to read the content of the web page.
Expand Down Expand Up @@ -170,7 +171,7 @@ <h3>Overlap with other success criteria</h3>
<p>When reviewing a web page for Reflow, issues related to other WCAG success criteria might be discovered. The following are some examples of potential overlaps wish such criteria.</p>
scottaohara marked this conversation as resolved.
Show resolved Hide resolved

<h4>Resize Text</h4>
<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="https://gist.github.com/scottaohara/resize-text"></a>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 the intent of Reflow will commonly result in the enlargement of text, there 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 bi-directional scrolling.
<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="https://gist.github.com/scottaohara/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 the intent of Reflow will commonly result in the enlargement of text, there 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 bi-directional scrolling.
scottaohara marked this conversation as resolved.
Show resolved Hide resolved
scottaohara marked this conversation as resolved.
Show resolved Hide resolved
</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.
Expand Down