E-mail List Archives
Thread: Any official clarification on Text-only zoom and RWD?
Number of posts in this thread: 30 (In chronological order)
From: Jordan Wilson
Date: Tue, Feb 23 2016 11:03AM
Subject: Any official clarification on Text-only zoom and RWD?
No previous message | Next message →
Is there an official/legal opinion on whether browser zoom to 200% is sufficient even if text-only zoom to 200% does not work? I recall that w/ so many sites being Responsive the fact that you can zoom text to 200% using media query/layout changes was enough but all of the info I've been able to find appears to be industry opinion. Does anyone know of any official clarification for 1.4.4?
From: Jonathan Avila
Date: Tue, Feb 23 2016 11:23AM
Subject: Re: Any official clarification on Text-only zoom and RWD?
← Previous message | Next message →
> Is there an official/legal opinion on whether browser zoom to 200% is sufficient even if text-only zoom to 200% does not work?
Yes, browser zoom which uniformly resizes text and other contents is sufficient according to the current WCAG sufficient techniques. G142: Using a technology that has commonly-available user agents that support zoom (https://www.w3.org/TR/2015/NOTE-WCAG20-TECHS-20150226/G142)
The LVTF is working to address this concern going forward.
Jonathan
Jonathan Avila
Chief Accessibility Officer
SSB BART Group
= EMAIL ADDRESS REMOVED =
703.637.8957 (o)
Follow us: Facebook | Twitter | LinkedIn | Blog | Newsletter
From: Jared Smith
Date: Tue, Feb 23 2016 12:03PM
Subject: Re: Any official clarification on Text-only zoom and RWD?
← Previous message | Next message →
Jonathan Avila wrote:
> Yes, browser zoom which uniformly resizes text and other contents
> is sufficient according to the current WCAG sufficient techniques.
While this is sufficient for WCAG conformance, it very likely would
not be sufficient to provide an accessible experience for users who
increase just their text size.
We recommend supporting page zoom to 200% (it's nearly impossible to
fail this for HTML content) and 130-150% text sizing.
Jared
From: Snahendu Bhattacharya
Date: Tue, Feb 23 2016 12:10PM
Subject: Re: Any official clarification on Text-only zoom and RWD?
← Previous message | Next message →
Also, browser zoom introduces a good amount of horizontal scrolling, which
itself causes a barrier in accessing the page.
Hence, an 'in-page accessible control', which will allow user to gradually
increase the font size as per users need (at least upto 200%), might be
more user friendly, cross platform and consistent solution.
Other's thoughts please.
On Feb 23, 2016 2:03 PM, "Jared Smith" < = EMAIL ADDRESS REMOVED = > wrote:
> Jonathan Avila wrote:
>
> > Yes, browser zoom which uniformly resizes text and other contents
> > is sufficient according to the current WCAG sufficient techniques.
>
> While this is sufficient for WCAG conformance, it very likely would
> not be sufficient to provide an accessible experience for users who
> increase just their text size.
>
> We recommend supporting page zoom to 200% (it's nearly impossible to
> fail this for HTML content) and 130-150% text sizing.
>
> Jared
> > > > >
From: Jared Smith
Date: Tue, Feb 23 2016 12:25PM
Subject: Re: Any official clarification on Text-only zoom and RWD?
← Previous message | Next message →
Snahendu Bhattacharya wrote:
> Hence, an 'in-page accessible control', which will allow user to gradually
> increase the font size as per users need (at least upto 200%), might be
> more user friendly, cross platform and consistent solution.
Well, perhaps for the small number of users who need bigger text, but
are not already using magnification or increased text sizing. I think
this population is extremely small. But this text sizing control would
introduce overhead and potential confusion for all other users. These
types of in-page controls generally introduce more difficulty than
benefit.
Jared
From: Chaals McCathie Nevile
Date: Tue, Feb 23 2016 12:52PM
Subject: Re: Any official clarification on Text-only zoom and RWD?
← Previous message | Next message →
On Tue, 23 Feb 2016 19:03:51 +0100, Jordan Wilson
< = EMAIL ADDRESS REMOVED = > wrote:
> Is there an official/legal opinion on whether browser zoom to 200% is
> sufficient even if text-only zoom to 200% does not work?
This would depend on the jurisdiction. If you only have to meet some rule,
maybe you're fine. If you have to actually remove barriers for people with
disabilities (as in UK / Australian law, which I know best) then you'd be
running a big risk of being in breahc of legal requirements.
Also, you would be discriminating against the many people who rely on
something better than 200% browser zoom to provide equal access to
content. Which strikes me as wrong in general.
> I recall that w/ so many sites being Responsive the fact that you can
> zoom text to 200% using media query/layout changes was enough but all of
> the info I've been able to find appears to be industry opinion. Does
> anyone know of any official clarification for 1.4.4?
Do you mean from W3C? They have no legal force on their own. If you want a
legal opinion, you have to work out where a case can take place, and get
an opinion based on that legal framework.
cheers
Chaals
--
Charles McCathie Nevile - web standards - CTO Office, Yandex
= EMAIL ADDRESS REMOVED = - - - Find more at http://yandex.com
From: Patrick H. Lauke
Date: Tue, Feb 23 2016 1:04PM
Subject: Re: Any official clarification on Text-only zoom and RWD?
← Previous message | Next message →
On 23/02/2016 19:10, Snahendu Bhattacharya wrote:
> Also, browser zoom introduces a good amount of horizontal scrolling, which
> itself causes a barrier in accessing the page.
Not if the responsive approach was done properly, as it would then
simply trigger different media query breakpoints, and the fluid approach
(which is part of RWD's core tents) should also avoid horizontal scrolling.
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
From: Jonathan Avila
Date: Tue, Feb 23 2016 1:17PM
Subject: Re: Any official clarification on Text-only zoom and RWD?
← Previous message | Next message →
> While this is sufficient for WCAG conformance, it very likely would not be sufficient to provide an accessible experience for users who increase just their text size.
I totally agree and the user need is to have increased text size without horizontal scrolling -- but as it currently stands G142 allows user agent zoom to meet the SC criteria. I'm hopeful that future WCAG extensions or versions will tighten this up to assist people with low vision and other disabilities.
Jonathan Avila
From: Snahendu Bhattacharya
Date: Tue, Feb 23 2016 1:22PM
Subject: Re: Any official clarification on Text-only zoom and RWD?
← Previous message | Next message →
Agreed Patrick!
I was mentioning about non-responsive web pages, where relative
measurements of font and container sizes are not maintained, would have the
risk of horizontal scrolling. Also, if user is using the 'browser zoom
only', some user agents will introduce horizontal scroll.
So according to me, 'zoom text' have 3 aspects.
1. User should be able to zoom the 'text only' besides browser zoom.
2. While zoomed, content should be visible, readable and understandable.
3. User should have a definite way to zoom the text by user agents.
Question is, in other words, are we encouraging responsive implementation?
As WCAG doesn't talk about that clearly but indicates to the same.
On Feb 23, 2016 3:04 PM, "Patrick H. Lauke" < = EMAIL ADDRESS REMOVED = > wrote:
> On 23/02/2016 19:10, Snahendu Bhattacharya wrote:
>
>> Also, browser zoom introduces a good amount of horizontal scrolling, which
>> itself causes a barrier in accessing the page.
>>
>
> Not if the responsive approach was done properly, as it would then simply
> trigger different media query breakpoints, and the fluid approach (which is
> part of RWD's core tents) should also avoid horizontal scrolling.
>
> 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
> > > > >
From: Snahendu Bhattacharya
Date: Tue, Feb 23 2016 1:42PM
Subject: Re: Any official clarification on Text-only zoom and RWD?
← Previous message | Next message →
Also, Technique G178, "providing controls on the web page that allow users
to incrementally change the size of all text on the page upto 200%"
Don't want to hijack the discussion, but would like to mention technique
G174 also talks about one such 'in-page' control related to controlling the
contrast of the page.
Question is, are these mandatory to implement these controls or how to
decide whether to have it or not.
Though I understand and agree with Jared's point on overhead and
maintainability.
On Feb 23, 2016 3:22 PM, "Snahendu Bhattacharya" < = EMAIL ADDRESS REMOVED = > wrote:
> Agreed Patrick!
>
> I was mentioning about non-responsive web pages, where relative
> measurements of font and container sizes are not maintained, would have the
> risk of horizontal scrolling. Also, if user is using the 'browser zoom
> only', some user agents will introduce horizontal scroll.
>
> So according to me, 'zoom text' have 3 aspects.
>
> 1. User should be able to zoom the 'text only' besides browser zoom.
> 2. While zoomed, content should be visible, readable and understandable.
> 3. User should have a definite way to zoom the text by user agents.
>
> Question is, in other words, are we encouraging responsive implementation?
> As WCAG doesn't talk about that clearly but indicates to the same.
> On Feb 23, 2016 3:04 PM, "Patrick H. Lauke" < = EMAIL ADDRESS REMOVED = >
> wrote:
>
>> On 23/02/2016 19:10, Snahendu Bhattacharya wrote:
>>
>>> Also, browser zoom introduces a good amount of horizontal scrolling,
>>> which
>>> itself causes a barrier in accessing the page.
>>>
>>
>> Not if the responsive approach was done properly, as it would then simply
>> trigger different media query breakpoints, and the fluid approach (which is
>> part of RWD's core tents) should also avoid horizontal scrolling.
>>
>> 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
>> >> >> >> >>
>
From: Jonathan Avila
Date: Tue, Feb 23 2016 1:49PM
Subject: Re: Any official clarification on Text-only zoom and RWD?
← Previous message | Next message →
Responsive design generally has the effect of allowing for 200 percent zoom or more on text -- however I'm not sure that is a given. On the desktop at least zooming in the browser changes the width of the window and increases the scale. In theory a developer could use fixed font sizes at different break points or do something that caused the text to change but not actually reach 200% at 200 percent zoom. Although web browser scaling above 200 might be reached 200% through scroll bars.
As an aside on a mobile browser where you can pinch zoom (when not blocked by the site or forced by the browser ) the ability to resize text alone is restricted to certain browsers or sites that use the system fonts that support the text size settings on the platform. So g142 allows mobile sites to meet the success criteria on small screens where text resize alone migh be more difficult.
I totally support text resize without zoom and believe it is a user requirement and need.
Jon
Sent from my iPhone
> On Feb 23, 2016, at 3:22 PM, Snahendu Bhattacharya < = EMAIL ADDRESS REMOVED = > wrote:
>
> Agreed Patrick!
>
> I was mentioning about non-responsive web pages, where relative
> measurements of font and container sizes are not maintained, would have the
> risk of horizontal scrolling. Also, if user is using the 'browser zoom
> only', some user agents will introduce horizontal scroll.
>
> So according to me, 'zoom text' have 3 aspects.
>
> 1. User should be able to zoom the 'text only' besides browser zoom.
> 2. While zoomed, content should be visible, readable and understandable.
> 3. User should have a definite way to zoom the text by user agents.
>
> Question is, in other words, are we encouraging responsive implementation?
> As WCAG doesn't talk about that clearly but indicates to the same.
>> On Feb 23, 2016 3:04 PM, "Patrick H. Lauke" < = EMAIL ADDRESS REMOVED = > wrote:
>>
>>> On 23/02/2016 19:10, Snahendu Bhattacharya wrote:
>>>
>>> Also, browser zoom introduces a good amount of horizontal scrolling, which
>>> itself causes a barrier in accessing the page.
>>
>> Not if the responsive approach was done properly, as it would then simply
>> trigger different media query breakpoints, and the fluid approach (which is
>> part of RWD's core tents) should also avoid horizontal scrolling.
>>
>> 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
>> >> >> >> > > > >
From: Jordan Wilson
Date: Tue, Feb 23 2016 1:52PM
Subject: Re: Any official clarification on Text-only zoom and RWD?
← Previous message | Next message →
Thanks for the responses everyone its helpful. I was definitely asking for responsive sites.
If anyone has any techniques or examples of responsive sites that ALSO support text-only zoom without breaking I'd appreciate it.
On 2/23/16, 3:42 PM, "WebAIM-Forum on behalf of Snahendu Bhattacharya" < = EMAIL ADDRESS REMOVED = on behalf of = EMAIL ADDRESS REMOVED = > wrote:
>Also, Technique G178, "providing controls on the web page that allow users
>to incrementally change the size of all text on the page upto 200%"
>
>Don't want to hijack the discussion, but would like to mention technique
>G174 also talks about one such 'in-page' control related to controlling the
>contrast of the page.
>
>Question is, are these mandatory to implement these controls or how to
>decide whether to have it or not.
>
>Though I understand and agree with Jared's point on overhead and
>maintainability.
>On Feb 23, 2016 3:22 PM, "Snahendu Bhattacharya" < = EMAIL ADDRESS REMOVED = > wrote:
>
>> Agreed Patrick!
>>
>> I was mentioning about non-responsive web pages, where relative
>> measurements of font and container sizes are not maintained, would have the
>> risk of horizontal scrolling. Also, if user is using the 'browser zoom
>> only', some user agents will introduce horizontal scroll.
>>
>> So according to me, 'zoom text' have 3 aspects.
>>
>> 1. User should be able to zoom the 'text only' besides browser zoom.
>> 2. While zoomed, content should be visible, readable and understandable.
>> 3. User should have a definite way to zoom the text by user agents.
>>
>> Question is, in other words, are we encouraging responsive implementation?
>> As WCAG doesn't talk about that clearly but indicates to the same.
>> On Feb 23, 2016 3:04 PM, "Patrick H. Lauke" < = EMAIL ADDRESS REMOVED = >
>> wrote:
>>
>>> On 23/02/2016 19:10, Snahendu Bhattacharya wrote:
>>>
>>>> Also, browser zoom introduces a good amount of horizontal scrolling,
>>>> which
>>>> itself causes a barrier in accessing the page.
>>>>
>>>
>>> Not if the responsive approach was done properly, as it would then simply
>>> trigger different media query breakpoints, and the fluid approach (which is
>>> part of RWD's core tents) should also avoid horizontal scrolling.
>>>
>>> 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
>>> >>> >>> >>> >>>
>>
>>>>
From: Jonathan Avila
Date: Tue, Feb 23 2016 1:58PM
Subject: Re: Any official clarification on Text-only zoom and RWD?
← Previous message | Next message →
> Question is, are these mandatory to implement these controls or how to
decide whether to have it or not.
Sufficient techniques are one way but not the only way to meet a success criteria and this specific techniques are not required if the criteria is met another way such as by sufficient contrast be default on the page or supporting browser zoom.
Jonathan
Sent from my iPhone
> On Feb 23, 2016, at 3:42 PM, Snahendu Bhattacharya < = EMAIL ADDRESS REMOVED = > wrote:
>
> Question is, are these mandatory to implement these controls or how to
> decide whether to have it or not.
From: Alastair Campbell
Date: Thu, Feb 25 2016 4:51AM
Subject: Re: Any official clarification on Text-only zoom and RWD?
← Previous message | Next message →
Jonathan Avila wrote:
> On the desktop at least zooming in the browser changes the width of the
> window and increases the scale.
I'd be careful with the terminology, the browser does not 'change the width
of the window', although I think I know what you mean.
Think of zoom as basically increasing the CSS pixels, so if the browser
(inner) window is 1000px wide, and you zoom to 200%, the window will show
500px of the content.
If the site is responsive (or even just 'liquid', percentage based) and
there are media queries to adapt to the change, you will not get horizontal
scrolling.
> In theory a developer could use fixed font sizes at different break
points or do something that caused the text to change but not actually
reach 200% at 200 percent zoom.
Possible but unusual. A developer could specify that text is 20px when the
window is 1000px wide, and 10px when the window is 500px wide. However,
that would look odd to most people as devices use a relative (physical)
size for pixels anyway, so 16px on desktop (at the assumed viewing
distance) should look the same as 16px on a mobile [1].
Also, I think the wording of the current success criteria would still make
that a fail, if you zoom in and the text doesn't increase in size, that's a
fail.
As an aside on a mobile browser where you can pinch zoom (when not blocked
> by the site or forced by the browser ) the ability to resize text alone is
> restricted to certain browsers or sites that use the system fonts that
> support the text size settings on the platform. So g142 allows mobile
> sites to meet the success criteria on small screens where text resize alone
> migh be more difficult.
>
I agree that zooming and/or text sizing on mobile is a real problem [2].
There is more than one solution though, I used to have a feed-reader which
would allow you to pinch-zoom on a responsive layout past it's maximum,
without causing horizontal scrolling. It just kept everything in one column
and within the window-width.
> I totally support text resize without zoom and believe it is a user
> requirement and need.
>
I am still not convinced, it is one of my questions to the Low Vision Task
Force [3].
I understand when a site is not responsive zoom causes horizontal
scrolling, but if:
- The site is responsive, so you don't get horizontal scrolling.
- It doesn't reduce content or functionality when zoomed.
- You are on a desktop style browser (as far as zoom is concerned)
What does text-sizing help with that zoom doesn't?
Cheers,
-Alastair
1] https://alastairc.ac/2013/02/how-to-hold-your-ipad/
2] https://alastairc.ac/2015/10/zoom-for-fixed-and-responsive-sites/
3]
https://lists.w3.org/Archives/Public/public-low-vision-a11y-tf/2016Feb/0042.html
From: Alastair Campbell
Date: Thu, Feb 25 2016 4:54AM
Subject: Re: Any official clarification on Text-only zoom and RWD?
← Previous message | Next message →
Jordan Wilson wrote:
> If anyone has any techniques or examples of responsive sites that ALSO
> support text-only zoom without breaking I'd appreciate it.
>
I would be interested in that to, apart from setting everything in EMs
(i.e. related to font size) so that zoom and text-sizing act the same way,
I can't think how you could do that reliably.
-Alastair
From: Patrick H. Lauke
Date: Thu, Feb 25 2016 5:23AM
Subject: Re: Any official clarification on Text-only zoom and RWD?
← Previous message | Next message →
On 25/02/2016 11:51, Alastair Campbell wrote:
> Jonathan Avila wrote:
[...]
>> I totally support text resize without zoom and believe it is a user
>> requirement and need.
>>
>
> I am still not convinced, it is one of my questions to the Low Vision Task
> Force [3].
>
> I understand when a site is not responsive zoom causes horizontal
> scrolling, but if:
> - The site is responsive, so you don't get horizontal scrolling.
> - It doesn't reduce content or functionality when zoomed.
> - You are on a desktop style browser (as far as zoom is concerned)
>
> What does text-sizing help with that zoom doesn't?
I'd also note that many browsers don't have, have removed, or hidden,
pure text resizing in favor of pull-page zoom. There is at least some
blame/responsibility here on user agents / UAAG, and it's not something
that web content authors necessarily need to fix themselves (vis-a-vis
adding in-page custom text resize widgets and such)
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
From: Guy Hickling
Date: Thu, Feb 25 2016 6:26AM
Subject: Re: Any official clarification on Text-only zoom and RWD?
← Previous message | Next message →
Alastair, Jordan, This is in reply to your two requests for an example
site that can handle text-only zoom up to 200%. But Alastair already
has the way to do it - you
mentioned using em measurements for everything, along with suitable media
queries of course.
That is the answer, because em measurements on everything mean the
containers resize on zoom at the same rate as the text they contain, so the
content never breaks out of its containers. I created my own blog site that
way, and it's good for up to 300% text-only zoom in Firefox, with no
horizintal scrolling needed, and other browers that do text only zoom. I
wrote a post Accessible Responsiveness about it, and how to do it, last
year, at http://www.enigmaticweb.com/index.php/blog/accessibleResponsiveness,
and you can zoom it up to 300% to see it working. (I would appreciate any
comments or criticisms you have about the article; there's a form at the
bottom.)
On responsive sites, using em units, at higher zooms the breakpoints
come much earlier; at 200% zoom it may show a tablet layout at almost
desktop screen size!, but that's still ok for the user.
ââ
Users have to knowâ, of course,â that they must select the "text-only"
option which most browsers have. â(One post in this thread seemed to
be unaware of that, so for their
reference, âIn Firefox that's a tick box on the View/Zoom submenu, at
the foot of the
popup selection choices, but people with impaired sight would no doubt want
to permanently configure their browsers in the configuration facility.
â IE also allows it, but if I remember rightly one of the big 5 browsers
didn't do it at least upto last year)â
Regards,
Guy Hickling
From: Alastair Campbell
Date: Thu, Feb 25 2016 6:55AM
Subject: Re: Any official clarification on Text-only zoom and RWD?
← Previous message | Next message →
Hi Guy,
I don't think we mean quite the same thing.
If you size everything in EMs (and I mean everything, including layout,
text and images/video), then text-sizing acts in the same way as zoom.
What others (e.g. Jonathan) are saying is that text-sizing *without*
affecting layout or triggering a media query is needed.
By sizing everything in EMs you are taking away that option, you leave them
with only the option to zoom (in effect).
By the way, it looks to me like your main layout uses percentages, not EMs,
so your site isn't a good example of an EM layout. (I'm not criticizing it
as a layout, just saying it isn't an example of an EM layout.)
So your layout (with text-only sizing) fulfils what Jon was asking for, but
that isn't the same thing as an EM layout.
NB: Text-only sizing is harder to do these days. Firefox and Safari have it
as a non-default option in the view menu, but for Chrome and IE (haven't
tried in Edge) you have to dig into the settings and know where you're
going.
Given that most sites now work better with zoom (see Jared's comments),
zoom seems like a good default!
I think I need to make some examples...
-Alastair
From: _mallory
Date: Thu, Feb 25 2016 7:05AM
Subject: Re: Any official clarification on Text-only zoom and RWD?
← Previous message | Next message →
On Thu, Feb 25, 2016 at 01:55:12PM +0000, Alastair Campbell wrote:
> Hi Guy,
>
> I don't think we mean quite the same thing.
>
> If you size everything in EMs (and I mean everything, including layout,
> text and images/video), then text-sizing acts in the same way as zoom.
>
> What others (e.g. Jonathan) are saying is that text-sizing *without*
> affecting layout or triggering a media query is needed.
One problem I have with browser zoom vs text zoom is images that get
zoomed too and becoe blurry, if they are sitting next to text, it's
nasty having blurry stuff in the edge of my sight. But that's me, that's
why I used to only use Text Zoom.
However I also discovered that unless the website is a single column, and
a single column only, enlarging only the text but not the containers
fails, hard and early, once you are dealing with a language that doesn't
have all the short simple words English has. Once you're on a website
talking about volksgezondsheidverzekeringen, you really do need the
layout to respond, or not have much of a layout in the first place.
Also, I've run across this and the issue he shows as a demo hits again
languages with long words pretty quickly:
https://vasilis.nl/nerd/using-pixels-polite/
Just wanted to throw those into the discussion.
cheers,
_mallory
From: Alastair Campbell
Date: Thu, Feb 25 2016 7:59AM
Subject: Re: Any official clarification on Text-only zoom and RWD?
← Previous message | Next message →
It is a good point about large images getting blurry, but I guess that on
balance having readable text without horizontal scrolling is more important?
Perhaps in future things like picture/srcset could keep the images clear
even when zooming.
> However I also discovered that unless the website is a single column, and
a single column only, enlarging only the text but not the containers
fails, hard and early, once you are dealing with a language that doesn't
have all the short simple words English has.
I guess that's why you "used to" use text-sizing rather than zoom, and I
guess you now use zoom primarily?
> Also, I've run across this and the issue he shows as a demo hits again
> languages with long words pretty quickly:
> https://vasilis.nl/nerd/using-pixels-polite/
>
Interesting, I had thought that your browser settings would over-ride the
pixel units anyway, I wonder if something else happens on codepen? I"ll
investigate if I get time.
As a user, an RWD site + zoom should be more reliable as it is less
dependant on the quirks of a particular developer using consistent units.
As zoom works by increasing the size of CSS pixels, and all the sizing
units are calculated to CSS pixels anyway, they all expand together.
Thanks,
-Alastair
From: Guy Hickling
Date: Thu, Feb 25 2016 8:21AM
Subject: Re: Any official clarification on Text-only zoom and RWD?
← Previous message | Next message →
Alastair,
My apologies, I didn't explain myself well at all, did I? It's what
comes of speaking from memory instead of checking first! The critical
bit to have in em units are the media query breakpoints.
However, the proof of the pudding, as they say, is that, on the site I
gave the reference for, you can do text-only zoom up to 300% with
nothing going astray, nothing breaking out of their containers and
overwriting other stuff in the adjacent containers (the usual and
ugliest looking problem on so many sites when the user zooms). That is
achieved by em units in the media query breakpoints (but other things
need to be resizable as well, whether in percentage or em units, they
musn't be in fixed px units if they contain text).
> So your layout (with text-only sizing) fulfils what Jon was asking for, but that isn't the same thing as an EM layout.
As you say it provides what I hope Jon wanted, and also "an accessible
experience for users who increase just their text size".
In the post I wrote: "Instead of using pixels in our media query
breakpoints, simply use em units. Suppose we have a query like:
@media all and (max-width: 30em) {...}
to achieve some change when the screen size is equal to or smaller
than 30 em. It will work equally well whatever the text size in the
user's browser, large or small, because the query is now taking
account of the text size. That is to say, the changeover will occur
when elements are in the same position, relative to each other,
regardless of text size."
> What others (e.g. Jonathan) are saying is that text-sizing *without*
affecting layout or triggering a media query is needed.
Triggering the media queries will happen, that is necessary due to the
large font size. As the font size zooms, clearly it can fit less text
on the screen, so we actually want the queries to trigger in order to
keep the layout sane. But with em units in the media queries it means
that the layouts are exactly those the responsive developer has made
for tablet and phone; which is what keeps everything sane and neatly
laid out what ever the text zoom. It just means that the tablet
layout, for instance, triggers much earlier in large text zoom, due to
the larger text size, than it would for the much smaller text size of
zero zoom.
In fact, if the layout is done with a little bit of care, it is
possible to take an average size all the way up to 400% text zoom,
without the layout being hit too badly. That's better than the WCAG
asks for!
I agree the user has to choose the right browser, such as Firefox. I
do wonder how all the people who need it actually don't know some
browsers are better for them, and how long it takes them to find these
things out, but that's another story. (And I'm sure IE allowed
text-only zoom from its main menu upto about IE10. They've degraded it
in v11).
Regards,
Guy Hickling
From: Alastair Campbell
Date: Thu, Feb 25 2016 8:56AM
Subject: Re: Any official clarification on Text-only zoom and RWD?
← Previous message | Next message →
Guy Hickling wrote:
> The critical bit to have in em units are the media query breakpoints.
>
Ah, ok. However, the difference in how the layout works on your site works
is the percentages on the columns.
The columns are relative to the window size (e.g. 70% for the main content).
The different between PX and EMs for triggering media queries is pretty
minor in practice, for people who have the default font-size there is no
difference at all as browsers calculate the layout based on pixels (and EM
sizes are calculated to CSS pixels).
If people do change the default font size, and there is a mix of
percentages, EMs and perhaps PX sizes on the page, the proportions of
things can vary unpredictably.
That is ok if you have a simple two column layout, but take a site like a
newspaper (e.g. http://www.theguardian.com).
The main layout has a mix of pictures and text in a complex grid based
layout, that's a lot harder to work with. Any variability in how it behaves
will cause things to break.
I believe the Guardian does size things with EMs completely (or at least
enough), as increasing text-size behaves in the same was as zoom. However,
that doesn't fulfil the requirement for text-only zoom.
Is that really a problem? (_mallory?)
I think it would be unrealistic to allow for both text-sizing and zoom to
work on a layout like that, from a robustness point of view. It would fall
apart too easily.
-Alastair
From: _mallory
Date: Thu, Feb 25 2016 9:39AM
Subject: Re: Any official clarification on Text-only zoom and RWD?
← Previous message | Next message →
On Thu, Feb 25, 2016 at 02:59:15PM +0000, Alastair Campbell wrote:
> It is a good point about large images getting blurry, but I guess that on
> balance having readable text without horizontal scrolling is more important?
Depends, I guess. Now that I start getting dizzy with horizontal scrolling
it's become more important for me, but on the other hand animated gifs
scattered throughout articles are even worse when blown up, often makes
some little flickering strip on the edge of the browser show up. Bleh.
>
> Perhaps in future things like picture/srcset could keep the images clear
> even when zooming.
Now that's a cool idea!
>
> > However I also discovered that unless the website is a single column, and
> a single column only, enlarging only the text but not the containers
> fails, hard and early, once you are dealing with a language that doesn't
> have all the short simple words English has.
>
> I guess that's why you "used to" use text-sizing rather than zoom, and I
> guess you now use zoom primarily?
That, and first Opera 12 started switching to the mobile CSS if there was
any, which usually worked out *very* well, and I was using a lot of Opera
since the keyboarding is awesome. Eventually other browsers started doing
it too, so right now the browser I do Text Zoom with are FF and IE, and
when on Windows I have ZoomText so IE hasn't been zoomed in any way in
the last year or so.
Again pages which had columns always ended up with text running out of the
boxes, whereas now many pages have mobile styles with 1 col.
>
>
>
> > Also, I've run across this and the issue he shows as a demo hits again
> > languages with long words pretty quickly:
> > https://vasilis.nl/nerd/using-pixels-polite/
> >
>
> Interesting, I had thought that your browser settings would over-ride the
> pixel units anyway, I wonder if something else happens on codepen? I"ll
> investigate if I get time.
If you go into for example chromium and in the settings set to "larger",
px will remain indeed at the px set by the developer (so pages who don't
use px start out large enough, but pages with px you need to Ctrl++).
Also I can't remember if he mentioned it there but if you use em with
media queries, those are based on your application font settings (whatever
gives most users that 16px base) and not on the body em size you may have
set.
>
> As a user, an RWD site + zoom should be more reliable as it is less
> dependant on the quirks of a particular developer using consistent units.
> As zoom works by increasing the size of CSS pixels, and all the sizing
> units are calculated to CSS pixels anyway, they all expand together.
Yeah it seems to be going that way. The issues today seem to hit more
sites who don't have a mobile, 1col setup the browser can default to
to prevent the horizontal scroll (though using ZommText brings that
back).
cheers,
_mallory
From: Guy Hickling
Date: Thu, Feb 25 2016 10:29AM
Subject: Re: Any official clarification on Text-only zoom and RWD?
← Previous message | Next message →
Alastair,
The point I am making is that it
â*â*
*is* possible to make a website that is accessible right up to the WCAG's
200% zoom,
â*â*
*and way beyond*,
â â
âwith âno horizontal scrolling, with care and throught.
âI thinkâ
that is what was being asking for in this thread?
â
To check it out would you like to change your font size to 32px (double the
standard size) and do text-only zoom to 200% (both together) on that site
and consider it? (For reference again the URL is
http://www.enigmaticweb.com/index.php/blog/accessibleResponsiveness). (I
also tried it at a 64px font size at zero zoom, that's 4 times the normal
text size and that works too).
I can see a couple of flaws in it that I overlooked - the subheading in the
header disappears under the logo
ââ (which maybe I'll fix some timeâ
â)â
. But all the content after that is fully legible, needs no horizonatal
scrolling, and nothing overwrites anything else or spills out of its
containers. (The other bug
, if you're curious,â
is in the form labels on the contact page
â.)
The WCAG isn
â'â
t asking anything too much at all on the matter of text zoom, just that
developers design for it.
â There are sites that do it well, but certainly not enough.â
Regards,
Guy Hickling
From: Alastair Campbell
Date: Thu, Feb 25 2016 11:14AM
Subject: Re: Any official clarification on Text-only zoom and RWD?
← Previous message | Next message →
Guy Hickling wrote:
> The point I am making is that it *is* possible to make a website that is
> accessible right up to the WCAG's
> 200% zoom,*and way beyond*,
>
That was not in question. There are several methods, the easiest these days
is using responsive webdesign (RWD).
As it stands every site actually passes WCAG on this because zoom is
ubiquitous, and horizontal scrolling is not a fail (although quite a few of
us think it should be, or at least it needs tightening up in some way).
The question is about text-sizing and whether there is a requirement for
that given RWD.
Take my personal site as an example:
https://alastairc.ac/
Great when you zoom, not so good when you increase the text size a lot, at
least on the homepage. Please note I put the layout of the site together in
a couple of evening to practice with flexbox, so I won't be insulted by
anyone pointing out shortcomings!
I think it is fairly typical of the techniques in use though, and dealing
with text-sizing in the way some people are used to historically is
difficult to combine with RWD.
Cheers,
-Alastair
From: Jonathan Avila
Date: Mon, Feb 29 2016 10:28AM
Subject: Re: Any official clarification on Text-only zoom and RWD?
← Previous message | Next message →
> I'd be careful with the terminology, the browser does not 'change the width of the window', although I think I know what you mean.
What I meant was the window.innerWidth property changes when you zoom. It's equivalent to resizing the window with the caveat below.
> Think of zoom as basically increasing the CSS pixels, so if the browser
(inner) window is 1000px wide, and you zoom to 200%, the window will show 500px of the content.
The innerWidth will change AND the window.devicePixelRatio will also increase. This will cause the text size to increase even when a breakpoint has not been reached. So browser zoom such as the zoom in Chrome causes both a scale change and inner width change that in my opinion could cause unexpected issues in between breakpoints. That's why you'd need to test for zoom even when responsive design is used. You can see this by simply resizing your window and the innerWidth will change but the devicePixelRatio will not.
> Also, I think the wording of the current success criteria would still make that a fail, if you zoom in and the text doesn't increase in size, that's a fail.
Agreed.
>> I totally support text resize without zoom and believe it is a user
>> requirement and need.
> I am still not convinced, it is one of my questions to the Low Vision Task Force [3].
What I meant was I totally support and see the need for zoom without horizontal scrolling. It doesn't matter to me how it's done either through zoom or text resize -- as long as the text can be resized without horizontal scrolling. I think we agree on that.
Jonathan
Jonathan Avila
Chief Accessibility Officer
SSB BART Group
= EMAIL ADDRESS REMOVED =
703.637.8957 (o)
Follow us: Facebook | Twitter | LinkedIn | Blog | Newsletter
From: Alastair Campbell
Date: Mon, Feb 29 2016 5:50PM
Subject: Re: Any official clarification on Text-only zoom and RWD?
← Previous message | Next message →
Hi Jonathan,
I think we're in agreement on most thing, I just wasn't sure about this bit:
> The innerWidth will change AND the window.devicePixelRatio will also
> increase. This will cause the text size to increase even when a breakpoint
> has not been reached.
Yes, so testing that on the inspector console, my browser starts with an
innerWidth of 1280, and a devicePixelRatio of 2 (retina screen).
If I zoom in to 200% (cmd and + 6 times), the inner width is 640, and
devicePixelRatio is 4 (2x200%).
However, be careful on the terminology, everything is increasing
proportionally, not just the text. (I think that's what you meant, but it
one of those things that is easy to mistake.)
> So browser zoom such as the zoom in Chrome causes both a scale change and
> inner width change that in my opinion could cause unexpected issues in
> between breakpoints.
Not if it is actually RWD approach, which should use percentages for
widths. To quote the original RWD article: "Fluid grids, flexible images,
and media queries are the three technical ingredients for responsive web
design."
That's why you'd need to test for zoom even when responsive design is
> used. You can see this by simply resizing your window and the innerWidth
> will change but the devicePixelRatio will not.
>
I'm not going to argue against testing layouts, but I don't understand the
pixel ratio bit.
If I screenshot my homepage with the browser at 427px wide:
https://alastairc.ac/tmp/homepage-small.png
It is exactly the same as a screenshot at 1280px wide zoomed in by 300%:
https://alastairc.ac/tmp/homepage-zoomed.png
Yes, the device pixel ratio is different due to zoom level, but the layout
and proportions are the same. If you are testing by changing browser width,
that is equivalent to testing with zoom.
Kind regards,
-Alastair
From: Jonathan Avila
Date: Wed, Mar 02 2016 11:46AM
Subject: Re: Any official clarification on Text-only zoom and RWD?
← Previous message | Next message →
Alastair, see my comments below marked up with our names. Jonathan
> The innerWidth will change AND the window.devicePixelRatio will also
> increase. This will cause the text size to increase even when a
> breakpoint has not been reached.
[Alastair]
Yes, so testing that on the inspector console, my browser starts with an innerWidth of 1280, and a devicePixelRatio of 2 (retina screen).
If I zoom in to 200% (cmd and + 6 times), the inner width is 640, and devicePixelRatio is 4 (2x200%).
However, be careful on the terminology, everything is increasing proportionally, not just the text. (I think that's what you meant, but it one of those things that is easy to mistake.)
[Jonathan]
Yes, I agree that everything is increasing with zoom -- but the SC 1.4.4 only requires resize of text and not resize of other elements. So that is why I focused on the word text -- not meaning to imply it was the only thing to increase.
> So browser zoom such as the zoom in Chrome causes both a scale change
> and inner width change that in my opinion could cause unexpected
> issues in between breakpoints.
[Alastair]
Not if it is actually RWD approach, which should use percentages for widths. To quote the original RWD article: "Fluid grids, flexible images, and media queries are the three technical ingredients for responsive web design."
[Jonathan]
Perhaps if it is only using percentages -- but I also worry about overflow hidden, etc. -- but perhaps that's not allowed under true RWD?
> That's why you'd need to test for zoom even when responsive design is
> used. You can see this by simply resizing your window and the
> innerWidth will change but the devicePixelRatio will not.
>
[Alastair]
I'm not going to argue against testing layouts, but I don't understand the pixel ratio bit.
If I screenshot my homepage with the browser at 427px wide:
https://alastairc.ac/tmp/homepage-small.png
It is exactly the same as a screenshot at 1280px wide zoomed in by 300%:
https://alastairc.ac/tmp/homepage-zoomed.png
[jda] I respectfully disagree, the text is larger in the zoomed view in your screen shots. That's because the text is scaling and the innerWidth property is changing and thus the content enlarges at a greater rate with zoom and that is my point -- that if something like an overflow hidden was present it might only rear it's head when zoom was used rather than simply resizing the window.
[Alastair]
Yes, the device pixel ratio is different due to zoom level, but the layout and proportions are the same. If you are testing by changing browser width, that is equivalent to testing with zoom.
[jda] See above -- there is a difference IMO because with zoom the text enlarges faster than with the change of just with width of the window inner width change.
Kind regards,
-Alastair
From: Patrick H. Lauke
Date: Wed, Mar 02 2016 2:14PM
Subject: Re: Any official clarification on Text-only zoom and RWD?
← Previous message | Next message →
On 02/03/2016 18:46, Jonathan Avila wrote:
>
> [Alastair] Not if it is actually RWD approach, which should use
> percentages for widths. To quote the original RWD article: "Fluid
> grids, flexible images, and media queries are the three technical
> ingredients for responsive web design."
>
> [Jonathan] Perhaps if it is only using percentages -- but I also
> worry about overflow hidden, etc. -- but perhaps that's not allowed
> under true RWD?
This would be a case where a developer didn't understand the concept of
RWD and just designed to very specific known sizes, ignoring the fluid
part that would guarantee that other sizes in between hard breakpoints
are all catered for. Undoubtably those devs are out there (the "I only
care about iPhones and their specific widths" crowd), but I've not come
across any such issues with overflow:hidden in the wild so far.
> [jda] I respectfully disagree, the text is larger in the zoomed view
> in your screen shots. That's because the text is scaling and the
> innerWidth property is changing and thus the content enlarges at a
> greater rate with zoom and that is my point -- that if something like
> an overflow hidden was present it might only rear it's head when zoom
> was used rather than simply resizing the window.
Do you have an actual example of a site that does use overflow:hidden
and it causes problems? Because, just like Alastair, I can't quite see
what your issue is here.
> [Alastair] Yes, the device pixel ratio is different due to zoom
> level, but the layout and proportions are the same. If you are
> testing by changing browser width, that is equivalent to testing with
> zoom.
>
> [jda] See above -- there is a difference IMO because with zoom the
> text enlarges faster than with the change of just with width of the
> window inner width change.
I can't understand your use of "faster" here. Given a starting width of
x and a pixel ratio of 1 in my browser, if I full-page zoom to 200%, the
reported inner width of the browser will be x/2 and the pixel ratio will
be 2; if instead I leave the zoom alone at 100% but resize the window to
half its width, the new width will also be x/2 and pixel ratio will be
one...which is means it's showing exactly the same content, in exactly
the same proportions.
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
From: Alastair Campbell
Date: Wed, Mar 02 2016 4:01PM
Subject: Re: Any official clarification on Text-only zoom and RWD?
← Previous message | No next message
> [Jonathan] Perhaps if it is only using percentages -- but I also
>> worry about overflow hidden, etc. -- but perhaps that's not allowed
>> under true RWD?
>>
>
I don't think it is a problem under zoom. If you're zooming by increasing
pixel size and maintaining proportions, the only way overflow would be an
issue is if you *also* increase text size.
> [jda] I respectfully disagree, the text is larger in the zoomed view
>
>> in your screen shots. That's because the text is scaling and the
>> innerWidth property is changing and thus the content enlarges at a
>> greater rate with zoom and that is my point -- that if something like
>> an overflow hidden was present it might only rear it's head when zoom
>> was used rather than simply resizing the window.
>>
>
[AC] I think you're seeing an artifact of your browser re-sizing the image
for you. One of the images is MASSIVELY bigger than the other, but I'm
guessing your browser re-sized the image to fit within the window?
Let me try again, two windows on the same screen:
https://alastairc.ac/tmp/alastairc-zoom-example.png
You can repeat this, I set it up so that:
- The left window is 2/3rds of the width of the 1280 screen (853px wide),
and zoomed in 200%.
- The right window is 1/3rd of the screen (427px wide).
- I checked the innerHeight of the left window (355px high), and matched
that on the right.
Note that the reported inner width and height on both windows is
*identical*.
The content is bigger on the left (obviously, it is zoomed), but the
proportions are identical, because the CSS sizes are identical.
-Alastair