RE: Resizing examples

Alistair, see my comments below:


Ø  That passes 1.4.4 with zooming, but it is rubbish from a low-vision point of view compared to the vast majority of RWD sites.
[JDA] I ‘m not comparing how useful it is but looking at content or functionality that is overlapped or cut off.


Ø  http://www.slidesnack.com/templates-examples/online-presentation-examples#1


Ø  The presentations are Flash content, so I assume it is using its own heuristic for re-sizing, rather than the browsers. The content around the flash looks fine! If we are covering flash, then I guess we would have to take a ‘mechanism is available’ approach, but then we run into the “OMG Widgets!” problem.

It’s the content in the middle that this happens too – and it’s not just flash or iframes.  I’ve seen it with pure HTML.  It’s with responsive sites.  One case is Blackboard Ultra if you have access to that.  It’s great in many ways for accessibility.  But I’ve found that actually have to zoom out in order to get the content in the middle to be big enough to see.  Think about how zooming out could actually make content get bigger and then that might help you figure out how this is happening.  I created a test page with content on the top, left, right, and bottom and a square in the middle.  The content on the sides all have min-width and so at some point when you zoom in the content in the middle gets squished.


Ø  http://guidobouman.github.io/jquery-panelsnap/


Ø  Interesting, they use boxes with height: 100% (of the viewport) and overflow-hidden, so expansion gets hidden. The content within each box is then absolutely positioned, so expands out of the box.


Ø  Ok, that’s a good one, that would fail 1.4.4. That’s a page demoing a plugin, have you seen it used on real sites?

[ja] Yes, I have seen this in the wild -- but I can’t find it now.  I’ve even run into the issue where the content isn’t cut off and appears below the fold but when I try to scroll to it I can’t get to it because the scrolling and arrows snap to the next slide.


Ø  https://css-tricks.com/examples/ScrollingSidebar/


Ø  That’s a simple test case, not intended to be like a real site, it has a very basic body {overflow-x:hidden;},

Ø  I’m quite sure Chris Coyer would not do that on a “real” site.
[ja] I’ve seen a number of pages with overflow-x hidden.
[ja] Go to http://wjla.com/ you will see that the navigation bar goes off the right with no scroll bars.  The text below the navigation is responsive – so this isn’t the best example – but it is an example of missing content.
[ja] http://www.kennedy-center.org/calendar/index?gclid=CNfx79ex29ECFVBMDQodh0YIeQ Check out this example – the calendar extends past the right side but there is no scroolbar.

[ja] Use 200% zoom at 1024 for a day and go about your normal business and you will see all sort of these issues.

> Another example is floating fixed potion content.
http://www.w3schools.com/jquerymobile/tryit.asp?filename=tryjqmob_toolbars_fixed



Ø  Apart from the Google drive icon disappearing, I don’t see a problem with that one? The content in the right box is visible at 200%.
[JA] At 200% the content area on the bottom right is so small I only see two lines at a time.

[ja] Check this out https://books.google.com/books?id=LEwGcwiRf9gC&pg=PA162&lpg=PA162&dq=example+where+zoom+in+gets+smaller&source=bl&ots=oQIz7vNoa9&sig=OlBTW3BV4Nq9fgaaa80EmFNPV04&hl=en&sa=X&ved=0ahUKEwjBw6HLrNvRAhVLIcAKHcw8A2UQ6AEIGzAA#v=onepage&q=example%20where%20zoom%20in%20gets%20smaller&f=false

[ja] The book on the bottom right isn’t even usable.


Ø  I don’t see a problem here (Chrome, 1024px wide at 200%). I also looked at the demo, which looked fine:
https://css-tricks.com/examples/PersistantHeaders/ although again it is a demo, and has body{overflow-x:hidden}


Ø  Perhaps you mean something like this from the FT? At 400-500% the header is getting very large (proportionally), but still not problematic at 200%
[ja] I’ll have to find another example that triggers it at 200%


Ø  https://www.ft.com/

[ja]  Yes, some of the header goes away here.  That is a good example.


See my comments below

Jonathan Avila
Chief Accessibility Officer
SSB BART Group
jon.avila@ssbbartgroup.com<mailto:jon.avila@ssbbartgroup.com>
703.637.8957 (Office)

Visit us online: Website<http://www.ssbbartgroup.com/> | Twitter<https://twitter.com/SSBBARTGroup> | Facebook<https://www.facebook.com/ssbbartgroup> | LinkedIn<https://www.linkedin.com/company/355266?trk=tyah> | Blog<http://www.ssbbartgroup.com/blog/>
See you at CSUN in March!<http://info.ssbbartgroup.com/CSUN-2017_Sessions.html>

The information contained in this transmission may be attorney privileged and/or confidential information intended for the use of the individual or entity named above. If the reader of this message is not the intended recipient, you are hereby notified that any use, dissemination, distribution or copying of this communication is strictly prohibited.

From: Alastair Campbell [mailto:acampbell@nomensa.com]
Sent: Tuesday, January 24, 2017 12:20 PM
To: Jonathan Avila; public-low-vision-a11y-tf; GLWAI Guidelines WG org
Subject: Re: Resizing examples

Hi Jonathan,

I’m just changing the subject line as we’re heading off on a tangent that is more to do with Resize content.

I went through the examples below, but first I think the basic point stands, if you have a site that is *not* good for zooming, like this pixel-width test case:
https://alastairc.ac/tests/layouts/pixels.html


That passes 1.4.4 with zooming, but it is rubbish from a low-vision point of view compared to the vast majority of RWD sites.

Anyway, on the examples you sent I resized my browser to 1024px wide, and zoomed in 200%:

http://www.slidesnack.com/templates-examples/online-presentation-examples#1

The presentations are Flash content, so I assume it is using its own heuristic for re-sizing, rather than the browsers. The content around the flash looks fine! If we are covering flash, then I guess we would have to take a ‘mechanism is available’ approach, but then we run into the “OMG Widgets!” problem.

http://guidobouman.github.io/jquery-panelsnap/

Interesting, they use boxes with height: 100% (of the viewport) and overflow-hidden, so expansion gets hidden. The content within each box is then absolutely positioned, so expands out of the box.

Ok, that’s a good one, that would fail 1.4.4. That’s a page demoing a plugin, have you seen it used on real sites?

https://css-tricks.com/examples/ScrollingSidebar/

That’s a simple test case, not intended to be like a real site, it has a very basic body {overflow-x:hidden;},
I’m quite sure Chris Coyer would not do that on a “real” site.


> Another example is floating fixed potion content.
http://www.w3schools.com/jquerymobile/tryit.asp?filename=tryjqmob_toolbars_fixed


Apart from the Google drive icon disappearing, I don’t see a problem with that one? The content in the right box is visible at 200%.

> Header text overlaps content
https://css-tricks.com/persistent-headers/


I don’t see a problem here (Chrome, 1024px wide at 200%). I also looked at the demo, which looked fine:
https://css-tricks.com/examples/PersistantHeaders/ although again it is a demo, and has body{overflow-x:hidden}

Perhaps you mean something like this from the FT? At 400-500% the header is getting very large (proportionally), but still not problematic at 200%
https://www.ft.com/


Cheers,

-Alastair