Creating a Blind Friendly Website for Jaws

I have already touched on making web pages colorblind friendly, so now to focus on creating pages which are blind friendly.

Creating pages which are blind-friendly will increase business, but also help deter a possible lawsuit. Target was a very popular story when they were sued, alleging “that Target’s Web site is inaccessible to the blind, violating California civil rights and disability law. “as per The Wall Street Journal.

The most commonly used screen-reader software is Jaws, which can be downloaded as a free trial version.

The most useful for common visitors

• title attribute – not as important, but good for some readers. Besides, it is nice to have for the colorblind. Try to use it on all important links.
• Use the alt attribute on all images which are not decorative, otherwise still use it, but leave it blank. The alt text should describe the image and contain all text within it.
• tabindex (0,1,2,3…) -1 to ones you don’t want the tab to stop at. The tabindex will also help those without a mouse. For the blind, the tabindex works wonders to help find important links. When a word or input box is highlighted by the tab button it is read by the screen reader.
• Use the label tag on all inputs. It is what is read by the screen reader when the input is highlighted.
• Use text which is easily seen on its background. Dark grey on black is not easily read, neither is green on red background or red on green background.

Great books on web accessibility

What WCAG 2.0 says

• Images should have an empty alt attribute if it is a decorative image.
• Use longdesc within an image to link to a long description of the image. This is very poorly supported by browsers.
• Use a longdesc d-link. Basically a link after the image which links to the long description of a page. For example:
  <img src=”blahblah.png” alt=”A cow mooing” /> [a href=”longdescd” title=”Long description of A cow mooing”>D
• For all content text which refers to an image, it doesn’t refer to the image by color alone.
• All input’s which have an image also have an alt attribute.
• All area tags have an alt attribute.
• area that links to a sound clip must have a complete text transcript.
• alt text for images and areas must contain all text within the image/area unless it is decorative.
• alt text for inputs which have images describe what the image is for.
• Images which are used as source anchors for links must have different alt text than the link text.
• The source for each frame is accessible content.
• Each input contains a label associated with it and describes the input.
• All input elements with the type of text, password, checkbox, file, and radio have an explicitly associated label.
• All radio button groups are marked using fieldset and legend elements.
• legend text is not empty or whitespace
• legend text is not placeholder text
• legend text describes the group of choices
• all p elements are not used as headers
• The header following an h1 is an h1 or h2 (yeah, I would go for h2 following an h1 since only one h1 should be used per page.)
• Header following h2 is h3 or anything less than h3 and so on.
• All headers (h1,h2,h3, etc) are not used for formatting.
• All data table elements have a summary attribute.
• All data table summaries contain text.
• All links in all client side image-maps are duplicated within the content.
• The marquee element is not used.
• Nested ordered lists should use style to convey list depth.
• Content contains a title element.
• title contains text.
• title is not placeholder text and is descriptive of the content.
• Content has required lang attribute(s).
• Content has valid language code.
• All frames have a title attribute.
• All frame titles are not empty, do not contain placeholder text and identify the purpose or function of the frame.
• alt text for all area elements identifies the link destination.
• Each source anchor contains text.
• All source anchors contain text that identifies the link destination.
• All select elements do not cause an extreme change in context.
• HTML content has a valid doctype declaration.
• Image alt text is short.

W3C has a long page about WCAG 2.0 (20,800 words).

Site to test your site for web accessibility: TAW3

A list a part discusses the crapability that is WCAG 2.0. They argue that although it has many fine points, it also leaves us hanging. WCAG uses many words which are confusing, so it is hard to understand what most means.

If you enjoyed this post, please consider subscribing to my full feed RSS.

Related Articles:
After Christmas Link Love
Make Your Site Colorblind Friendly
Creating Brand Awareness with favicon
How to Hide Affiliate Links
The Twelve Best Articles on Linkbait

RSS feed | Trackback URI

Comments »