Tech media queries grid reflow

[alastc]

Preview Tech media queries grid reflow from @jake-abma.

There is an associated example page.

[mraccess77]

Thanks for putting this together Alastair. My comments would be that we should clarify that the goal is 320 CSS px for horizontally scrolling content and separately for 256 CSS px vertical scrolling content. As this is currently written it appears that the requiring is both at the same time.

2nd comment: We talk about zooming at 400% but don't provide context for this. We should either say zooming to 400% with a starting viewport width of 1280 or something else to be clear why we mention this zoom %.

[mraccess77]

Also we would want to update the test to sort out the vertical and horizontal scrolling requirements should be tested separately.

[alastc]

Hi Jon,

I've made some updates based on that, you can see them in this diff, and the preview URL should be the same.

[alastc]

@jake-abma are those changes ok with you?

[allanj-uaag]

+1 the cleaned up CSS is much easier to read. The distinction for the horizontal vs vertical scrolling is much clearer.

…

On Tue, Jul 3, 2018 at 8:08 AM Alastair Campbell ***@***.***> wrote: @jake-abma <https://github.com/jake-abma> are those changes ok with you? — You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub <#387 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AG_WL_eIIFq2jrmwDOgP_W41xqsME5c6ks5uC2zhgaJpZM4U7Kl6> .

-- Jim Allan, Accessibility Coordinator Texas School for the Blind and Visually Impaired 1100 W. 45th St., Austin, Texas 78756 voice 512.206.9315 fax: 512.206.9452 http://www.tsbvi.edu/ "We shape our tools and thereafter our tools shape us." McLuhan, 1964

[lauracarlson]

+1 to Using media queries and grid CSS to reflow columns.

[jake-abma]

@alastc I'm horizontal (sick) at the moment, when back to vertical I'll check, hope tomorrow!

@allanj-uaag which CSS change do you mean? As far as I see no CSS changed (or I'm missing it because of my 50% presence...:-)

[alastc]

I wrapped the code in a pre block so the layout works better, when you previewed on rawgit it was all inline.

[lauracarlson]

@alastc wrote:

I wrapped the code in a pre block so the layout works better, when you previewed on rawgit it was all inline.

Only thing is: the pre block in the technique doesn't reflow.

Previously @WayneEDick mentioned the problems with using <pre>.

For that block in the technique can we add:

pre {
    white-space: pre-wrap;
}

[alastc]

Hi Laura,

Any CSS added to the draft technique will be stripped by the publishing process - each page is converted by a build process to create the published page. We can’t fix it at the page level.

It is a good general point, and one that should be applied at a higher-level so it applies to all the code samples. I’ll check in with @michael-n-cooper about that.

Cheers,

-Alastair

[lauracarlson]

Regarding pre not reflowing and adding a rule to the techniques stylesheet to address the problem, @alastc wrote:

It is a good general point, and one that should be applied at a higher-level so it applies to all the code samples. I’ll check in with @michael-n-cooper about that.

Thank you. Do we need to create new issue to track it?

In addition, it might be good to have an "Allowing for preformatted code to reflow" technique. I added it to the WCAG 21-techniques Wiki page and assigned it to me.

[jake-abma]

@mbgower, the last part (4.) of the procedure suggests no scrolling is allowed at all, so we'll need to be clear on the separation. If we are not going to split the two up at least I think we should separate them in another sentence. After some re-reading the previous / first suggestion would be fine after all with the only adjustment to replace "whether" to "that" resulting in:

Same suggestion for #388 Any objections?

Procedure

1. Display content in a user agent capable of 400% zoom with a viewport-width of 1280 CSS pixels.
2. If the text is read horizontally: Zoom in by 400%.
3. Check that all content and functionality is available without horizonal scrolling.
4. If the text is read vertically: Set the viewport height to 256 CSS pixels.
5. Check that all content and functionality is available without vertical scrolling.

NB: If the browser is not capable of zooming to 400%, you can reduce the width of the browser proportionally. For example, at 300% zoom the viewport should be sized to 960px wide.

Expected Results

Check #3 is true.
Check #5 is true.

[alastc]

I made the updates discussed on the call, although we didn't word-smith so it would be worth a review:

• Update the logic of the test procedure.
• Set height to 256px - make it expressed in the same way.

How's this?

1. Display the web page in a user agent capable of 400% zoom and set the viewport dimensions (in CSS pixels) to 1280 wide and 1024 high.
2. Zoom in by 400%.
3. For content read horizontally, check that all content and functionality is available without horizontal scrolling.
4. For content read vertically, check that all content and functionality is available without vertical scrolling.

• Mention CSS techiques related, and link to good tutorials that link to grids - added.
• Removed NB.

[allanj-uaag]

+1

[WayneEDick]

Looks great +

[detlevhfischer]

+1

[alastc]

Thanks Detlev, but this one is on the survey now, we're past initial review :-)

[WayneEDick]

I really like the grid and flex examples. What an excellent job. Wayne

…

On Fri, Aug 31, 2018 at 2:47 AM Alastair Campbell ***@***.***> wrote: Thanks Detlev, but this one is on the survey now, we're past initial review :-) — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#387 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AH0OFy0rAmvZCoicFULDB08etiFrvL5Jks5uWQYqgaJpZM4U7Kl6> .

[jake-abma]

Thx! @WayneEDick, I'm flattered :-)

[michael-n-cooper]

I pushed a commit to switch to default applicability since what was there was generic anyways, and standardize working example link.