Multimedia Design & Tech

Friday, February 24, 2006

Web Accessibility

With the up and coming release of Internet Explorer 7 (currently in beta 2) , it may be time to review your website and to consider moving all your code to strict (or at least transitional)XHTML and CSS layouts. Besides being immensely easier to edit and display, CSS and XHTML also allow your site to conform to web accessibility standards, such as the W3C WAI-AAA and Seciton 508 validations.
Recently, Target Stores had a lawsuit filed against them because their website wasn't accessible enough for blind and visually impaired viewers. So while I'm sure most of us out there don't have the same traffic or e-commerce demands that the target website does, it's still a good idea to start moving your site over now anyways, as you'll open up to a whole new demographic. While I can't get too in depth here on this topic, I can give you a head start on what to consider for your website to move forward into a more accessible design and layout. Here are some key features to consider

XHTML 1.0

The Extensible HyperText Markup Language (XHTML™) is a family of current and future document types and modules that reproduce, subset, and extend HTML, reformulated in XML. XHTML Family document types are all XML-based, and ultimately are designed to work in conjunction with XML-based user agents. XHTML is the successor of HTML, and a series of specifications has been developed for XHTML.

CSS

Style sheets describe how documents are presented on screens, in print, or perhaps how they are pronounced. By attaching style sheets to structured documents on the Web (e.g. HTML), authors and readers can influence the presentation of documents without sacrificing device-independence or adding new HTML tags. CSS can be validated through the W3C's free online service.

Access keys

Most browsers support jumping to specific links by typing keys defined on the web site. On Windows, you can press ALT + an access key; on Macintosh, you can press Control + an access key. Access keys can be scripted within the XHTML.


Relative font sizes

Relative font sizes (em as opposed to pixels) allow the web user to adjust the font size of the page through their browser, which is handy for low vision users.

Embedded Skip navigation link

By adding a link which allows the user to skip over the navigation bar on each page, it allows them to quickly get to your content, without having to listen to their screen reader list each link over and over again. This can be implemented using CSS to hide the link and XHTML anchors for placement.

Page language declaration

Screen reader software (JAWS) needs to know what language your pages are written in, so it can pronounce your words properly when it reads them aloud. If you don't identify your language, JAWS will try to guess what language you're using, and it can guess incorrectly, especially if you quote source code or include other non−language content in your pages.

Meaningful page titles

JAWS has a special keyboard shortcut (INSERT + F10) which displays (and reads) a list of the currently open windows, by window title. In the case of web pages, this would be your page title. It also reads the window title while ALT−TABbing through open windows. Other screen readers, like Home Page Reader, read the page title out load as soon as you visit the page.

Lynx displays the page title in the first line of output, so it's always the first thing that the user reads in Braille. Google displays the page title in its search results, and it ranks keywords higher when they appear in the page title.


Semantic Mark-up

All pages should use structured semantic markup. H2 tags are used for main titles, H3 tags for subtitles. For example JAWS users can skip to the next section within the accessibility statement by pressing ALT+INSERT+3.

Titled links

JAWS has an option to read the title of a link along with the link text. When the cursor moves over the link in a browser, it displays the title of the link as a tooltip. When you press "l", Lynx displays a list of links on the current page. The list includes the title of each link, if present.

Descriptive ALT tags for images

JAWS reads the alt text. Without valid alt text, the user hears the filename instead, which is confusing.

Lynx, as a text−only browser, doesn't display any images, only alt text. Without alt text, Lynx displays the filename, which looks as bad as JAWS sounds. When browsing with images turned off, the ALT text displays instead of the image. Internet Explorer displays the alt text as a tooltip Google also benefits. The Googlebot indexes alt text, which is used not only in matching keywords in normal searches, but also in image searches.

Complex images include LONGDESC attributes or inline descriptions to explain the significance of each image to non−visual readers.

Standards compliance

All pages should be Bobby AAA approved, complying with all the Bobby guidelines.

1. All pages should also be WCAG AAA approved, complying with all priority 1, 2, and 3 guidelines of the W3C Web Content Accessibility Guidelines. Again, this is a judgement call; many guidelines are intentionally vague and can not be tested automatically.You should review all the guidelines to make sure these pages are in compliance.

2. All pages should be Section 508 approved, complying with all of the U.S. Federal Government Section 508 Guidelines. Again, a judgement call. Don't claim the little 508 web badge unless you have validated your site yourself using the guidelines.

3. All pages should validate as XHTML 1.0 Strict. This can be tested using the W3C free online validator.

Accessibility references

W3 accessibility guidelines, which explains the reasons behind each guideline. W3 accessibility techniques, which explains how to implement each guideline. W3 accessibility checklist, a busy developer's guide to accessibility

U.S. Federal Government Section 508 accessibility guidelines.


Most of this information was adapted from "Dive into Accessibility", a free manual which covers this topic in great detail. I believe that section 508 also offers free online training through section 508.gov I have done extensive research on this topic, feel free to e-mail me with questions not covered in this blog email-me

0 Comments:

Post a Comment

<< Home