Continuing my look at United States Presidential campaign websites, I took a look at Rudy Giuliani’s site. Like the other sites I’ve seen, better attention needs to be given to the use of alt tags. The main image on Giuliani’s site has no alt tag. This is the image that serves as the link to one of Giuliani’s “12 Commitments.” With no alt tag and no obvious text link, how will people using screen readers or text browsers know to go see this important piece of information?
A-ha, you say, further down on the page is a link to the whole list of “12 Commitments,” a person could use that link as a stepping point into the commitments. You would think so, but the list of 12 Commitments contains a big accessibility ‘no-no’. The 12 links to 12 commitments – 12 different pieces of information – are all worded exactly the same: “I will”. Worse, as of today, 26 June, 2007, only one of those links actually goes anywhere. Yet that is not conveyed to the reader till further down the page.
So the list of links will be read as such on a screen reader: “List of 12 links – Link: I will. Link: I will. Link: I will. Link: I will. Link: I will. Link: I will. Link: I will. Link: I will. Link: I will. Link: I will. Link: I will. Link: I will.”
Annoying, eh? Download the free time-trial version of Jaws and try it out for yourself.
This mistake violates WCAG 1.0 Guideline 13:
13.1 Clearly identify the target of each link. [Priority 2]
Link text should be meaningful enough to make sense when read out of context — either on its own or as part of a sequence of links. Link text should also be terse.
For example, in HTML, write “Information about version 4.3″ instead of “click here”. In addition to clear link text, content developers may further clarify the target of a link with an informative link title (e.g., in HTML, the “title” attribute).
The good news is Giuliani’s staff can fix this by shifting the links on these commitments to include more than the words, I will.” Easy enough fix; let’s hope they do it.
Back on the main page, I was pleased to see a proper heading outline. One H1 tag and two H2s. On further inspection of the stylesheets, I saw the improper use of “display: none;” for some H3s. Not good. Those H3s are now invisible to the user’s browser making it impossible for the user to view a proper outline for easier navigation.
Use a technique that pushes them off the page or hides them under an image. Those ideas are better than the “display: none;” trick.
Overall, not too bad, though that long list of badly worded links is a big strike.
