Last week, I attended a very intense two-day JAWS screenreader hands on training session provided by Freedom Scientific, the maker of JAWS and other related products. As one might expect, this was a very intense session, but also invaluable for helping me understand the needs of that community and which “fixes” are absolutely vital.
Must Have: Image ALT Tag
The ALT tag remains one of the most important devices to be implemented. In fact, the instructor spent a lot of time on not using it, but explaining good vs. bad ALT tags. An ALT tag should descriptive, but doesn’t have to describe every color, position and effect in the image. Nor does it have to say “image of” because JAWS announces every image as “graphic” (I know because I heard it a lot).
For instance, it’s important to know if an image is a logo and what the logo is (e.g. Penn State, NBC…) If it’s a link, then the destination is important to note (e.g. Penn State Home Page). However, it’s not necessary to convey the color and style of the logo in most cases.
Must Have: Headers and Subheaders
A guideline that isn’t always publicized is the the use of H1/H2/…H6 tags in a Web page. These provide important landmarks that visitors use to navigate between sections of pages. For instance, if you hit a news site and want to scan headlines and sections, making them headers speeds up the process enormously.
Without headers, visitors with screen readers will have to read the entire page line by line. You can pass an accessibility checker this way, but your customers will NOT thank you for it. (Just like it’s a lot harder to read an entire page of 12 point text).
Less Important: Header Nesting
It’s a good idea to nest levels (i.e. 1 H1, then H2 then H3…), but even if they are not nested, a screen reader user can still take advantage of any header in the page.
Must Have: LABEL Tag for Form Controls
How does a visually impaired user know what to put in to the “Edit” box? It’s in the LABEL tag. You can use images (e.g. magnifying glass for “Search”) as cues, but the image should have an ALT tag an be embedded in a LABEL tag. You can use default tag in a text field in a control in a pinch, but it’s not as clear as a LABEL tag.
By the way, you can add help text outside a LABEL field, but if a user decides to skip from form control to form control, only the LABEL tag will be picked up, so be a little cautious here
Must Have: GO Button
A script which sends you somewhere else as soon as an option is selected is NOT a good idea for a number of reasons. The JAWS user needs to hit each option in order to read it, and the rest of us may be making mistakes. A second GO button is much safer for the JAWS user. To give you an idea of how dangerous autosubmit is, we found out the hard way that a bus company will switch you to their Spanish page via autosubmit.
Must Have: TH for Table Headers
The descriptors for columns and rows should be in TH cells and should be on the very top and left. JAWS will be able to read the column (and row) name for any cell depending on
Also Horrific: ROWSPAN
Every Web designer has been tempted to collapse cells via colspan or rowspan, but if you collapse cells vertically (via rowspan), particularly the leftmost column, you will find that a whole bunch of rows begin with “blank”. Not pretty.
I would also avoid COLSPAN, but it’s not quite as bad in most cases.
Less Important: SCOPE
JAWS does not appear to actively the “scope=row/col” attribute for simple tables, but they are still a good backup. I would also add a CAPTION tag for every table and SUMMARY for many tables.
Must Have: Unique Link Names
Using “Click Here” or “Read More” instead of more descriptive names like “Accessibility” or “Read More about Accessibility” may seem minor, but again links are good navigation points on some sites, particularly a home page or site map. Repetitive links remove another set of useful shortcuts that visitors on screenreaders rely on.
We ran into one news site which had no headings and only “Read More” links. The navigational shortcuts completely failed and the only way to get any information would be to read it line by line. With many news sites, this is very tedious.
Less Important: STRONG tag over B
People argue about which to use from a standards perspective, but the truth is that JAWS doesn’t recognize either of them by default. The same is true for I/EM. This is a little scary actually since we normally use these to highlight items such as warnings, but a header could be just as effective here
Other Lessons
There were some good lessons I learned including:
- You can pass a standards and accessibility report and still not be a screen-reader friendly page. I am moving more towards supplementing my accessibility reports with manual checks and JAWS checks.
- I need to revamp some of my “accessible” pages.
- I’m still to chicken to turn off my monitor and use just a screen reader.
But, I think the most surprising lesson is that I really loved some of JAWS keyboard shortcuts. If I could disable the voice, I would love to be able to call up a list of headers and tab down through them. It’s a lot faster than moving the mouse. I already tab through form fields and use as many keyboard shortcuts as I can (pre-carpal tunnel makes you do that). This is more of the same.