Episode 5: e-Learning Accessibility For Training Managers and Human Resource Professionals, Part 2
Print
[music]
Announcer: SyberWorks podacst. Learn any time, any place.
Mary Kay Lofurno: Welcome to the next segment of e-Learning Accessibility for Training Managers and Human Resource Professionals, which is part of the SyberWorks e-Learning Podcast Series. My name is Mary Kay Loforno. I'm the Director of Marketing here at SyberWorks, and I'm your host today. In the first segment of our miniseries, we provided some background on the American Disabilities Act, Section 508, and an introduction to the W3C Accessibility Guidelines. In today's segment, we will be discussing W3C's Level one or Priority one Accessibility Checkpoints. Throughout this miniseries, I will be talking with Al Lemieux, Senior e-Learning Developer here at SyberWorks, and frequent contributor to the Online Training Content Journal blog about e-Learning accessibility.
Hi, Al. How are you doing today?
Al Lemieux: Great. How are you, Mary Kay?
Mary Kay: Terrific. Are you ready to dive into our topic?
Al: Absolutely.
Mary Kay: Okay, so let's talk about the parameters of the Priority one Checklist.
Al: Okay, no problem.
Mary Kay: The first one is provide a text equivalent for every non-text element via alt, long descript or in element content. This includes images, graphical representations of text, including symbols, image map regions, animations (e.g., animated.gifs), applets, programmatic objects, ascii art, frames, scripts, images used as bullets in a list, spacers, graphical buttons, sounds played with or without user interaction, stand alone audio files, audio tracks of video and video.
Al: Within the actual coding of the page, you must provide a text equivalent for anything; someone who is blind or impaired would have trouble seeing, like images, animations etc. For those of you who know html, you will use the alt or long description tags or attributes.
Mary Kay: Any other tips or things you would like to say about Point one in the Checklist?
Al: Usually adding an alt attribute is sufficient for a short description of the non-text element. The long descript attribute provides a link to a separate page that contains a lengthier description.
Mary Kay: Okay, Al. What about the next one: Ensure all information conveyed with color is also available without color, for example, from context or markup. What does markup mean?
Al: This one is common sense but it needs to be stated because most instructional designers or online course developers don't always keep this in mind. Markup refers to the code behind the web page. The current standard, for example, is XHTML 1.1, which is extensible hypertext markup language. This standard uses xml as part of its base to allow pages to be ported onto multiple devices, not just browsers. An XHTML document can also be read on mobile phones, PDAs and other handheld devices.
Markup languages have been around for a lot longer than the XHTML. My first employer out of college had an old WAN laboratories computer with a green screen and no mouse that was strictly designed for markup purposes. Simple tags would describe a piece of text as being bold or italic, for example. Tim Burners Lee, the inventor of html used existing markup concepts in order to further html markup. The browser companies continued to add on to his initial markup language, which forced developers to recognize proprietary code in design websites from multiple browsers. The XHTML standards in the web standards movement fostered by Jeffrey Zeldman, Molly Holzschlag and others, brings the markup language back to a code base that works in all browsers.
Mary Kay: Anything else you would like to say in regards to this point?
Al: Developers who adhere to web standards have a better chance of their pages being valid and accessible. So you'd be meeting two objectives with one movement, a move towards standards based design. Jeffrey Zeldman, who I mentioned before, has an excellent book entitled, “Designing with Web Standards” that helps developers see the value in developing standards based sites in using standard markup techniques. It's an excellent resource.
Mary Kay: Here's the next checkpoint: Clearly identify changes in the natural language of a document's text and any text equivalent (e.g., captions). What is this referring to?
Al: This is actually referring to the language of the XHTML that's being used during your pages. There's a LANG attribute of the html tag and XHTML that does this. Usually you set it for EN for English. That can be set to other languages to facilitate the use of other languages. It also refers to the ABBR and acronym tags that can be used to surround abbreviations and acronyms on a page. A screen reader will read either item, letter by letter, but not give any definition of what that abbreviation or acronym means. Using the ABBR and acronym tags solves that issue.
Mary Kay: Okay, sounds good. What about the next one: Organize documents so they may be read without style sheets. For example, when an html document is rendered without associated style sheets, it must be possible to read the document. For those who don't know, what is a style sheet, Al?
Al: Style sheets fall under another type of coding called CSS or cascading style sheets. A good summary of current web standards follows this advice: separate content from style. This is achieved with XHTML markup for the content in a style sheet for the formatting of the page. Html had some basic formatting tags to style content, but those tags bulked pages up in size. Especially the font tag, it didn't give any meaning to the markup. The markup conveys meaning not just structure, which aids in accessibility. For example, closing an address on the contact page of your website with the address tag. Style sheets can either be inline with the markup, embedded with the html header or as an external file link to the page. This last option affords the developer the flexibility to alter the style sheet to change the pages formatting without having to alter the markup.
The CSS Zen Garden, www.csszengarden.com, is a beautifully designed web project that invites developers to use style sheets to change the look of its pages. It's a remarkable testimony to what's possible with style sheets.
Mary Kay: Next: Ensure that equivalence for dynamic content are updated when the dynamic content changes.
Al: OK, by “dynamic content,” the W3C means that any embedded scripts, applets, or media in a page should have a text equivalent, so that if a user has turned off their browser's ability to use these items, they can still understand the intent or message of the embedded items. Let's say, for example, you have a JavaScript snippet in your page that calls to an external database to display current stock market indexes. You would use the NOSCRIPT tag to display a text equivalent. Obviously the text equivalent wouldn't be an accurate representation of the current stock market index, but you could display a message that tells the user to enable JavaScript in their browser. This one also requires that frames in a frameset are named appropriately, and that their source documents should be HTML pages rather than images.
Mary Kay: OK. “Until user agents allow you to control flickering, avoid causing the screen to flicker.”
Al: Some people with photo-sensitive epilepsy can be affected by flickering or flashing in the four to 59 flashes-per-second range, so avoid using the BLINK tag, probably the worst HTML tag ever invented, and quickly changing GIF animations or Flash movies. If you are going to use animations on your page, provide a way for users to stop the animation from continuing.
Mary Kay: All right then, here is the next one. “Use the clearest and simplest language appropriate for a site's content.” Well that one is self-explanatory, but it is one of the things that, while it makes sense, is a lot easier said than done.
Al: Absolutely. The W3C actually provides a list of recommended writing styles to accommodate this rule.
Mary Kay: OK, super. In a context where image maps are used, what does “provide redundant text links for each region of a server-side image map” mean?
Al: If a user is using a text-only browser like the Lynx browser, or if they have images turned off, they will never see your image map, and therefore won't be able to navigate through it. Some web sites have included their main navigation system as an image map. In that case, the user would be completely lost. The W3C recommends that you include a list of text-based links that are equivalent to the links that appear in your image map. It also suggests that you use the alt attribute of an image in the image map to point out that there are link equivalents for the image map.
For example, a web site that displays a map of the United States that allows you to see the number of retirement communities in each state. You click on a state on the provided map, and it links to a page that gives that state's information. You would also want to provide a list of text-based links below or near that map which provides the same function. Thus the word “redundant.”
Mary Kay: Under this category, where images and image maps are used, it also says, “Provide client-side image maps instead of server-side image maps, except where the regions cannot be defined with an available geometric shape.” How does that work?
Al: I don't know anyone who uses a server-side image map anymore, but if you are going to use one you should include the alt attribute and a list of links within the OBJECT tag that is used to display the image map. You use the A tag or the ACTION tag instead of the AREA tag to achieve redundancy.
Mary Kay: OK. Tell us about the accessibility requirements involved for Priority One compliance if you are using tables.
Al: Tables are tricky, because the original use of tables was supposed to be for data tables only, but some developers use tables to lay out pages. The minimal requirement for Priority One compliance is to use TD tags for data cells, TH tags for headers. A table structure is invisible to an empiric user, therefore it is important to include the SCOPE attribute to identify the table's columns and rows.
For example, the first row of a table will include the headers for the columns of the table. You would use the TH tag for this row of cells, with a SCOPE set to COL, short for column. In the subsequent rows, you can use the TD tags for each cell, and use the SCOPE tag to set the first cell to ROW. In addition, you need to include the SUMMARY attribute for the TABLE tag. The summary should describe the table to the user. When the JAWS Reader, for example, reads a table to the user, it will describe the table by using the summary. If no summary is present, it will just say, “Table.”
For more complex tables, you can use the THEAD, TBODY and TFOOT tags, which define those areas of the table. Again, this is only necessary if the table isn't, for example, a straightforward six-row-by-six-column table.
Mary Kay: That's good. What are the accessibility requirements involved for Priority One compliance if you are using frames?
Al: Frames are an effective way to deliver a web site, especially if some content is going to be static, like a banner and a navigation system, and other content will change, like a content frame. The W3C recommends that you include the TITLE attribute for each frame. So a banner frame might have a title of “Banner” or something more descriptive. It's like an alt attribute for an image, only you use it for frames.
Mary Kay: OK, on to the next section in Priority One requirements. In regards to applets and scripts, it says, “Ensure that pages are usable when scripts, applets, or other programmatic objects are turned off or not supported. If this is not possible, provide equivalent information on alternative, accessible pages.”
Al: Well, we already discussed this one.
Mary Kay: Yes, you're right. Why don't we finish out the last three?
Al: Well, the next two rules require the use of captions with any multimedia element or presentation. In the first case, for the visually impaired, you would use an audio track to accompany an onscreen presentation, that accompanies the onscreen text. In the second case, you use captions for the hearing impaired, usually that accompany the audio track of a presentation. There are programs and services that will create captions for video to be displayed on the web, for example.
In the final rule, if there is a reason why your page cannot conform to the guidelines, you would provide the user with a link to a second page that did meet the guidelines. That page might not have the same visual appearance, but will provide the impaired user with the information that they need. This is more trouble than a solution that follows the other rules we've discussed, as you would need to create alternative pages for all existing and new content. It is easier to create a site once that conforms to accessibility guidelines than to create two separate sites.
Mary Kay: Al, I know you have to go. Thanks for joining us today.
Al: Thank you.
Mary Kay: All of the web sites we have discussed today will be available in the transcript for this podcast, located on www.syberworks.com/elearning_podcast.htm, in the SyberWorks Media Center. In the next edition we will be covering W3C Priority Two checklists. I just want to thank everyone for listening today. Have a great month.
[music]
