لطفا منتظر باشید ...
Enhancing Site Accessibility
You've already implemented some accessibility features to the Jade Valley Web site by adding alt descriptions for a number of images. In this task, you'll add an accessibility feature that will benefit users with screen readers.
As you learned in Lesson 2, screen readers are browsers that read page contents aloud, so that users with visual impairments can access Web content. Screen readers start at the beginning of the page and work their way down, which creates a problem for pages with layouts like ours, which begin every page with an identical navigation bar and banner. This means that screen readers will read the navigation bar, along with all its hotspots, over and over again throughout the site.
In this task, you'll implement an easy solution to overcome this problem: you'll create a tiny, invisible graphic at the beginning of the first page that jumps over the logo and navigation bar, sending users directly to that page's main content. Because the graphic that triggers this behavior is invisible and only a fraction of an inch in size, users accessing your site through traditional browsers won't even know this feature exists.
To implement this feature, you'll insert a 1-by-1-pixel graphic and add a link that skips to a named anchor (a link target in the middle of a page) next to the main page heading. You'll place this graphic at the top of the <body> element, so that it's the first element a screen reader encounters.
1. | With jadevalley_template still open, switch to code view, and (if necessary) add a few empty lines below the opening <body> tag but above the first <div> tag. Leave the insertion point in the empty space you just created. |
You're ensuring that the invisible graphic you're about to insert is the first thing on the page.
[View full size image]
The spacer.gif file is only 1 pixel wide and 1 pixel high, which makes it a fast download. In addition, the GIF file is set to 100% transparency, so that it's invisible in a traditional graphic browser. A screen reader can see it, however, which is what you want. The spacer.gif has the two features you need most: the ability to add a hyperlink, and the ability to add an alt description.
[View full size image]
3. | Without clicking, go immediately to the Property inspector, which still shows the properties of the invisible image you just inserted. In the Link field, type #top. |
In a moment, you'll create a named anchorthat is, a within-the-page hyperlink targetfor this link to point to. Named anchors are always preceded with a pound sign (#).
It's important that you create the hyperlink target before clicking elsewhere, because the image is practically invisible in Dreamweaver, making it almost impossible to find in design view.
Tip
In the event you did click before you added the hyperlink, the easiest way to find the image again is to switch to code view and find the <img> tag between the <body> and first <div> tags. Position the cursor anywhere in the tag, and the Property inspector will once again display its properties.
[View full size image]
Now that the graphic is in place and linked, you need to add the target.
4. | Position the insertion point just to the left of the Main Heading text at the top of the main_content layer. Choose Insert > Named Anchor. In the Named Anchor dialog, name it top , and click OK. |
Dreamweaver inserts the anchor in the code. Depending on your view settings, you might also see a yellow anchor icon next to the main heading. This icon is a Dreamweaver visual aid only; it will not appear in a browser.
Tip
You can toggle these invisible icons on or off by checking or unchecking View > Visual Aids > Invisible Elements.
5. | Save jadevalley_templat218. |
You're ready to convert this file to a Dreamweaver template.
![[View full size image]](/image/library/english/13887_157fig01_alt.jpg){kind=link}
![[View full size image]](/image/library/english/13887_157fig02_alt.jpg){kind=link}
![[View full size image]](/image/library/english/13887_158fig01_alt.jpg){kind=link}