Today's Web accessibility tip from Mark encourages us to use the real code for HTML lists, rather than hard-coding in an image before each item in your lists.
This tip is especially appropriate for news sites, considering lists of headlines are the bread and butter of most of their home pages.
To see the hard-coded images in action, check out the News Break section on the right side of ajc.com's home page -- each of those red arrows is a separate image. Same goes for CJOnline's home page, but in its case the arrows are double arrows, and they're blue. Neither site has an ALT attribute set for the arrow images, which means people using a text-only browser will see [redarrow] each time that image is used on ajc.com, and [blue_double_arrow] for every instance on CJOnline.
Of course, I don't mean to pick on these two sites in particular. After browsing for a few more minutes, I found many more examples:
- The Tampa Tribune (blue triangles)
- Newsday (red blobs)
- The Detroit News (red triangles)
- The Boston Globe (maroon triangles)
- The Boston Herald (somewhat three-dimensional blue balls)
- The Christian Science Monitor (a golden arrow)
I also noticed some sites use normal text bullets but go out of the way to style them in a different color or font. This is fine and dandy from an accessibility standpoint (text bullets should show up as text bullets regardless of your browser environment, as long as nothing funky happens with character sets), but I think it's wasteful -- and downright silly -- to do this. Here are some culprits:
- The Washington Post (bullets in red Arial vs. text in blue MS Sans Serif)
- The RealCities sites, e.g. San Jose Mercury News (arrows in orange vs. text in blue)
- The Village Voice (orange bullets vs. black text)
For all these sites, OL and UL tags would simplify the lists tenfold -- they'd be easier to maintain, the pages would be lighter (assuming stylesheets were used), and in some cases they'd be more accessible. News sites have got to clean up their flab.
Comments
Posted by geoff on July 10, 2002, at 4:57 a.m.:
I find it somewhat intriguing that at the moment that you posted this, Newsday's red blob images were all broken...
Posted by geoff on July 10, 2002, at 5 a.m.:
I find it somewhat intriguing that at the moment that you posted this, Newsday's red blob images were all broken...
Posted by geoff on July 10, 2002, at 5:01 a.m.:
Did you know if you hit "Refresh" on your page, it re-submits this form... I can always find neat things ;-)
Posted by Adrian on July 10, 2002, at 5:15 a.m.:
Yes, I'm aware of the Refresh re-submittal issue. Any suggestions on how to work around it? Right now I have it programmed so that after the comment form is submitted, the user is returned to the previous page (from which the comment was posted) -- whether it be a permalinked entry or the main page. I can't think of any way to bypass the Refresh issue short of making a "Comment successfully posted" page, and those are kind of annoying. Or are they? Comments?
Posted by Chris Heisel on July 11, 2002, at 3:35 p.m.:
I don't mind comment successfully posted pages, especially if they'd redirected you back to where you were or at least provided a link to it.
Comments have been turned off for this page.