Web browser vendors are also responsible for accessibility

Published on Monday, November 28th, 2005

First, we developed layouts based on pixels. Along came accessibility and scalability, and we started to specify our fonts with ems instead. Then, those of us who wanted to be really out there created whole layouts using ems, so the whole layout would scale accordingly to the user’s current text size setting, giving a more consistent design impression. Hand in hand with this, we also created layouts that were elastic, expanding but with a fixed maximum and/or minimum width.

They way I see it, we break our necks calculating pixels into em, trying to make sure that every value is roundable. Then, of course, when the user changes his/her text size setting, it’s bound to be some rounding errors depending on the new size and things like inheritance of the em value into different elements.

Personally, I think it’s gone to far. The reason people started to use em for fonts weren’t because pixels were a bad unit, but for the fact that Internet Explorer didn’t support resizing of the text size when the font was specified in pixels.

Ever since I was a little kid, playing video games, I’ve been amazed by the fact that no matter what size one has of the TV screen, the game adapts and you can just start playing. When I started to develop web sites, I couldn’t believe the constraints of a fixed size delivered to everyone. Sure, vector graphics aren’t here yet for the web (I can’t believe why SVG isn’t already built into every web browser), but lately I’ve been testing something that gets us as close as possible: the Zoom feature in Opera.

I think it’s outright brilliant! Talk about making it more accessible while keeping the general look of the web site! You zoom a web site to desirable viewing size and it just works. Doesn’t matter if the font is in pixels, or if the web site itself has a hardcoded width. Scale, baby, scale.

My conclusion is that this feature should be mandatory in every web browser. Stop developing with ems, use your beloved pixels, and instead give us tools (read: web browsers) that offer users the features they need.

Let us instead focus on making sure no page demands JavaScript to function and that it’s possible to navigate around using only the keyboard.

Posted in CSS, Developing, Web browsers | 17 comments

17 comments

  • Tommy Olsson
    November 28th, 2005 at 14:29

    The main advantage of using em and % is that they are relative to the user’s default font setting and to the window size, respectively.

    Someone who needs larger text can set a larger default, and your em-based layout will respect that, whereas a pixel-based will not. So what if you can zoom it? Why should you have to zoom everything every time? Surely it should be enough to do it once, by specifying a larger base font size?

    This sounds like the usual whingeing from old-school print designers who lament the lack of ‘control’ on the Web. The users are in control; that’s what makes Web publishing different (and in some respects more difficult) than print design. If you can’t cope with that, there’s always PDF…

  • Robert Nyman - author
    November 28th, 2005 at 15:50

    Tommy,

    The exact same things applies to zooming. You can set a default magnification that will be applied to all pages, eliminating the need to set it all the time.

    This isn’t about fear of losing control or not allowing the end users freedom; on the contrary. I think most users would prefer scaling the interface and elements accordingly, as opposed to having a super-huge font in 150 pixels wide columns.

    I agree that using % values are a well recommended approach, but also that end users should have the possibility to scale it as well. I’m not saying the web page should be zoomed when, for instance, the window is resized. What I’m saying is that zooming should be a given feature that is optional for end users who like what they see but want to make it bigger or smaller.

  • Shane Shepherd
    November 28th, 2005 at 15:58

    @Robert: You make a good point. Do you think the network stations, or even individual tv show producers worry about what kind of television their users are going to be using to watch? I doubt it.

  • Jonny Axelsson
    November 28th, 2005 at 16:14

    There is a time and place for both. A moderate zoom (150% say, or 200%) may be better than scaling some components like text. For larger zoom (like 300%, not to speak of cranking all the way to 1000%) you get lost and have to do horizontal scrolling to read unless you have a huge screen.

    So for large zoom or tiny screens (phones typically have 100-240 pixel width) we opt for reformatting the page to fit the screen instead of scaling it to unreadability.

    Pixels got a bad reputation for accessibility because if you coded with pixels you were stuck with them in IE. I’m not sure if that will be fixed in IE7. Pixels make sense when you want something on the same scale as an image (that except for SVG always are of pixel height and width).

    But ems are useful too. If you have h1 {font-size: 1.6em} instead of 24px if the default body type is 15px, the ‘h1′ would automatically scale to the right size if you later change it to 20px (it would then be 32px) or to 10px (16px).

    We, the browser makers, shouldn’t have problems with fractional pixels and all the math stuff is something we should do and the web designers shouldn’t have to worry about it. But there are some fairly tricky edge cases, and it is possible to be off by a pixel. For fonts it is a bit more complicated that that because not all fonts scale well. If a font only looks good at the fixed sizes of 13.33px and 16px, it won’t look good either in 14px or in 14.5px.

  • Steve Williams
    November 28th, 2005 at 16:18

    If you’re broadcasting a PAL (european) signal, it always has 625 lines, irrespective of screen size - so that’s why there’s no need to worry about it. Same for NTSC, just fewer lines (525).

    An interesting (or not?) fact I learned whilst fixing my blog to work in Opera is that its zoom feature cannot scale SiFR text, though regular flash appears to scale ok?

    And I agree, Opera’s implementation of page zoom is by far the best :)

  • Chris
    November 28th, 2005 at 17:43

    I like that firefox zooms any webpage, if I change the font-size.
    But otherwise I think IE is right, because one pixel is one pixel. I mean if a webdeveloper (old-school) sets his font to 10px this means 10px and not 10 or 12 or 14…
    I think that it’s not correct to set the font-size in pixel since in this case the font should not zoom.
    And often I have to set it in pixels since our coustomers don’t know that they *can* change their font-size and have set their IE to extreme values. And it’s not my job to explain my customers how to use their tools…

    The whole subjects has many ifs and buts and no easy answers.

  • Tommy Olsson
    November 28th, 2005 at 18:45

    a super-huge font in 150 pixels wide columns

    You shouldn’t set a column width in pixels unless it only contains images with a known pixel width. Pixel-sized text columns are evil, for the very reason you just outlined.

  • Jules
    November 28th, 2005 at 19:28

    While I may not need the zoom feature (in any browser, not just Opera), I do appreciate that it exists and I like the way it operates. In IE and FF (I don’t know about Safari and would like to hear from someone), when you want to increase the text size, you hold the Control key and scroll down (the reverse for decreasing text size) whereas Opera (IMHO) has got it right: scroll up to increase and visa versa.

    Opera has been my favourite browser for many years and will likely stay on top for many more.

  • Robert Nyman - author
    November 28th, 2005 at 22:39

    Shane,

    Thanks!

    Jonny,

    Good to see you here!
    Absolutely, I agree, there’s room for both. Therefore, I really wish every web browser manufacturer should implement the zoom feature; I’m sure the end users would like it.

    And also, as you say, I don’t think designers should do math to get it to work.

    Steve,

    Interesting to hear about sIFR!

    Chris,

    That’s an interesting distinction; fonts set in pixels shouldn’t scale no matter the web browser, while set in other units should. Maybe it should be like that when it comes to adapting to the text size setting, but I also opt for the zooming feature.

    When it comes to the text size setting in IE for users that don’t know about it, I wrote a script to check for it and to offer a fallback alternative.

    Tommy,

    Yes and no, it was just an example. But still, design is made in pixels to begin with. I still think most web site owners as well as end users would prefer if everything scaled accordingly, to get a more consistent visual experience.

    Jules,

    That’s one way, although I always use Ctrl and +/- to change the text size in Mozilla, Command and +/- in Safari and +/- in Opera. I’m a keyboard shortcuts freak! :-)

  • Chris
    November 29th, 2005 at 8:19

    Hi Robert,
    > I wrote a script to check for it and to offer a fallback
    > alternative.
    I know and use this script :-)
    Thanks!!

  • Robert Nyman - author
    November 29th, 2005 at 8:52

    Chris,

    Great! Glad it helps! :-)

  • Robert’s talk » IE 7 beta 2 - a first test drive
    February 1st, 2006 at 16:30

    [...] a doubt, this is the best feature of this release! I wrote about my opinion about this in Web browser vendors are also responsible for access [...]

  • Jeff L
    February 5th, 2006 at 5:09

    Robert,

    great article - I completely agree. I hadn’t been aware of the zoom feature in Opera until I recently saw a link to this article, tried it, loved it, love the fact that it’s in IE7, and think that it should definitely become a standard feature.

    Let the designers and developers get back to do doing their thing, and lets the browsers worry about handling it properly.

  • Robert Nyman - author
    February 5th, 2006 at 12:52

    Jeff L,

    Thank you, it makes me very happy to hear that!
    Also, I’m very glad that you share my opinion. :-)

  • Schriftgröße in Pixeln » Peruns Weblog - Webwork und Internet
    April 7th, 2006 at 12:25

    [...] chen Gedanken zu diesem Thema und habe diesbezüglich einige Beiträge, anderer Webworker zu diesem Thema gelesen. Ist es wirklich schlecht [...]

  • Firefox and Safari, implement the Zoom feature! - Robert’s talk
    October 31st, 2006 at 11:42

    [...] e happy, grateful and will spread the name of your product!   Related reading Web browser vendors are also responsible for access [...]

  • How to specify dynamic font sizes consistently with CSS - Robert’s talk
    February 27th, 2007 at 9:57

    [...] re some calculations and less readable/understandable code.   Related reading Web browser vendors are also responsible for access [...]

Share your thoughts:

HTML: You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> . If you want to display code examples, please remember to write &lt; for < and &gt; for >.

Comment preview

Top results