WebAIM - Web Accessibility In Mind

E-mail List Archives

Thread: Resize Text - rem with a px fallback

for

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

From: Alistair Duggin
Date: Wed, Jun 25 2014 4:26AM
Subject: Resize Text - rem with a px fallback
No previous message | Next message →

Hi,

I’m working on a responsive website and to set the size of the fonts we are using rem with a fallback in px.

This means that all modern browsers (including IE 9 and above) are able to resize the fonts (to more than 200%). However, users of Internet explorer 6, 7 and 8 will not be able to resize the fonts.

I’m wondering if text not being resizable in some legacy browsers would result in a WCAG 2 fail. Changing the fallback from px to em will involve a considerable amount of development time to fix due to the font size compounding issues with em - and will also result in a messy and harder to maintain codebase. Is using rem with a px fallback an acceptable/accessible implementation?

Here’s an article with information about the approach we have taken:
http://snook.ca/archives/html_and_css/font-size-with-rem

This is the website I work on:
https://www.moneyadviceservice.org.uk/en?roptin=1

cheers,
Alistair Duggin

From: Jukka K. Korpela
Date: Wed, Jun 25 2014 6:38AM
Subject: Re: Resize Text - rem with a px fallback
← Previous message | Next message →

2014-06-25 13:26, Alistair Duggin wrote:

> I’m working on a responsive website and to set the size of the fonts
> we are using rem with a fallback in px.

Use the em unit and you won't need a "fallback in px" (which is not
really a fallback but switches to something completely different).

The only thing that you can possibly gain by using rem instead of em is
ease of authoring: you need not calculate multipliers, taking into
account the nesting of elements that may have their font sizes set in em
or percentage. But when you need to consider "fallbacks", authoring
becomes more complicated.

> I’m wondering if text not being resizable in some legacy browsers
> would result in a WCAG 2 fail.

Does it matter? It is surely an accessibility problem, possibly a minor
one, but completely unnecessary in this case.

Yucca

From: Alistair Duggin
Date: Wed, Jun 25 2014 8:28AM
Subject: Re: Resize Text - rem with a px fallback
← Previous message | Next message →

> The only thing that you can possibly gain by using rem instead of em is ease of authoring
Exactly, that’s why we are using rem. Ease of authoring and maintainability are very important on a large code base. That is why the rem unit was added in the CSS3 specification.






On 25 Jun 2014, at 13:38, Jukka K. Korpela < = EMAIL ADDRESS REMOVED = > wrote:

> 2014-06-25 13:26, Alistair Duggin wrote:
>
>> I’m working on a responsive website and to set the size of the fonts
>> we are using rem with a fallback in px.
>
> Use the em unit and you won't need a "fallback in px" (which is not really a fallback but switches to something completely different).
>
> The only thing that you can possibly gain by using rem instead of em is ease of authoring: you need not calculate multipliers, taking into account the nesting of elements that may have their font sizes set in em or percentage. But when you need to consider "fallbacks", authoring becomes more complicated.
>
>> I’m wondering if text not being resizable in some legacy browsers
>> would result in a WCAG 2 fail.
>
> Does it matter? It is surely an accessibility problem, possibly a minor one, but completely unnecessary in this case.
>
> Yucca
> > >

From: Tim Harshbarger
Date: Wed, Jun 25 2014 8:59AM
Subject: Re: Resize Text - rem with a px fallback
← Previous message | Next message →

It probably depends on what browsers you are needing to support for your site. If the site is only intended to work with IE9 and later, I don't think it would be a fail. If the site is intended to work with older browsers, then I think it would be a problem.

Tim


-----Original Message-----
From: = EMAIL ADDRESS REMOVED = [mailto: = EMAIL ADDRESS REMOVED = ] On Behalf Of Alistair Duggin
Sent: Wednesday, June 25, 2014 5:27 AM
To: = EMAIL ADDRESS REMOVED =
Subject: [WebAIM] Resize Text - rem with a px fallback

Hi,

I'm working on a responsive website and to set the size of the fonts we are using rem with a fallback in px.

This means that all modern browsers (including IE 9 and above) are able to resize the fonts (to more than 200%). However, users of Internet explorer 6, 7 and 8 will not be able to resize the fonts.

I'm wondering if text not being resizable in some legacy browsers would result in a WCAG 2 fail. Changing the fallback from px to em will involve a considerable amount of development time to fix due to the font size compounding issues with em - and will also result in a messy and harder to maintain codebase. Is using rem with a px fallback an acceptable/accessible implementation?

Here's an article with information about the approach we have taken:
http://snook.ca/archives/html_and_css/font-size-with-rem

This is the website I work on:
https://www.moneyadviceservice.org.uk/en?roptin=1

cheers,
Alistair Duggin

From: Henny Swan
Date: Wed, Jun 25 2014 9:49AM
Subject: Re: Resize Text - rem with a px fallback
← Previous message | No next message

Hi Al,

You've probably already done this but check your site stats to get an idea of who is using what and, as Tim says, if you don't officially support earlier version you probably have leeway there. It will be interesting to see what percentage are on desktop and mobile

Also keep in mind that due to the nature of the site many users might not have the new shiny things. Having said that in user testing we've generally found that people who are unemployed or retired tend to not have desktops or laptops in favour of tablets and mobiles (Disclaimer: this is very anecdotal).

One final thing, do you have any apps for iPhone or Android? This might be an alternative for some but obviously can't be used as an excuse not to implement something on the web side correctly.

Henny


On 25 Jun 2014, at 15:59, Tim Harshbarger < = EMAIL ADDRESS REMOVED = > wrote:

> It probably depends on what browsers you are needing to support for your site. If the site is only intended to work with IE9 and later, I don't think it would be a fail. If the site is intended to work with older browsers, then I think it would be a problem.
>
> Tim
>
>
> -----Original Message-----
> From: = EMAIL ADDRESS REMOVED = [mailto: = EMAIL ADDRESS REMOVED = ] On Behalf Of Alistair Duggin
> Sent: Wednesday, June 25, 2014 5:27 AM
> To: = EMAIL ADDRESS REMOVED =
> Subject: [WebAIM] Resize Text - rem with a px fallback
>
> Hi,
>
> I'm working on a responsive website and to set the size of the fonts we are using rem with a fallback in px.
>
> This means that all modern browsers (including IE 9 and above) are able to resize the fonts (to more than 200%). However, users of Internet explorer 6, 7 and 8 will not be able to resize the fonts.
>
> I'm wondering if text not being resizable in some legacy browsers would result in a WCAG 2 fail. Changing the fallback from px to em will involve a considerable amount of development time to fix due to the font size compounding issues with em - and will also result in a messy and harder to maintain codebase. Is using rem with a px fallback an acceptable/accessible implementation?
>
> Here's an article with information about the approach we have taken:
> http://snook.ca/archives/html_and_css/font-size-with-rem
>
> This is the website I work on:
> https://www.moneyadviceservice.org.uk/en?roptin=1
>
> cheers,
> Alistair Duggin
>
> > > > > >