WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: guidelines for accessible HTML and CSS - these ok?

for

From: deborah.kaplan@suberic.net
Date: Aug 23, 2011 4:39PM

Sandy,

Nice list! There are a few guidelines on your list that I am not so sure about.

1. "Every page has a <title> that contains the page name (which corresponds to the menu link and the <h1>) and the site name"

This very much depends on the site -- although I might be confused because I'm not sure what you mean by the "menu link".

2. "The first item on every page is a skip to content link. This link takes you to an anchor set at the very top of the content — probably just above the <h1>"

Again, this depends on the site. If not a lot of space is dedicated to navigation, this isn't always necessary.

3. "Each page contains one <h1>."

There have been debates about that on this list. It's not required by the standard, and there are no particular reports that it makes life easier for people with disabilities, unless there are some of which I'm unaware. Primarily this is an inconsistently followed convention.


4. "Images need alts which match image text and provide any additional information supplied by the image. alt="" is acceptable if the image is purely decorative, but it’s better to use CSS to put decorative images in a background"

I would add a specific comment to never leave the alt out. Other notes that I've had to give people about alt text include:
- Don't trust the alt text provided by authoring tools; they often use the filename or something else nonsensical.
- Good alt text is context dependent, and an image which is decorative it in one place and might be described as "figure of a man" in a second place might be described as "President Theodore Roosevelt riding his horse two days after his inauguration" in yet a third. The best resource I've ever seen to explain this is the webaim page on context: http://webaim.org/techniques/alttext/

5. I also think it's worth mentioning to people that the title attribute on images is inaccessible to all keyboard-only and many screenreader users. Somehow it's gotten out there that the title attribute is an accessibility tool, and people keep putting vital information in it.

6. "Disable images and check that <alts> are accurate and helpful"

This is excellent advice. I would modify the phrase slightly to "disable images and check that you can still navigate the site and understand all of the content." That's the functionality being sought, rather than the technical requirements for having accurate alternative text. This also might be a useful place to explain how to disable images, since it's only trivially easy in Opera. One piece of advice might be "install Opera", but you can also advise that they install an accessibility toolbar such as WAVE (<http://wave.webaim.org/toolbar>;) or the UIUC toolbar (<http://firefox.cita.uiuc.edu/>;) for Firefox. This will make all of their tests much easier.

7. "Check that it’s possible to access all information by tabbing through the site and using the enter key to “click”."

I would rephrase this as "Check that the site is keyboard accessible. In most cases, this will mean tabbing from link to link, and selecting links and form fields with the enter key."


It also might be worth mentioning that this list is a *starting* point for someone new to accessibility, and pointing your audience to various good next links: WebAIM, an introduction to WAI-ARIA, etc. Actually on that note, I would add "If your page is dynamic, use WAI-ARIA controls to report AJAX changes to screenreaders and other adaptive technology."

-Deborah