Another missed W3C opportunity
I have the need to create a clickable hierarchy of pages. ie. You start at the top, and see the "root" folders, which you click to see the contents. You then click those to open their contents, and so on.
There are a number of options open to me, many of which I have tried and tested in various forms over the last couple of years. From a JavaScript-based tree to a series of nested DIV's with strategic CSS to create an indented effect.
But that ain't too good on the accessibility. So, how about creating them as an unordered list? Any group of links should be rendered as an unordered list (UL) to allow them to be grouped together. CSS can then be used to remove the bullets, align them correctly and even highlight the "selected" item.
The beauty of unordered lists is that they are naturally hierarchical. So by adding lists inside lists - a task very easily done - we can create quite a complex navigation structure using one of the simplest HTML tags - and be accessible to boot.
So, I created the code to build the lists, and it all looks good. Then came the overloading of CSS, replacing the bullets with images that would be more useful to the majority of users. But then, after running it, I was sorely disappointed.
As you can see in the screenshot, the images are vertically centred, meaning the visual hierarchy is completely lost. (The greyed areas have been added to provide some visual indication of the
supposed hierarchy).
So, after playing around with various things it seems I cannot get the image to align with the text it is related to. I have a policy in my accessible work, in that I reduce the number of images on a page as much as possible. CSS is powerful enough to provide really impressive designs with the minimum of requirement for images. Where I cannot avoid images, I prefer to put the image into the CSS, so that the image doesn't necassarily appear on downlevel browsers and accessible browsers. This is particularly important for visual effects, which the folders in the screenshot clearly are.
By avoiding feeding the images into the HTML content, I can avoid:
- The image not appearing if the file behind it is missing
- The image not appearing if the user has turned off images
- An accessible browser highlighting the fact that an image is present, although it provides little function or added value to the purpose of the page content
- An image having to be loaded over a slower connection, such as a GSM or GPRS connection
So despite the extensive work W3C have done in helping facilitate an accessible and useful experience for users - even though the user agents may implement those functions in an apparent random fashion - it seems I am going to have to resort to an image within the text content.
Sheesh ....