Episode 6: e-Learning Accessibility For Training Managers and Human Resource Professionals, Part 3
Print
[music]
Announcer: SyberWorks podcast. Learn any time, any place.
Mary Kay Lofurno: Welcome to the next edition 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 Lofurno. I am the Marketing Director here at SyberWorks, and I am your host today.
In the first segment of our mini series we provided some background on the American with Disabilities Act Section 508, and an introduction to the W3C accessibility guidelines. In the second segment, we discuss the W3C level one accessibility checkpoints. In today's segment, we will be looking at the W3C's level two accessibility checkpoints.
Throughout this mini-series, 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. Good afternoon, Al.
Al Lemieux: Hi Mary Kay.
Mary Kay: Nice to see you again. Are you ready to get started?
Al: All right, sure.
Mary Kay: All right. On to the checklist for level two accessibility. First, we'll look at what is classified at general checkpoints. Next, using tables, frames, and forms. And finally, using applets and scripts. So it says: ensure that foreground and background color combinations provide sufficient contrast when viewed by someone having color deficits or when viewed on a black and white screen.
Al: Some people, especially men, are colorblind. A problem color, for example, is green. But whatever the color, you should use colors that are complementary. This is where we get into the sticky nature of these guidelines. Let's say that your corporate colors are green, or another color that falls into a category that is problematic for colorblind users. How can you remedy that problem? Also, what about users who only view pages on a monitor that displays only black and white? There's not a lot of attached in this rule by the W3C, so it's really a guideline. My advice is to use a common sense approach to colors. A good designer will have the ability to use color theory and color sense in order to select appropriate colors in the design. If everything is bright fuchsia, then there's a problem.
Mary Kay: I would think so. Alright, what about this one? When an appropriate markup language exists, use markup rather than images to convey information.
Al: Well, a screen reader will read text and provide emphasis and meaning to that text, wherever the markup indicates. For example, something that is bold may be read differently than something that isn't. An image can't convey such meaning. This is an overarching concept that relates to something that I talked about in the first podcast: semantic markup. Obviously, images have a place in web design, and this rule doesn't say: don't use images. Rather it's really trying to get at the use of information within a given page. Using appropriate markup structure is an important first step in properly conveying the meaning of the actual text. The use of block quote, address, strong and other tags can aid in the reading of text by a screen reader. Images don't have equivalent text to convey meaning.
Mary Kay: OK, on to the next one. Create documents that validate to published formal grammars. What does validate mean here in this context?
Al: I'm glad you ask. HTML comes in many flavors. Giving the user agent, the browser, the means to understand the flavor of html is important. The information that conveys this to the browser is the doc type. The doc type is a tag that tells the browser which version of html is being used in the document, and where the definition of that version is on the web. Without a doc type, it's impossible for the page to be validated. The W3C has a validation service for developers at validator.w3.org. The doc type shows the user agent not only which version of html is being used, but also what validation rules apply to that version. Getting started with web standards includes using the right doc type.
Mary Kay: All right, I get it. Here's one I know you felt passionately about. Use style sheets to control layout and presentation.
Al: Of course I do. This goes back to the concept of separating structure from presentation, or content from style. Style sheets replace that duplicated html formatting tags, like the font tag. Style sheets are also capable of more than formatting text. They can be used for page layout and optimal output. For example: a style sheet can format a page for the use on a mobile device, another can be used to format a page for printing. Style sheets offer text control that html never could. I could go on and on about the benefits of style sheets. The bottom line is, use them.
Mary Kay: OK, what about: use relative rather than absolute units in markup language, attributes, values and style sheet property values. I know the difference between an absolute link versus a relative link, but I'm not sure what these terms mean here.
Al: This one is a departure from the level one guidelines for sure. Most developers count on using exact pixel measurements in order to line up elements and position items on a page. We tend to be control freaks when it comes to where an element appears on a page. That would be the absolute part of this rule. If I tell a table to be 590 pixels wide, it would be that size. The relative portion of this rule says not to use exact units. So instead of the table being 590 pixels wide, it would be 60% of the browser window width. Likewise, for stylesheets, you would use ems or percentages in order to size text elements. The idea behind this rule is to make the page more flexible and multiple platforms. Font sizes for example are different from the Mac to the PC platform. There are browser preferences that give users the ability to change the preferred text size. Being more flexible in the page design allows the end user more flexibility in viewing the document.
Mary Kay: all right. On to the next one. Use header elements to convey document structure and use them according to specification.
Al: This actually fits into your area of expertise too, Mary Kay. When you read a newspaper, you'll see a headline and then the body of the story. Some headlines are larger than the others, and therefore the newspapers conveys a level of hierarchy for the stories presented on its front page and interior. This is a widely understood convention, and it's used in advertising as well. In html, there are six header elements, h1 to h6, that are meant to be used as headers for content. An h1 tag carries a higher weight than an h6 in terms of search engine optimization. But it also conveys a higher weight to the user.
Mary Kay: Yes, that's true. Let's do the next two together. Markup lists and list items properly. Markup quotations, do not use quotations markups for formatting a fact, such as indentation.
Al: Right, that also plays into semantic markup, where you don't want to use lists for visual effects such as indentation. A list, either an ordered list or a numbered list, in an unordered or bulleted list, should be used to list textual items in a sequential order. Lists become a little bit more complex when they become nested. There isn't a widely accepted method to handle this level of complexity yet, but I'm sure it will be coming in the future.
Mary Kay: This one sounds like common sense. Ensure that dynamic content is accessible, or provide an alternative presentation or page. For the folks out there who are not familiar with the Internet, what does dynamic content mean?
Al: There's a bunch of things that fall under this rule. The first is using the title attribute on links. The title attribute on links can be read by any browser as a hint to the destination of the link. The next thing is using the no frames tag in any frameset pages, for all the versions of browsers that do not support frames. I don't know why anyone wouldn't want to update their browser or stop using Internet Explorer 3, but it is all still possible. Finally the rules that apply to scripts and embedded objects apply here. Whereby you need to provide text alternates to those elements when they appear on the page.
Mary Kay: The next four checkpoints refer to user agents, and their control of various design coding properties. So why don't you tell us about them?
Al: OK. The first and second points warn against using blinking elements without a way to stop them. Don't do it. Resist the temptation to build honky, blinking, animated gif's to attract user attention. Studies have shown how users interact with pages and avoid areas that commonly show advertising.
The next point is about the http refresh metatag capability. You can set this to replace the current page after a certain amount of time in milliseconds. For example, you may have visited a site and been looking at its home page, which only displays an image. Then without any action on your part, the page switches to another page that displays more information. The W3C recommends the use of a serversite technology to push the new page, rather than using the metatag. It's important to note here that AJAX and similar technologies allow interactions that don't change an entire page, but only a portion of the page. It will be interesting to see whether or not that's described as accessible.
The last point warns against the use of pop-ups, which almost seems like a moot point since a lot of user agents have pop-up blocking built into them. It's not only pop-up windows, but any link that uses the target attribute to spawn a new window. This rule seems a bit harsh, but in the long run it's an important reminder to developers not to use pop-ups.
Mary Kay: It makes sense. The next two checkpoints are about using W3C technologies. What do they mean by: use W3C technologies when they are available and appropriate for a task, and use the latest versions when supported. And avoid depreciating features of the W3C technologies.
Al: A new developer using the current technologies and standards promoted by the W3C and other groups, probably isn't using any code that is deprecated. But developers working on legacy sites with old markup would have to convert those sites into standards space and accessible pages. The W3C has a list of html tags and provides information about which have been deprecated. Examples of deprecated tags include the font tag, u for underlying text, and the center tag to center elements on a page. All of these tags, and the others that have been deprecated, have either been replaced by other tags, or more likely by CSS definitions.
Mary Kay: All right Al. I'm going to give you a break and let you catch your breath on the next one, because it's pretty self explanatory. It says: divide large blocks of information into more manageable groups, where natural and appropriate.
Al: This rule is not only about literally groups of information, but also about how you manage form elements such as select items, radio, and checkbox groups. For select items with multiple groupings, you use the opt group tags to surround options within a group. For radio and checkboxes, you use the field set tag with the legend tag to define the question. A multiple choice question, for example, could have five choices. The entire question would be surrounded by the field set tag, and the text of the question would be enclosed by the legend tag. Field set could also be used to group sections of a form. For example, one part of the form might be collecting personal information, another could be about products, etcetera.
Mary Kay: This is also the application of what is called chunking. Breaking up groups of similar types of information in smaller, more manageable chunks or groups. This one makes sense to everyone, but it's really funny how often it's just not done.
Al: Yes. You're right.
Mary Kay: OK, Al. Break's over. Last three in the general section are about metadata, site layout and navigation.
Al: In the head section of a html document, there should be a set of minimal or typical metatags that contain information about the pages language, a description of the page, and keywords. But this rule also covers the inclusion of a doc type tag, and a mandatory title tag. Basically, the header of your document should be well formed.
The sections for layout and navigation recommend using consistency and predictability in your design to help the user experience. This seems very basic at first, but I'm sure you can think of several websites that you visited recently, where you might have clicked on a link from one page and were presented with a page from the same site that looked totally different. Or you might have clicked on an item in a menu, and than that item disappeared from the menu. Navigation is the key to successful website communications. If you present a navigation bar on the left side of one page, then on the next page placed on the right side, you're doing the service to your users and they're most likely to get lost.
Mary Kay: OK. Now on to level two priorities applying them to the use of tables. It says: do not use tables for layouts unless the table makes sense when linearized. Otherwise, if the table does not makes sense, provided an alternative equivalent - which may be linearized - and if table is used for layout, do not use any structural markup for the purpose of visual formatting. What does linearized mean and why is that important now?
Al: By linearized, the W3C means that the table should be created in such a way that it is easily read. For example, a screen reader will read a table from left to right. If your table contains a lot of column span and row span attributes, it doesn't contain a consistent flow, then it will be difficult for the impaired user to understand the content of the table when the screen reader reads it to them. Many developers, particularly in the web standards movement, crying out for the death of tables for layout purposes. There's no real reason to use a table for layout anymore, because of style sheets and CSS positioning. I'll say it again: tables are for data.
Mary Kay: All right. What about level two compliance when frames are used? What's important here?
Al: This basically requires the use of name and title attributes, and if necessary the line description attribute to better describe the use of frames and a frameset and their relationship to one another. A screen reader will announce the existence of frames and then read their contents. If a frame has no title, than the screen reader doesn't give the impaired user enough information about the frame and what it's for. Surprisingly, screen readers do an excellent job of reading framesets.
Mary Kay: OK. On to level two requirements when using forms.
Al: These are pretty much the same as those in priority one. Use labels, fieldsets, legends, optgroups, et cetera, to better manage forms. By the way, most forms are created in a table to aid in the formatting of the form, even though it's possible to do this with style sheets. So this rule echoes some of the previous rules focusing on the readability of the form from left to right and down the page.
Mary Kay: OK. What about level two requirements when using applets and scripts, Al?
Al: Again, same as in level one. But this level emphasizes the use of tools that provide information to the user, even if the script functionality is disabled by the user. For example, I can designate an on mouseover on a link that would trigger a job descript call to the user agent's datafile to provide information about that link. This technique is also used to hiding links that point to CGI scripts on the server. If job descript is disabled however, the on mouseover event will not occur. If the information that the on mouseover event conveys is important, then there should be another way to present it. In this case, you could use the title attribute on the link to convey that information to the user.
Mary Kay: This is all really great stuff. I know you have to run along, so that's it for today. Remember that all the links and resources mentioned today will be available in the transcript for this podcast located on the www.SyberWorks.com/elearning_podcast.htm page in the Media Center of the SyberWorks website.
In the next segment of our mini series on the e-learning accessibility for training managers and human resource professionals, we'll be talking about W3C's level three accessibility checkpoints. Until then, this is Mary Kay Lofurno and...
Al: Al Lemieux from SyberWorks. Have a great month.
[music]
