|
|
|
|
The speech synthesizer will read the alt tag information and then the links. Invisible to the sighted user, this trick is invaluable to those trying to make sense out of a series of seemingly unrelated words being spoken by a speech synthesizer. You could also use a bracketed layout, like this: [link] [link] [link]. The speech synthesizer will read this as, "bracket link bracket bracket link bracket bracket link bracket." Using ALT text is the primary method of explaining graphics used on the site. If the image is just decoration, use the description "" so the speech synthesizer will ignore it. If the images are links placed next to each other, make sure the ALT text has a trailing space, or is surrounded with brackets. Otherwise, the speech synthesizer will attempt to read all the alt texts as one long word. If the graphics are image maps needed for navigation or information, be sure to label each section with the appropriate ALT text and make sure the information is available in another way as well. Consider using good sized buttons as the alternate method of access. This provides help to those with motion impairments who can’t click on a small area of a map as well as those that need the visual cues. Page layout and navigation should be consistent on all pages, i.e., always on top or on the left. This will aid visitors using small screens such as telephone devices, as well as visitors with special needs. If your links are going to open a new window or activate a Java-Script, make sure and tell that to your visitors. Clearly labeled navigation is important to all users, not only those with special needs. While not underlining your links but showing them in a different color looks really cool, it is confusing for new users of the net who are looking for underlined links and impossible to interpret for users who are color-blind or using a black and white display. Use color carefully. Approximately 8% of web users have difficulty distinguishing colors to some extent. Your colors should not be so dense as to appear black to a black-and-white screen, nor so alike in value as to appear identical to viewers who can’t differentiate between red and green, the most common form of color blindness. The foreground and background colors should contrast sufficiently with each other. Don’t use mystery links. If you need to put your cursor over a link to see where it goes, you are going to not only confuse new users of the web but also make it difficult for visitors with motion impairments. Try to stick with web safe colors - older screen readers have problems with non web safe colors. Web safe colors are easy to identify - the hexadecimal number will be three pairs of matching digits. The only digits you will see in a web safe color are: 00, 33, 66, 99, CC and FF. A logical navigation layout, besides being good design, is essential for viewers who might be learning disabled, or using a speech synthesizer. A logical design uses HTML tags that identify text for what it is and not just how it looks. For example, headings should be marked up using proper <H> tags. Speech synthesizers can read this HTML and will give proper emphasis to headings and subheadings if they are marked up with the <H> attribute. A properly marked up web page can be imported into Word with the headings (H1) and subheadings (H2 etc.) displaying as an outline. Again, a benefit for the visually impaired who may need a quick review of your site. Incidentally, images can be surrounded with <H> tags if you wish to give the images’ ALT text special emphasis. Another example of a logical markup is the use of the <EM> tag rather then the <I> tag. The <I> tag gives text an italic look. The <EM> tag gives text an italic look and an emphasis while being read by a speech synthesizer. <STRONG> works in place of <B> the same way. Also, all attribute values must be quoted, even those which appear to be numeric, as many screen readers rely on those quotes. They maybe required for sites having to abide by government guidelines fo accessibility, too. For example, a correctly quoted attribute value would be <table rows="3"> not <table rows=3>. Does your site rely on scripts, applets, plug-ins or frames for navigation and/or information? Provide a second way for users to obtain the same information. For example, audio clips should be accompanied by a transcript for the deaf user. Video clips should not be essential to the information presented on the site. If they are, you may want to consider including a hyperlink to an information page which will convey the information in a textual manner. Animated presentations should have an explanatory ALT description for the visually impaired. Don’t make this description too long, however, some speech synthesizers have size limits. Keep in mind that your text will be read straight across - if you have a picture in the middle of text, the speech synthesizer will read, "text text text picture description text text." It’s often best to align the picture to the right or left of the text so the alt description is read separately. If you really like the look of the surrounded picture, use brackets in your alt description so it will be read as, "text text text bracket picture description bracket text text." Frames are difficult for a speech synthesizer to interpret. If you must design your site in frames, label the top frame clearly with alternate navigational methods. To assist motion impaired users, navigation options should be clearly labeled and easy to click on. The words "click here" are not the best choice as a motion-impaired user may not be able to hit a target that small. Use descriptive text instead. Avoid the use of the "drop down-box-and-[GO]-button." This is an unnecessary bit of extra clicks even for people without motion impairments. If you use tables for your layout, keep all the information pertaining to a topic in one cell. Remember that a speech synthesizer will read cells next to each other in sequence. If you have information that is more than one cell long, use shift-enter to keep all the material in the same cell. Avoid very complex tables to display content, if possible. If the table is too complicated, it may confuse the screen reader. If you must use these tables, set short-cut keys and specify the tab order of your elements. Using bulleted lists are often a good way to present information. Besides being visually attractive and easier to read, numbered lists make it easier for people who are listening to the information. If you use an image as your bullet, be sure to give each image the appropriate ALT text. As a double check, run your text through a spelling and grammar checker. Speech synthesizers will always try to read a word, even if it is misspelled. Run your page through the validator at http://www.cast.org/bobby/. Bobby is a Web-based tool that analyzes web pages for their accessibility to people with disabilities. Bobby will examine your site and give you a report indicating any accessibility and browser compatibility errors found on the page. Once all the pages of your site receive a Bobby Approved rating, you are entitled to display a Bobby Approved icon. This is a real feather in your cap, so do it today! For more information, visit:
|
