So far, this chapter has looked at fi le formats and a general, progressive enhancement approach to design. While this chapter has discussed them in the abstract, later chapters will treat fi le formats and progres- sive enhancement much more concretely. Here, though, are some additional, concrete features you can add to pages to increase their ac- cessibility: in-page navigation, accessibility attributes in XHTML, and accessibility-minded uses of CSS and JavaScript.
In-Page Navigation
For people who routinely browse the Web on desktop and laptop com- puters, moving through the contents of a single Web page is usually a simple matter of using the scrollbars on the browser, the scrollwheel on a mouse, or in certain cases, the touch pad on a laptop.
ACCESSIBILITY 65 On certain devices, such as screen readers and some mobile phones, scrolling down long pages might be diffi cult or time-consuming. To ac- count for this, it’s preferable to design sites that have a short accessible nav- igation area near the top of each page that allows users to jump to major sections of the page, such as the main content area or the site navigation.
In the Rapid Prototyping Kit (RPK, see Chapter 11), the header area of the XHTML includes an unordered list with a class of accessibility . There are two links that allow a device to jump either to the page content or the site navigation. These accessible links save users with screen readers from having to listen to all of a page’s content before they can access the navigation or, conversely, to jump to the content without having the navigation read aloud fi rst.
In the RPK, the content area immediately follows the accessible nav- igation; given that, it might seem silly to have a “Skip to Content” link.
However, the idea behind including it is to inspire confi dence in users, whether of assistive or mobile devices, that they can control their brows- ing experience and get right to the part of the page that they seek.
For graphical browsers, CSS can be used to hide the accessible navi- gation from view, using a technique discussed in Chapter 14. Sites that use that technique enable assistive technologies to read aloud the con- tents of the accessible navigation, while keeping the page from being cluttered by another navigation element that would be unnecessary for people experiencing the page graphically on a desktop browser.
Accessibility Attributes
The most well-known accessibility attribute in HTML and XHTML is alt , which provides alternate text for content images loaded in the image tag, <img /> . Your XHTML will not validate if you do not have an alt attribute on all of your images (attributes and other parts of XHTML are discussed in Chapter 9). However, alt text is supposed to be limited to 100 characters. 8 Given the old cliché says that a picture is worth a thousand words, well, you can see the issue here: 100 charac- ters (not words) will not come close. (That’s 40 fewer characters than a Twitter post allows.)
There are some different options to addressing the limitation of alt ; the fi rst is the title attribute. It, too, is very limited in length; most browsers will display title attribute text as a tooltip, but some may limit
66 HOW TO DESIGN AND WRITE WEB PAGES TODAY
the text to 85 characters. There is another attribute, long description ( longdescrip ), which allows devices to follow a link to a com- plete Web page with a longer description. Maintaining separate pages of description for each of your images is not a very manageable solu- tion, though, especially given that not all assistive devices support it.
Chapter 18 suggests other ways to prepare images and other media with additional text for all users.
The image tag is not the only XHTML tag with special accessibil- ity attributes. There are two attributes that can be added to the anchor tags to assist users in activating page navigation and other important links: tab index and accesskey .
• tabindex helps change the order in which links are activated by using the Tab key on the keyboard; my preference is to run the tab index on the navigation items, although arguments could be made in favor of eliminating this entirely.
• accesskey is an attribute that allows someone to use a key- board combination to activate a particular link, usually in the navigation area.
See the book’s companion Web site at http://sustainableweb design.com/book/ for examples of using those two attributes to in- crease the accessibility of your links and navigation.
CSS and JavaScript to Enhance Accessibility
CSS and JavaScript do not have to be stumbling blocks to accessibil- ity. Used appropriately in the right circumstances, CSS and JavaScript can actually enhance the accessibility of a Web page for users with capable browsers. For example, CSS enables you to design text to be far more readable than the default styling Web browsers apply. And JavaScript allows you to add simple mechanisms that, for example, in- crease the font size on your pages. I use JavaScript in tandem with CSS on my course Web sites for just this purpose (see Figures 6.3 and 6.4):
it makes it easy to enlarge the text for projecting during class. But that enhancement also serves any low-vision students who need an easy way to view the site in larger font sizes. It’s also possible to refer to alternate CSS fi les on your pages, a technique that’s mentioned in Chapter 10
Figure 6.3. The course site for the author’s Web design course.
Figure 6.4. DOM Scripting makes the course site more accessible for low- vision visitors, but also aids in projecting content in the classroom. Notice the sidebar disappears in this mode.
68 HOW TO DESIGN AND WRITE WEB PAGES TODAY
and presented with examples at the book’s companion site, http://
sustainablewebdesign.com/book/ .