402 how to test browser zoom jtrapp - #450
Conversation
Create "How to Test" page for Browser Zoom and desktop Magnification for Mac and Windows.
Formatting rev1.
Formatin rev2.
Formatting rev3.
| ✓ Ensure text content remains legible when scaled to 200 percent browser zoom | ||
| Note: This requirement is only for Web page text such as headings, body text, link text, button text labels, form field labels, and text inside form inputs, etc. (and excludes captions and images of text). | ||
|
|
||
| Pass Fail |
There was a problem hiding this comment.
The Pass/Fail section, are we aiming for this to have a similar table structure as other Pass/Fail examples on other How to Test sections? Or is there a easier way to display this information to clearly communicate what is considered passing or failing?
marshcooke
left a comment
marshcooke
left a comment
There was a problem hiding this comment.
A few heading level updates left in two comments and another comment noting that the Pass/Fail display isn't done in the similar table style as other How to Test pages - but that doesn't mean it can't be different, more that we can more clearly inform users what is considered passing or failing.
Otherwise, great work @jtweb23!
Heading hierarchy updates.
|
Thanks @marshcooke for the helpful feedback. I making the heading level updates today, and then will move into integrating screen shot examples. Thanks! |
Fix "content" typo.
Windows and Mac desktop keyboard shortcut table formatting.
jz-tmus
left a comment
jz-tmus
left a comment
There was a problem hiding this comment.
looks great, thanks for updating Jule!
marshcooke
left a comment
marshcooke
left a comment
There was a problem hiding this comment.
Ensure the "3. What to test for" list item is within the same list as the "1. General Requirements" and "2. How to test" and it should be good to go!
Remove extra space on a line.
Move "What to test for" inside <ol> ordered list.
|
|
||
| 3. ## What to test for | ||
|
|
||
| - Ensure text content remains legible when scaled to 200 percent browser zoom |
There was a problem hiding this comment.
This list is not loading as a list in the DOM. It will likely come down to how you're formatting it in the markdown file - as currently it is all in blue text where list that are formatted correctly show the dash as yellow and the text as white (see above under "Reflow at 400 percent browser zoom".
This fix and another spacing issue on line 65 should resolve remaining concerns and be ready to merge on the next commit/review!! Great work, Jules!
marshcooke
left a comment
marshcooke
left a comment
There was a problem hiding this comment.
Fix formatting of list starting on Line 64, remove extra spacing on Line 65, and then we should be good to go! 🥳
Example table with CSS formatting
Pass/Fail table format 1 of 2.
Pass/Fail table format 2 of 2.
marshcooke
left a comment
marshcooke
left a comment
There was a problem hiding this comment.
Looks great to me, I like the placeholders plan!
|
@jtweb23 We will need to include direction on setting the viewport to 1280px for 400% testing on desktop to reach the equivalent of a 320px viewport - which the SC requires [and only that size does the SC require]. https://www.w3.org/WAI/WCAG22/Understanding/reflow.html#techniques We can borrow from the test steps found in WCAG for how to test:
|
Reflow for mobile 320px 400% zoom equivalent.
|
Thank you @joe-watkins, I have added the suggested test steps for 320px width/1280px width at 400% zoom. |
Remove What to Test For "screen shot placeholder" text.
marshcooke
left a comment
marshcooke
left a comment
There was a problem hiding this comment.
This looks fantastic, just needs screenshots added! Awesome table work, Jules!
4 participants
Rough draft of "How to Test" text content for Browser Zoom and Magnification. Please share feedback on the content outline and details. Once on track for the content, I can add in relevant screen shot examples and/or video.