TW Blog :: Entries for Web Standards

FIR, Accepted Defeat!

Also relates to Accessibility and CSS Design

Ok, yet another FIR technique has been created by Levin Alexander to resolve the inherent problem for CSS enabled browsers with images disabled. While this solution does display the header in plain text when images are disabled, it falls foul of reintroducing a span element, which the techniques of Stuart Langridge and Seamus Leahy had tried to resolve. While this new approach makes nice use of the relative→absolute relationship between parent and child in CSS positioning, it fails with transparent PNG (or GIF) header graphics, and for any design with coloured background, transparency is a prerequisite to avoid visual discrepancy between the browser interpretation of the color and that defined in the image file.

Determined to resolve this, I tried changing visibility, third dimension placement (z-index) and container heights, but there is always going to be one scenario that breaks the hack. Since FIR and its many derivatives are just that, a hack, I have come to the conclusion that FIR by itself cannot succeed as an Accessibility tool. It does present an excellent method for separating design and content, implementing alternative graphics with each stylesheet, and fortifying the semantics of the XHTML document's markup. But once accessibility is contemplated, other methods must also be introduced to present each user with the same material. The obvious way to acheive this is to use a Stylesheet Switcher to offer a plain text version of the page. Here I am not talking about the plain text of 90's websites, where the content of the site must be completely duplicated in the appropriate format. With the tools of the DOM the same XHTML marked-up page can be used, and a simple alternative stylesheet created to display plain text for the entire site.

So the graphic design version of the site can implement a FIR technique to ensure the content does not contain superfluous code. For example a header would be just a header.

<h1 id="header">This is the page header</h1>

And the stylesheet would implement FIR to replace the text with the graphic. This can offer an accessible page to most users. For the neglected few, switching to the plain text style sheet presents the header as is (there are simply no FIR techniques declared). Hence, users browsing with CSS enabled browsers with images disabled can also access all the material. Everyone is happy!?

Well there is still the possibility of a user with CSS-enabled browser, no images and no Javascript! Then what? Fall back to server-side scripting perhaps, with a GET string appended to a URI in the Stylesheet Switcher anchor when it is loaded (using the noscript tag). Then the correct stylesheet for the pulled page can be set as default before the page is sent to the client.

Posted on Aug 18, 2003 at 19:00:46. [Comments for FIR, Accepted Defeat!- 0]

Another Makeover For The RNIB

Also relates to Accessibility and CSS Design

I decided to join the games this evening and have a quick stab at rebuilding the RNIB home page. Admittedly, a lot of the work had already been done by Simon and the others, but I started with a blank slate to see if I would take the same approach. The final draft is a little and rough and ready - done at speed - but renders consistently across the Windows browsers. Once again I haven't been able to test it on other platforms - barely enough room for a single PC in my office! Since the RNIB serves a specific purpose I set specific structural and design goals for the rebuild

1. Readily resizable content (to at least two times) without breaking up the structure of the page.
2. Logical and accessible structure, that could render easily on an alternative browser (eg Braille or Speech in this case).
3. Keep the design as close to the original as possible (since RNIB had already invested the time in releasing a new front end design, and assuming they have done accessibility checks on the choice of colours). Actually I wasn't totally sure what the original design was intended to be as it looked so radically different across IE, Opera and Moz!

Much of the approach I took appears to be similar to the work already done, however a few areas of the build differ

• Using Fahrner Image Replacement technique on the graphical parts of the page served no purpose in a non-visual environment. For example, the RNIB banner in the top left on screen I placed within the style rule for the top level header element - h1 {background: url('../g/rnib.gif') no-repeat top left;}. Then the text equivalent, cloaked from the screen in a span element, would be served for non-visual user agents, instead of the alt tag of the image.
• I placed the banner at the bottom of the XHTML document, and positioned it absolutely. This way it serves as a reminder when a non-visual UA reaches the end of the page. Some would probably argue that by definition, a banner should be placed at the start of the document, but this is just my view of banners!
• This also meant, there were four clear full width horizontal bars from the top of the page, and I started the main content (ie splitting the columns) below these four rows. Thus, by enclosing all three columns within a wrapper container, the background colour could be set to that of the two sides, to avoid the white space problem that would other arise with using position:absolute to place each column.
• Rather than relying on the pipe divider, I put both the horizontal menus into inline lists using a combination class to extend the rules from one list to the other without impinging on the rules for the vertical lists.
• The date seemed to sit in an odd place when the page was read through a text browser, so I pushed it to the bottom as well, and positioned it using negative relative placement.

That's most of it. I am sure there is a lot that could still be improved, IE does a vainishing trick sometimes over the inner floats, and, the CSS could certainly be improved if more advanced selectors could be used without compromising browser compatibility (good ol IE!?) Oh, and I only set a global selector to switch off borders, margins and padding at the outset since I wanted to do this quickly and working from a blank slate seemed the quicker way to go. Actually worked quite well, although it makes for hard work integrating Fahrner's keyword hack to support IE5.x safely. (I say 5 since @import was used to exclude version 4 browsers, which actually get a reasonable, if plain, styleless version). Finally, the filesize (15KB) is not representable since I removed much of the anchor code, and additional accessibility code would probably still need to be added, plus metadata.

Posted on Jul 05, 2003 at 01:24:39. [Comments for Another Makeover For The RNIB- 0]