Take the 2-minute tour ×
Webmasters Stack Exchange is a question and answer site for pro webmasters. It's 100% free, no registration required.

I have read in the past that it is recommended to use only relative sized fonts in web pages of accessibility. Is this still the case? Using Bootsrap from IE7, for example, which uses body{ font-size: 14px; } makes changing the text size do nothing. Is this how a user with functional needs would use the page, or would the user use the Ctrl++ / Ctrl+MouseWheelUp method which actually increases the web page size, not just the text. After doing some searches online, I cannot find any definitive up to date information.

This issues has been raised in the Bootstrap issue tracker, though, but Mark Otto thinks it is not a concern, stating "browsers scale up entire pages these days, so it's not an issue with type scaling or anything."

IE7 Text Size Switching

share|improve this question
    
While I have no reference to back this up, I think using relative font-size is an ideal that leads to considerably more headaches than it is worth. Whenever there is graphics or video on the same page, it just does not hold up. –  Itai Apr 15 '13 at 20:04
1  
Using relative font sizes is a good idea, but it requires a design that will accommodate variable fonts. Sadly, not all designers make those. –  Blazemonger Apr 16 '13 at 11:53
    
There are some CSS frameworks that were built with accessibility in mind, like YAML (why could they not choose another name?) But yeah, it seems like there are a bunch of issues cajoling Bootstrap into being accessible. –  kzh Apr 16 '13 at 13:07
add comment

1 Answer

IF you want good accessibility then you should consider IE6 and IE7. Bootstrap has limited support in IE6 and IE7 - Chrome, Firefox, and Safari do not encounter this problem. It is important to note that Twitter Bootstrap is a framework and not everything is done for you out of the box, it can be easily adapted to do what you want it too do with JavaScript.

Bootstrap and Modernizr

With using Modernizr you can easily integrate separate rules for ie6 and ie7 by using the css class:

Default font size: body .ie7 {font-size:100%;} or body .ie7 {font-size:large;}

Additionally you can always use JavaScript to switch font sizes by clicking +/- on the screen: Demo can be viewed here and would use something like this:

  • xsmall.css > body {font-size:x-small;}
  • small.css > body {font-size:small;}
  • large.css > body {font-size:large;}
  • xlarge.css > body {font-size:x-large;}
  • xxlarge.css > body {font-size:xx-large;}

Personally I would go the modernizr route and get the CSS working with IE6 and IE7

share|improve this answer
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.