WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Making mobile view available to all as way of constraining a11y testing costs

for

From: Patrick H. Lauke
Date: Jan 5, 2018 6:26PM

On 05/01/2018 23:37, Jonathan Avila wrote:
>> [Patrick wrote] Do you have actual examples where this happens?
>
> This Hampton Inn site is not responsive but provides an example of when you zoom in and scrollbars appear text is pushed off to the right. When you scroll over to read the text the white text in the banner links can't be read because it no longer appears on a blue background but on a white background. In this case the container is a fixed width. I haven't diagnosed specifically what is happening but I'd imagine that this could happen to a responsive site that was not truly fluid. A responsive site can simply be a set of breakpoints on fixed width elements.
>
> http://hamptoninn3.hilton.com/

Good lord, I'm glad to say I've not come across such a borked layout in
a while. Digging into it, the site's layout relies on a series of
absolutely positioned a floated (but not cleared) elements, which have
been carefully crafted to give the appearance of a cohesive layout. But
yes, once you zoom to the point where scrollbars appear, the content
that is causing the scrollbars (as it's wider than the browser window)
is not causing the body to also increase in width (as it's either
absolutely positioned or floated, thus taken out of the regular set of
elements that give containers their width). And as the elements that
have the background colour are set to 100% width of the body, they
simply stop.

So good point, there are still ways (when layouts are built in such a
broken way) where zooming (including full-page zooming) can cause
problems (even though all the measurements themselves scaled at the same
pace / by the same factor, the elements that did have the background
were locked to only be as wide as the body, which in the absence of an
explicit width being set, and in the absence of elements that directly
contribute to its width, will only be as wide as the window/viewport).

And yes, if media query breakpoints are then simply used to switch
between one of these broken layouts to another one, then any in-between
viewport sizes / zoom factors have the potential of being broken. I'd
argue that's not "real" responsive web design (as the idea is that the
site/layout responds to the width of the viewport and adapts its content
to it, not just for a particular set of breakpoints but for - within
reason - any viewport size), but that risks going down the "no true
scotsman" route.

Incidentally, a site doesn't even need to be fully fluid to not break
this way. It just needs to avoid building brittle/broken layouts that
rely on absolute positioned elements, floated elements, and regular
elements that then visually (but not really, since the other elements
are not contributing to the width) act as containers. For instance, the
main http://www.hiltonworldwide.com/ site is not responsive, and not
fluid, but at least when you zoom and scroll, nothing breaks.

> I haven't reviewed the site for accessibility -- but just happened to see this particular issue and the issue seemed relevant to the discussion.

Excellent example / cautionary tale (though perhaps not directly about
RWD per se, but more about "even full-page zoom does not guarantee
things don't break"). Cheers.

P
--
Patrick H. Lauke

www.splintered.co.uk | https://github.com/patrickhlauke
http://flickr.com/photos/redux/ | http://redux.deviantart.com
twitter: @patrick_h_lauke | skype: patrick_h_lauke