Configuring your website to work with JAWS

These are the Top 10 tips to making your website accessible to the blind or visually impaired using the world’s most popular screen reader.

Is your website optimized for screen readers? Have you tested it lately? Many webmasters don’t take into consideration design methods that allow visitors with disabilities to easily use their website.

By refraining to follow industry guidelines, they’re completely cutting off a significant portion of the population from accessing their online presence. While there are many levels of accessibility webmasters should follow, here are my top ten tips to making your website easier to use to blind and low-vision visitors:

1. Design your website completely in Cascading Style Sheets (CSS). Don’t simply use CSS to adjust colors, instead, use it as your design mechanism. Do not rely on the HTML code for design. Screen readers usually ignore CSS and read the HTML that is written on the page.
2. Don’t use color as your only method to describe information. If you must provide emphases to your content, use the STRONG or EM tag, and style them appropriately in CSS.
3. Include an ALT attribute within every IMG tag. This will read the description of the image instead of skipping it. This is also very helpful for Search Engine Optimization (SEO). You can also use the LONGDESC attribute if the description is longer than one sentence. While we’re on this topic, avoid using Image Maps if at all possible. They can be a nightmare.
4. Properly layout HTML tables so that screen readers understand the content the way it is intended to be understood. Begin by identifying the table using the CAPTION tag for the table’s title. You can use CSS to hide this caption if necessary.
5. Add the SUMMARY attribute to the TABLE tag and thoroughly describe what the table is. While we’re on the topic of tables, try to keep them as simple as possible. The more complex they are, the more difficult it is for blind people to understand them. Also, refrain for using tables to layout a webpage. Use the DIV tag and CSS properties to design page layouts instead.
6. Use the TH tag for all table headers and the TD tag for all table columns. Ensure the TH tag has an ID attribute that corresponds with the TD tag’s HEADER attribute.
7. To make things easier to understand, use the THEAD, TBODY, and TFOOT to group rows of a table. You can also use COL and COLGROUP to group columns of a table.
8. Make sure that you use a text-equivalent for anything that is not readable by a screen reader. This includes the NOSCRIPT tag for browsers that are not compatible with JavaScript, Applets, or Flash.
9. Ensure that all form elements are properly labeled with a LABEL tag and a corresponding FOR attribute for each form element’s ID attribute.
10. Use H1 – H6 tags to organize a hierarchy for your content. Properly label all paragraphs with P tags, and ensure every page has detailed TITLE and META tags. This is also an SEO must.

Here are a few bonus tips:

• Allow navigation skipping so that blind users can skip straight to the content. You can do this by creating a bookmark with an anchor tag where the content begins and linking to that bookmark. If you do not want regular users to see the navigation skipping capability, simply surround it by a DIV tag, style it “position: relative;” and align it to -1000px to the left.
• Use the TITLE attribute wherever possible, but remember that JAWS does not read the TITLE attribute by default. It has to be manually configured by holding INSERT-V, and adjusting the clickable elements setting.
• Avoid using FRAMES and IFRAMES if at all possible.
• If you do not have a copy of JAWS, try using a text based browser to navigate around. Such browsers include: Lynx, WebFormatter, and IBM Home Page Reader.
• Another workaround is to use the Mozilla Firefox screen reader emulator: Fangs. This extension creates a textual representation of a web page similar to how the page would be read by a modern screen reader.
• If you’re testing with JAWS, make sure you’re using the proper keyboard shortcuts. The number one mistake testers make is using the TAB key to navigate around a website. JAWS utilizes hundreds of possible key combinations to browse the web, so the TAB key is not always your friend.

While this article is intended for website owners using JAWS, the content is always relevant for users with Window-Eyes, EMACS Speak, Hal, MAGic, SuperNova, and ZoomText.