CodeBetter.Com
CodeBetter.Com
RSS 2.0 via Feedburner
           Do you Twitter? Follow us @CodeBetter

Peter's Gekko

public Blog MyNotepad : Imho { }

Visual accessibility of web pages: no real progress yet

Working  a lot with a computer has a couple of health risks, which get bigger and bigger over the years. There are several ways to fight this:

Big text has imho still a long way to go in Windows.

The thing I always liked best about Firefox is not tabbed browsing but the impressive way you can simply set the font size by pressing ctrl-+/- or ctrl-scrollwheel. IE does this as well but the thing Firefox does far better is wrapping the text. And Firefox has a far greater range of text sizes. Many a site is easier to read with FF. Although it can be irritating that many a site has the width of a text block set absolutely, you end up with big text on a quarter of the screen width and 3 quarters of the screen width empty. Such a waste of resources

Making a web page easy to read is not difficult at all. I wanted my new website visual accessible both in FF and IE. This is how I did that.

The main markup of the masterpage

  <div>

    <table style="width:100%">

        <tr>

        <td><asp:Image ID="Mondriaan" runat="server" style="width:100%" ImageUrl="~/images/Mondbanner.gif"></asp:Image></td>

        <td class="big">Gekko Software</td>

        <td><asp:Image ID="Hemidactylus" runat="server" style="width:80%" ImageUrl="~/images/gekko.gif"></asp:Image></td>

        </tr>

    </table>

    <table style="width:100%">

        <tr>

        <td style="width: 120px; vertical-align:top">

        <asp:Menu ID="HoofdMenu" runat="server">

            <Items>

                <asp:MenuItem Text="Services" Value="Services" NavigateUrl="~/Services.aspx"></asp:MenuItem>

                <asp:MenuItem Text="Portfolio" Value="Portfolio" NavigateUrl="~/Portfolio.aspx"></asp:MenuItem>

                <asp:MenuItem Text="Publications" Value="Publications" NavigateUrl="~/Publications.aspx"></asp:MenuItem>

                <asp:MenuItem Text="Contact" Value="Contact" NavigateUrl="~/Contact.aspx"></asp:MenuItem>

                <asp:MenuItem Text="Blog" Value="Blog" NavigateUrl="http://codebetter.com/blogs/peter.van.ooijen/default.aspx"></asp:MenuItem>

                <asp:MenuItem Text="About" Value="About" NavigateUrl="~/about.aspx"></asp:MenuItem>

            </Items>

        </asp:Menu>

        </td>

        <td><asp:contentplaceholder id="ContentPlaceHolder1" runat="server">

            </asp:contentplaceholder>

        </td>

        </tr>

 

    </table>

    </div>

Quite simple. The page heading is a three column table. Its width is set to 100% so it will use all real estate available. The images in the left and right column will also fill them according to space available. The middle column contains plain (CSS decorated) text. The middle part of the page is even simpler: a fixed size column for a menu and one column for the content.

The content I want to demonstrate here is no big deal either. It reads an htm file, extracts the body and assigns that to a label (read here for the details)

<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">

<div>

    <asp:Label ID="LabelArticle" runat="server" Text="Label"></asp:Label>

</div>

</asp:Content>

You can shrink or blow up the text size, in FF almost ad absurdum. From tiny

to huge

At a given moment a horizontal scroll bar will show up. The moment this happens in FF is (coincidental ?) when the text reaches the maximum size of IE.

In comes IE7 which brings tabbed browsing and also a far greater range of text size. But just look what happens when you increase the size to more than 100%

A horizontal scroll bar shows up which makes the text unreadable. Which makes it, when it comes to visual accessibility, a big step back.

IE7 is in beta and beta does have bugs. What worries me is that such a (imho) blatant bug has not been spotted before the beta release. What worries me even more is that Charles Petzold had a quite similar story of a WPF bug when changing Window's DPI. Are computer screens becoming something just for the young?


Published Jun 09 2006, 05:08 AM by pvanooijen
Filed under: ,

Comments

pvanooijen said:

You're right.. Slip of the keyboard. Corrected. Thanks !
# June 9, 2006 10:28 AM

Chris Slatt said:

Are they both actually the same size windows?  The screenshots make it look like you've got IE7 sized much smaller than Firefox.  I horizontal bar is appearing because the image on the left + the font size of your heading in the middle + the image of the lizard on the right has exceeded the size of the window.  If you got rid of one or both of those images, you'd be able to go a lot bigger without getting a horizontal bar.
# June 9, 2006 10:34 AM

pvanooijen said:

No matter how you resize the IE7 window, the scrollbar will not go away. The moment you set the sizing to 100% the scrollbar is gone, whatever window size.
All images are with table columns with a 100% width for the table as a whole. FF and IE6 (now I've got the version number right :)) understand.
Searching the web you'll find a lot of people complaining about this bug, including companies like Sun..
# June 9, 2006 11:14 AM

Chris Slatt said:

Wow that sucks. :(
# June 9, 2006 11:26 AM

pvanooijen said:

It does. And that's the why of this posts title :<
# June 9, 2006 11:40 AM

Leave a Comment

(required)  
(optional)
(required)  

Enter the numbers above:
Add
Check out Devlicio.us!

Our Sponsors

Free Tech Publications

This Blog

Syndication

News