|
|
|
|
|
|
Guideline 13 also recommends that Web designers "group related links . . . and provide a way to bypass the group." This suggestion is of special benefit to visitors who use screen readers to access the Web. Their adaptive computer equipment will read pages aloud to them, but this can become a tedious and repetitive process if the same navigation menu appears at the top of each page. Every time a new page is loaded, a user may be forced to listen to the same links before the screen reader reaches the content that is unique to that page. One solution is to create an additional hyperlink that leads not to another page, but to a different location in the same document. This link can be placed at the very top of the page, prior to the navigation menu, and its destination set to some point after the menu where the significant content begins. Because such a link is included for non-visual users, it may be made invisible on the screen, but still audible to people who use screen readers.
Access Art uses such a link as part of its navigation menu that appears on every page. To visual users, the first link on the menu appears to be "HOME," but actually there is a link just before it that allows visitors to skip the remainder of the menu. This link uses a small graphic image instead of link text, and the graphic is the same color as the background so it is virtually invisible. The "alt" statement of the image and the "title" attribute of the link both contain the phrase "Skip to content" so people using screen readers can detect it. As shown below, the destination (or "href") of the link is not the filename of a different Web page, but rather the keyword "#content".
<a href = "#content" title = "Skip to content"> <img src = "skip.gif" alt = "Skip to content"></a>The pound sign ( # ) instructs the browser that the destination of the link can be found on the current page. The keyword that follows the pound sign is chosen arbitrarily by the Web designer; within Access Art, the word is "content." Elsewhere on the page another anchor tag identifies the location to which the browser will scroll if the user selects this link. Instead of the "href" attribute, this anchor tag requires the "name" attribute and the corresponding keyword. On every page of Access Art, this tag is placed after the navigation menu at the point where the unique content of the page appears.
<a name = "content">Another feature of the navigation menu is provided in observance of WAI Guideline 10 which advises Web designers to "include non-link, printable characters (surrounded by spaces) between adjacent links." This is for the benefit of visitors using adaptive computer equipment such as screen readers that may not be able to distinguish side-by-side hyperlinks unless there is some ordinary text between them. Within Access Art, adjacent links are found in the navigation bar and other menus, and they are all separated by spaces and a vertical bar character ( | ) that is not part of the hyperlink. In order to blend with the visual design of the site, these vertical bars are set to the same color as the page background. As a result, they are barely visible on the screen, though they fulfill their purpose for people using screen readers. A simplified portion of the HTML code appears below, showing the placement of a vertical bar between each link. The resulting hyperlinks and non-link characters can be seen on the navigation menu at the top of this page.
<a href = "http://www.daytonartinstitute.org/" title = "The Dayton Art Institute">HOME</a> | <a href = "index.cfm" title = "Access Art">ACCESS ART</a> | <a href = "access.cfm" title = "Accessibility">ACCESSIBILITY</a>