WebAIM - Web Accessibility In Mind

E-mail List Archives

Thread: accessibility for low vision!

for

Number of posts in this thread: 10 (In chronological order)

From: karthik k
Date: Thu, Feb 02 2017 9:06PM
Subject: accessibility for low vision!
No previous message | Next message →

--
Thanking you,
regards
Karthik K.
Phone no 9060989650


Dear friends,

I am new to the field of accessibility. In one of the website i came
to know that font size should be at list 12 point. is it true?
What are the colors preferred by low vision?
Please reply.

From: Srinivasu Chakravarthula
Date: Thu, Feb 02 2017 10:14PM
Subject: Re: accessibility for low vision!
← Previous message | Next message →

Hello Karthik,
From one of the earlier threads, I read:
"The only requirement is that you leave the user with the ability to
increase the size by 200%. Best practice is to specify the font-size using
em so that the font size can be adjusted independently of browser
magnification."

I suggest minimum font size of 12 as that could be readable. What if user
doesn't know how to zoom and having very small font would be an issue.

As far as colors are concerned, it should meet WCAG 1.4.3 Contrast Minimum (
https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-contrast.html
)

Good luck,
Srinivasu

Regards,

Srinivasu Chakravarthula - Twitter: http://twitter.com/CSrinivasu/
Website: http://www.srinivasu.org | http://serveominclusion.com

Let's create an inclusive web!

Lead Accessibility Consultant, Informatica
Hon. Joint Secretary, The National Association for the Blind, Karnataka
Branch

On Fri, Feb 3, 2017 at 9:36 AM, karthik k < = EMAIL ADDRESS REMOVED = > wrote:

> --
> Thanking you,
> regards
> Karthik K.
> Phone no 9060989650
>
>
> Dear friends,
>
> I am new to the field of accessibility. In one of the website i came
> to know that font size should be at list 12 point. is it true?
> What are the colors preferred by low vision?
> Please reply.
> > > > >

From: Karl Brown
Date: Fri, Feb 03 2017 2:09AM
Subject: Re: accessibility for low vision!
← Previous message | Next message →

I've tried to push designers into using the browser default font-size,
which is roughly 16px (for some reason all the browsers use that). It's a
nicely legible size in almost all the fonts I've seen use it, while 12 is
very small in some fonts. The only time I deviate from this is for mobile
devices which are generally held closer to the face than a desktop screen,
so the font will "appear" to be bigger.

I also suggest designers use the rem, em and percentage units when doing
everything that needs explicit sizes (borders, padding, margin, height,
width, etc.) so when a user scales the text, the design stays consistent
and text doesn't start spilling from one component to another.




On Fri, Feb 3, 2017 at 5:14 AM, Srinivasu Chakravarthula <
= EMAIL ADDRESS REMOVED = > wrote:

> Hello Karthik,
> From one of the earlier threads, I read:
> "The only requirement is that you leave the user with the ability to
> increase the size by 200%. Best practice is to specify the font-size using
> em so that the font size can be adjusted independently of browser
> magnification."
>
> I suggest minimum font size of 12 as that could be readable. What if user
> doesn't know how to zoom and having very small font would be an issue.
>
> As far as colors are concerned, it should meet WCAG 1.4.3 Contrast Minimum
> (
> https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-
> audio-contrast-contrast.html
> )
>
> Good luck,
> Srinivasu
>
> Regards,
>
> Srinivasu Chakravarthula - Twitter: http://twitter.com/CSrinivasu/
> Website: http://www.srinivasu.org | http://serveominclusion.com
>
> Let's create an inclusive web!
>
> Lead Accessibility Consultant, Informatica
> Hon. Joint Secretary, The National Association for the Blind, Karnataka
> Branch
>
> On Fri, Feb 3, 2017 at 9:36 AM, karthik k < = EMAIL ADDRESS REMOVED = >
> wrote:
>
> > --
> > Thanking you,
> > regards
> > Karthik K.
> > Phone no 9060989650
> >
> >
> > Dear friends,
> >
> > I am new to the field of accessibility. In one of the website i came
> > to know that font size should be at list 12 point. is it true?
> > What are the colors preferred by low vision?
> > Please reply.
> > > > > > > > > >
> > > > >



--
Karl Brown
Twitter: @kbdevelops
Skype: kbdevelopment

Professional Certificate Web Accessibility Compliance (Distinction),
University of South Australia, 2015

From: Patrick H. Lauke
Date: Fri, Feb 03 2017 2:51AM
Subject: Re: accessibility for low vision!
← Previous message | Next message →

On 03/02/2017 09:09, Karl Brown wrote:
> I've tried to push designers into using the browser default font-size,
> which is roughly 16px (for some reason all the browsers use that). It's a
> nicely legible size in almost all the fonts I've seen use it, while 12 is
> very small in some fonts.

Note that the thread starter talked about 12 *points*, which equates to
16 pixels.
(worth noting here that units of measure such as "points", "mm", "cm"
etc in CSS don't actually relate to their physical
counterparts...setting a sitze in these units does not in fact guarantee
that things will actually render to that physical size as measure on the
screen - all those units are still anchored on the pixel unit
https://drafts.csswg.org/css-values/#absolute-lengths)

> The only time I deviate from this is for mobile
> devices which are generally held closer to the face than a desktop screen,
> so the font will "appear" to be bigger.
>
> I also suggest designers use the rem, em and percentage units when doing
> everything that needs explicit sizes (borders, padding, margin, height,
> width, etc.) so when a user scales the text, the design stays consistent
> and text doesn't start spilling from one component to another.

Also worth noting that most modern browsers now default to providing
full-page zoom, and in many cases have removed the option to just resize
text in isolation. So even using px units for font size will results in
users being able to resize everything (both text and their containers
etc) without too many problems.

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: Oscar DeLong
Date: Fri, Feb 03 2017 6:13AM
Subject: Re: accessibility for low vision!
← Previous message | Next message →

I actually just came across a website that had the container set to a specified width and when it went full screen the text was tiny and the whole thing was forced to the side of the screen. I had to open it in its own window, shrink the window to the size of the container, and zoom in on that window to get the text readable for me. I would guess the code was set to a rigid value and I am not familiar with all the ways to override those so I had to work around it, but at least I knew how. Not everyone does. If we make the code more flexible it helps. Others have provided suggestions of how to do that but I usually don't specify a specific size and let the default take over. Then I would use the values such as 'small,- 'medium,- or 'large,- or to specify size. Also, 'larger- or 'smaller- or use % to change the size. That way the user controls more of the sizing.

Oscar

From: WebAIM-Forum < = EMAIL ADDRESS REMOVED = > on behalf of "Patrick H. Lauke" < = EMAIL ADDRESS REMOVED = >
Reply-To: WebAIM Discussion List < = EMAIL ADDRESS REMOVED = >
Date: Friday, February 3, 2017 at 4:51 AM
To: " = EMAIL ADDRESS REMOVED = " < = EMAIL ADDRESS REMOVED = >
Subject: Re: [WebAIM] accessibility for low vision!

On 03/02/2017 09:09, Karl Brown wrote:
I've tried to push designers into using the browser default font-size,
which is roughly 16px (for some reason all the browsers use that). It's a
nicely legible size in almost all the fonts I've seen use it, while 12 is
very small in some fonts.

Note that the thread starter talked about 12 *points*, which equates to
16 pixels.
(worth noting here that units of measure such as "points", "mm", "cm"
etc in CSS don't actually relate to their physical
counterparts...setting a sitze in these units does not in fact guarantee
that things will actually render to that physical size as measure on the
screen - all those units are still anchored on the pixel unit
https://drafts.csswg.org/css-values/#absolute-lengths)

The only time I deviate from this is for mobile
devices which are generally held closer to the face than a desktop screen,
so the font will "appear" to be bigger.

I also suggest designers use the rem, em and percentage units when doing
everything that needs explicit sizes (borders, padding, margin, height,
width, etc.) so when a user scales the text, the design stays consistent
and text doesn't start spilling from one component to another.

Also worth noting that most modern browsers now default to providing
full-page zoom, and in many cases have removed the option to just resize
text in isolation. So even using px units for font size will results in
users being able to resize everything (both text and their containers
etc) without too many problems.

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: Patrick H. Lauke
Date: Fri, Feb 03 2017 6:32AM
Subject: Re: accessibility for low vision!
← Previous message | Next message →

On 03/02/2017 13:13, Oscar DeLong wrote:
> I actually just came across a website that had the container set to a
> specified width and when it went full screen the text was tiny and
> the whole thing was forced to the side of the screen.

Note I was talking about "full-page zoom" (where, if you
CTRL+"+"/CTRL+"-", or use the browser's zoom controls, *everything* gets
zoomed - text, images, borders - rather than just text getting resized).

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: JP Jamous
Date: Fri, Feb 03 2017 7:42AM
Subject: Re: accessibility for low vision!
← Previous message | Next message →

Just one thing to keep in mind when using EM or percentage. 1EM = 16PX, which is 12PT. However, each browser agent translates those numbers differently. I had the pleasure of dealing with this mess a few years back.

Ensure that you find the common ground between the browsers you support and through If statements identify each browser and set the number properly. Example,

If Browser == IE Then
Font-size: 0.98EM;
Else If Browser == Firefox Then
Font-size: 1EM;

You get the point.

The above will ensure that you have liquid pages and they all present visually the proper size. You would have to perform your own testing with multiple browsers to find the sweet spot. That will of course require eye-balling that sucker.

-----Original Message-----
From: WebAIM-Forum [mailto: = EMAIL ADDRESS REMOVED = ] On Behalf Of Patrick H. Lauke
Sent: Friday, February 3, 2017 7:33 AM
To: = EMAIL ADDRESS REMOVED =
Subject: Re: [WebAIM] accessibility for low vision!

On 03/02/2017 13:13, Oscar DeLong wrote:
> I actually just came across a website that had the container set to a
> specified width and when it went full screen the text was tiny and the
> whole thing was forced to the side of the screen.

Note I was talking about "full-page zoom" (where, if you
CTRL+"+"/CTRL+"-", or use the browser's zoom controls, *everything* gets
zoomed - text, images, borders - rather than just text getting resized).

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: Patrick H. Lauke
Date: Fri, Feb 03 2017 7:47AM
Subject: Re: accessibility for low vision!
← Previous message | Next message →

On 03/02/2017 14:42, JP Jamous wrote:
> Just one thing to keep in mind when using EM or percentage. 1EM > 16PX, which is 12PT. However, each browser agent translates those
> numbers differently. I had the pleasure of dealing with this mess a
> few years back.

The exact value of what a browser sets as "1em" can depend on user
settings. With vanilla settings, the vast majority of browsers nowadays
default to 16px as default size. The only browsers which, out of the
box, have a different pixel value for 1em are - to my knowledge at least
- some browsers on e-readers/tablets.

> Ensure that you find the common ground between the browsers you
> support and through If statements identify each browser and set the
> number properly. Example,
>
> If Browser == IE Then Font-size: 0.98EM; Else If Browser == Firefox
> Then Font-size: 1EM;
>
> You get the point.

I would strongly advise against doing that, unless your design depends
on being pixel accurate (in which case you have bigger problems). By all
means, set it to 1em, and trust that the browser is using a sensible
default / the user has customised their browser settings to an
appropriate default size.

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: JP Jamous
Date: Fri, Feb 03 2017 8:37AM
Subject: Re: accessibility for low vision!
← Previous message | Next message →

Thank you for the correction Patrik. I did this in 2008 - 2009. I am glad to notice that this has been taken care of across browsers.



-----Original Message-----
From: WebAIM-Forum [mailto: = EMAIL ADDRESS REMOVED = ] On Behalf Of Patrick H. Lauke
Sent: Friday, February 3, 2017 8:48 AM
To: = EMAIL ADDRESS REMOVED =
Subject: Re: [WebAIM] accessibility for low vision!

On 03/02/2017 14:42, JP Jamous wrote:
> Just one thing to keep in mind when using EM or percentage. 1EM > 16PX, which is 12PT. However, each browser agent translates those
> numbers differently. I had the pleasure of dealing with this mess a
> few years back.

The exact value of what a browser sets as "1em" can depend on user settings. With vanilla settings, the vast majority of browsers nowadays default to 16px as default size. The only browsers which, out of the box, have a different pixel value for 1em are - to my knowledge at least
- some browsers on e-readers/tablets.

> Ensure that you find the common ground between the browsers you
> support and through If statements identify each browser and set the
> number properly. Example,
>
> If Browser == IE Then Font-size: 0.98EM; Else If Browser == Firefox
> Then Font-size: 1EM;
>
> You get the point.

I would strongly advise against doing that, unless your design depends on being pixel accurate (in which case you have bigger problems). By all means, set it to 1em, and trust that the browser is using a sensible default / the user has customised their browser settings to an appropriate default size.

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: Graham Armfield
Date: Fri, Feb 03 2017 8:50AM
Subject: Re: accessibility for low vision!
← Previous message | No next message

An example of a site that gives a good resize/zoom experience is
https://shop.lego.com/en-GB/

Shame it's not so good for other things - like focus indication...

Regards
Graham Armfield