Chapter 1:
Introduction
I'm sure you've heard the word accessibility mentioned in reference to creating Web content. And I'm also sure that you have some idea of what it means. But, I also have a pretty good hunch that you don't know enough about what it means for your Web site. That's what I hope to address in this lesson.
By the end, you'll know what Web site accessibility is and what it means to you as a Web site developer. We'll examine the meaning of accessibility.
We'll learn its basic concepts and how to keep Dreamweaver on the ball, accessibility-wise, so we don't make mistakes.
Chapter 2:
What Does Accessibility Mean?
When
Web developers talk about accessibility, we're talking about Section
508 of the Rehabilitation Act. Here are the details from the
government's Web site (I've simplied some of the language a bit for
clarity):
In 1998, Congress amended the Rehabilitation Act to require Federal agencies to make their electronic and information technology accessible to people with disabilities. Inaccessible technology interferes with an individual's ability to obtain and use information quickly and easily. Section 508 was enacted to eliminate barriers in information technology, to make available new opportunities for people with disabilities, and to encourage development of technologies that will help achieve these goals. The law applies to all Federal agencies when they develop, procure, maintain, or use electronic and information technology. Under Section 508 (29 U.S.C. ’794d), agencies must give disabled employees and members of the public access to information that is comparable to the access available to others.—http://section508.gov/index.cfm?FuseAction=Content&ID=3
In short, if your Web site is directly connected to the federal government, you must follow the rules set out in Section 508 of the Rehabilitation Act. Most state and local governments adhere to Section 508 as well.
There has been a call by advocates to bring these requirements to the U.S. Federal Americans with Disabilities Act (ADA). The ADA is the act that requires public accessibility to places like hotels, cinemas, and banks. Most retail establishments voluntarily follow such rules, though they may not specifically be required to do so. To date, attempts to add Web sites to the list of venues that must conform to the ADA have been unsuccessful. Still, within the bounds of the Rehabilitation Act, many commercial Web sites follow the regulations voluntarily.
Should Every Site Be Accessible?
You could argue that a site devoted to listening to MP3 audio files or watching videos (think YouTube), by their very nature, could not be made accessible. I'd have to agree. However, if the site is a storefront for purchasing items (such as music, DVDs, and so on) or any site where about 90% of the content is textual (readable information), then you better believe you can make it accessible. Words can be read (on screen and in print), felt (using Braille tactile devices and printers), and heard (using text-to-speech synthesizers).
Think about it. If you want to go someplace or do something and there is some physical barrier in the way that could be easily removed, wouldn't you be disappointed that it wasn't? If you use that scenario as a starting point, it doesn't matter whether or not your site is municipal. If you can make it accessible, you should—don't you think?
Where to Begin?
I like starting at the beginning. So why don't we actually take a look at the law itself. The Section 508 standards as they apply to Web-based content are as follows, with some short commentary by me:
 Note In
the last lesson, we talked about text-to-speech synthesizers, Braille
tactile devices, and other technologies that help users with
disabilities use the Web. These are all examples of assistive technologies, so if you see me use that term again, you know what I'm talking about. |
If you were a little unsure about the meaning of some of those rules, that's okay. It's a government document, it's a little wordy, and some parts are counter-intuitive. For example, it talks about server-side image maps in part (e), then part (f) tells you to always use client-side images maps instead, unless there's no other way to get something done. It reminds me of tax forms!
The fact that server-side image maps went the way of the dinosaur once client-side image maps came on the scene isn't mentioned. Dreamweaver creates client-side images maps with the image map tools in the Property Inspector, just in case you're curious, so you're fine on that one. Of course, as I said, if you need to be accessible, don't use images maps. Period.
As long as we're talking about Dreamweaver, let's discuss how we can use Dreamweaver to keep us as accessibility-conscious as possible.
Dreamweaver Accessibility Features
The first step any accessibility-conscious Dreamweaver user should take is to turn on all of Dreamweaver's Accessibility prompts. This way, every time you insert an item that has associated accessibility attributes, Dreamweaver will prompt you for their values. Let's turn those on now. Here's what I'd like you to do:
Preferences dialog box
There are four types of content for which you can ask Dreamweaver to prompt you for accessibility information:
If you don't have all four selected, please check them now, and then click OK.
| Note Windows users have two more options that don't pertain to Web content but to Dreamweaver itself. The Keep Focus In The Panel and Offscreen Rendering options are for Dreamweaver users who themselves use screen readers (text-to-speech synthesizers) while working in Dreamweaver. Mac users have OS-specific accessibility features, so the Mac version of Dreamweaver doesn't have these options. |
Obviously there's more to accessibility than a handful of attributes. But just by turning these settings on, you've taken care of rules (a), (b), (i), and (n). Every time you insert an image or multimedia object, create frames-based content, or lay out a form, you'll be prompted to enter the required accessibility information.
Okay—that's four of 16 issues covered. What about the rest of them?
Lets move on to Chapter 3 and discuss what else we can do.
Chapter 3:
CSS and Accessibility
As I said previously, some of the issues raised in the 16 rules of accessibility are really non-issues if you simply don't include the type of content a rule warns about. Take images maps, for example. If you're designing with text-to-speech or Braille tactile devices in mind, design a clean, text-based site and style accordingly. Leave the image-laden effects for another time and place.
Because we've been designing our in-class site using CSS, much of the accessibility work has been done for us. As noted previously, many of the requirements of Section 508 hinge on structural markup. So, headings should be made with heading tags, paragraphs with paragraph tags, and tables should be used only for data (not for layout). Let's run down the list of CSS practices you can incorporate into your tool kit that will keep all your sites accessibility-friendly.
How to Succeed in Accessibility (Without Really Trying)
That sans-serif option is what I mean by generic font. Dreamweaver, obviously, takes care of this for you if you're using any part of the Dreamweaver interface to set a font value. But sometimes, you may be editing your CSS manually, in which case, don't forget to include a generic font call.
 Tip Use hexadecimal or functional notation values for colors, instead of color names. Hexadecimal and functional notation values correspond to physical colors a computer can render. Color names are not exact. The color one browser has designated as "green" may be different than another browser. |
That covers the 16 rules of Web content accessibility, how to set Dreamweaver's accessibility preferences, as well as seven CSS guidelines for keeping your content Section 508-complaint.
In Chapter 4, we'll look at how those preferences we set earlier actually affect your workflow where images are concerned, as well as Dreamweaver's accessibility features for tables, which aren't part of your preferences settings.
Chapter 4:
Accessible Images
Once you have Dreamweaver's accessibility features for images turned on, every time you insert an image, you'll be prompted for both alternate text and long description values. It's not like these two features aren't available without the preferences setting properly turned on. There are fields for these two values in the Property Inspector for all inserted images. You simply get the added benefit of the prompts so you don't forget.
For example, with the accessibility features for images turned on, when you insert an image, you'll see the Image Tag Accessibility Attributes dialog box. In the fields provided, you'd enter your alternate text and a link to a long description, if required.
So, for our image of Marc Andreessen, I'd create an HTML file with nothing but a short description of who he is, link to it using the Long description field, and add his name in the alt text field, as shown here:
Image Tag Accessibility Attributes
Any visitor using a text-to-speech reader would hear Marc Andreessen's name and be able to follow a link to the long description where they'd be able to listen to that as well.
Because we've got whole lessons on forms and media objects coming up later in the class, I'll talk about the accessibility features for those items then. What I do want to show you now is Dreamweaver accessibility features as they relate to rules (g) and (h), dealing with tables, which are not explicitly covered by the Accessibility setting we turned on—they're active all the time.
Accessible Tables
As we noted earlier, tables shouldn't be used for layout if accessibility is your goal. Instead, leave tables for displaying data (what tables were designed for in the first place).
When you insert a table, the Insert Table dialog box appears, as shown here:
Insert Table dialog box
The upper portion of the dialog box, as you're aware, is where you set the basic table properties: the number of rows and columns, the width, border thickness, and cell padding and spacing. The accessibility features fall directly under that. The first is the Header section, highlighted here:
Table Header options
As rule (g) states, Row and column headers shall be identified for data tables. This means you need to use <th> tags for header cells. The Header section provides graphic icons to specify which cells you want set to <th> tags for. This way, assistive technologies can differentiate header information from data. Simply use the Left, Top, or Both options to specify which cells should be converted to table header cells.
Don't worry if you change your mind about your choice after the table has been inserted. You can select any standard table cell while in the Document window and convert it to a header cell by selecting the Header check box in the Property Inspector, as shown here:
Table Cell Property Inspector Header check box
Below the Header options section in the Insert Table dialog box sits the Accessibility section. Here, you enter a caption that defines what the table defines and set the alignment for that caption: Top, Bottom, Left, Right, or Default (which is the same as top). Defining a caption places <caption> tags right after the opening <table> tag that contains your caption text. You'd then use the Summary field to enter text that (you guessed it) summarizes the information found in the table.
Speaking of summaries, let's move on to Chapter 5. We've discussed enough accessibility for one day.
Don't worry, though. We'll return to this topic again at various points in future lessons, where different types of content require it.
Chapter 5:
Summary
Today's lesson introduced the subject of Web site accessibility. We examined Section 508 of the Rehabilitation Act and familiarized ourselves with its rules governing accessible Web page content. We learned how to turn on some helpful features in Dreamweaver so the program can prompt us for accessibility attributes for a handful of content types.
Then, we talked a little more about CSS and how it facilitates accessibility, as well as specific CSS methods we should use when making accessible content. Last, we looked at Dreamweaver's tools for keeping our images and tables assistive technology-friendly.
Have
you been watching videos at YouTube recently? Maybe you've been at
Amazon.com listening to some track from your favorite recording artist?
If so, you've been dealing with media objects. In Lesson 8, we'll
examine media objects and how to incorporate them into our sites.
Supplementary Material
|
The Section 508 Web Site http://www.section508.gov/ |
| This is where all Section 508 information can be found. |
|
Web Content Accessibility Guidelines 1.0 http://www.w3.org/TR/WCAG10/ |
| These guidelines explain how to make Web content accessible to people with disabilities. |
|
Web Accessibility Initiative (WAI) http://www.w3.org/WAI/ |
| Here you'll find strategies, guidelines, and resources for making the Web accessible to people with disabilities. |
FAQs
Q: Can I use tables for layout in a site that needs to be accessible?
A: Yes, but only in a very simple way. The order of the cells and their content must flow left to right, top to bottom (in the order they are meant to be read).
Assignment
Time
to insert some accessible images into our pages. Download the following
Zip file, and unpack the images within it into your images folder.
Simply follow the instructions provided, and post any questions you
have in the Discussion Area.
Right-click or CONTROL-click this link to download the L07_assignment_images.zip folder into your images folder.
Assignment Instructions
We're going to create some accessible images.
First, do this: The images we're going to insert in our site pages require a
style for their border. Create a new advanced style with the following
properties:
In your style sheet document, your finished style should look something like this:
hypertext.html
the_web.html
mosaic.html
netscape.html
w3c.html