Putting It All Together: a Case Design Project. Accessibility

believe most of my readers are proficient with table-based HTML layout, so I needn't explain how separate image pieces are united into graphic compositions at the top and bottom of pages or how the text is typeset in a column of the specific width.  Instead, I'd like to call your attention to the accessibility requirements that are often overlooked by practicing web designers---although, as I noted elsewhere, they can be fully observed even with a relatively "fancy" design such as this one.  In particular:

• All image files on the Quiotix site, without exception, are provided with alt texts, empty ("") ones for purely decorative pieces and those with the heading text for title graphics.  When necessary, these alt texts contain separators preventing their gluing together in speech or text-only browsers (thus, alt texts for navigation panel buttons are all enclosed in brackets).

• For lists, I didn't use the OL or UL elements because the hanging indent they introduce in graphic browsers would look bad in the already narrow column, and I felt that the default circular bullets could clash with the overall design style.

  Instead, I formatted all lists as simple chains of paragraphs with yellow boxes playing the role of the bullets (see this page for an example).  To not damage the accessibility aspect of the lists, I provided numerical alt texts for the bullets so that the items appear consecutively numbered to the users of non-graphic browsers.

• As you might guess, the standard formatting of H1, H2, etc. elements wasn't particularly suitable for this design either.  For the in-text headings, I needed the golden color of the links, bold italic face of the body text font, and the common inter-paragraph vertical skips (see this page for an example).  It turned out to be possible, however, to combine these formatting parameters with the advantages of using logical markup tags: I just put all the FONT COLOR, B and I tags inside an H4 tag for each heading.

  Why H4? Simple: this level of headings doesn't introduce any unwanted skips or formatting in Netscape or MSIE, so I considered that having H4 without H1, H2, or H3 was better than having no logical tags at all.  Of course, redefining the formatting parameters of a heading tag with CSS would be the best solution, but so far we have to take into account the great many users of non-CSS graphic browsers.  For the same purpose---unwanted skips that couldn't be suppressed---I had to reject my own recommendation and not use any of the H* tags for enclosing the heading graphics.