|[ LiB ]|
Links are at the heart of web interactivity, and there's a lot you can do to make them more powerful, more fun, and more interactiveand even more accessible!
There's nothing inherently inaccessible about links. But your job as a web author involves making them easier to deal with. In a graphical interface, the user can glance quickly down each page hunting for exactly the links needed. But a screen reader reads the entire page from top to bottom, and links can easily get lost in the shuffle. The user who wants to jump right into the page content doesn't want to listen to a dozen links in the top navigation bar. The user who wants to head straight for the links at the bottom of the page doesn't need to listen to the entire page being read before getting there. Section 508, § 1194.22(o), states:
A method shall be provided that permits users to skip repetitive navigation links.
There's no magic HTML tag or attribute for taking care of this, nor does Dreamweaver have a magic bullet for you. But that doesn't mean it's difficult! The solution is as easy as adding an extra link at the top of any set of repetitive links. Do it this way:
If you don't mind that the skip-navigation link is visible, your job is done. But you can also hide it. To create a truly invisible link, use a single-pixel transparent spacer GIF as your image. Give it some alt text, such as Skip to Main Content or Skip Navigation, and link it to the anchor. Screen readers will read the alt text, but graphical browsers will completely pass over the image.
The code for an invisible skip-navigation setup looks something like this:
<a href="#main"> <img src="spacer.jpg" width="1" height="1" alt=Skip to main content> </a> [navigation bar or other set of links goes here] <a name=main></a> [main page content goes here]
Figure 6.32 shows how it looks as it's being created in Dreamweaver.
Of course, image maps are made from images, so all image-accessibility guidelinesmost important, the use of alt labelsapply. In addition, Section 508, § 1194.22(e), states:
Redundant text links shall be provided for each active region of a server-side image map.
Client-side image maps don't require redundant text links because each hotspot in the map has its own alt attribute.
On a less-official note, be aware that image maps are more accessible if their hotspots are large and easy to click on. They should be more or less uniform in size, if not in shape, and large enough that they can be easily found by the cursor. A hotspot should always correspond to a portion of the graphic that clearly communicates the URL destination; if words aren't used, universally understandable icons (such as a mailbox for an email link) should be employed.
By default, links are highlighted in the browser with bright blue. Linked text gets a blue underline; linked images get a blue border. Visited links get a purple underline or border. Although some web pundits argue that we shouldn't mess with these settings (or visitors might get confused and not recognize them as links), most web designers do something to customize link appearance.
When is the last time you saw an image on a web page with a big blue border surrounding it? Not for a while, probably. Borders around linked images can be turned off by specifically setting the image's border attribute to 0. Every time you add a link to an image in Dreamweaver, this happens automatically (see Figure 6.33).
The appearance of linked texttext color , whether there's an underline, and so forthcan be controlled by using CSS to redefine the a tag. You can approach this task in one of two ways in Dreamweaver: through the Page Properties window or through the CSS Styles panel.
This is the slow way to do it, but it gives you more of an idea what's happening under the hood and also gives you more options. For instance, you can save your link formatting styles in an external style sheet for sharing across a site using this method.
To change the basic appearance and behavior of all linked text, open the CSS Styles panel and create a new style. In the New Style dialog box, choose to redefine the a tag for the current document only or in a separate style sheet (see Figure 6.34). When the CSS Style Definition dialog box opens, make any choices you want. All linked text will be styled as you choose here. The most commonly set options are all in the Type category:
To customize link color, choose from the Color field.
To remove the underline, set the Decoration to None.
To make your links appear in Bold, choose Bold (or any of the bold settings)
Other, more sophisticated text link effects can be created using the a: pseudoclasses. To do this in Dreamweaver, open the CSS Styles panel and create a new style. In the New Style dialog box, choose CSS Selector and choose one of the following from the drop-down menu that appears (see Figure 6.35):
a:link controls how regular links will look (similar to redefining the a tag).
a:hover controls how links will look when the user rolls over them.
a:visited controls how visited links look (those that the user has been to recently).
a:active controls how links look when the user has clicked on them.
When you choose to create one of these styles, the CSS Style Definition dialog box opens, and you can assign any formatting you want to your hovered-over, visited, or active links. One of the most popular effects currently is to hide the underlines on linked text but have it reappear when the user rolls over the text. Do this by defining the a:hover class and, in the Type category of the Definition dialog box, setting Decoration to Underline.
If you don't want to go through the time of setting up multiple styles in the CSS Styles panel, you can quickly set up link appearance in the Page Properties window. Just choose Modify > Page Properties and go to the Links category (see Figure 6.36). The most commonly set options for regular, rolled-over, visited, and active links all appear here.
When you make your choices using this method, Dreamweaver adds all necessary CSS styles ( a, a:hover , and so on) to an internal style sheet within the current document.
For more on internal and external style sheets, including how to export styles into external CSS documents, see Chapter 11, "Using Cascading Style Sheets."
There is a pre-CSS way to control normal, active, and visited link colors on a page by adding attributes to the body tag:
<body link="#FFFF00" alink="#FF0000" vlink="#00FF00">
There's no real reason to use this method, unless you're targeting very old browsers (version 3 and below). But you can tell Dreamweaver to create your link colors this way, if you prefer. In the Preferences/ General dialog box (choose Edit > Preferences and go to the General category), deselect the option Use CSS Instead of HTML Tags. The next time you choose Modify > Page Properties, the Links category won't appear. Instead, go to the Appearance property and set link colors there. You won't be able to change any other link characteristics, such as removing underlines or creating hover effects, because those require CSS.
Links can also be to pass information from page to page for scripting purposes. This is done in the form of URL parameters. Information passed as a parameter is coded as a name/value pair appended to the end of the URL, separated from it by a question mark (?). Multiple parameters are separated from each other by an ampersand (&). If any of the passed values includes a space, it must be encoded as a plus sign (+) or an ASCII value (%20). A URL with passed parameters looks like this:
To add URL parameters to your links in Dreamweaver, you can always manually type the parameter into the Link field in the Property Inspector, if you remember the syntax and don't mind doing some typing. But it's easier to let Dreamweaver help you. Click the Browse button to browse for a link. When the Select File dialog box opens, choose the file to link to and click the Parameters button to open the Parameters dialog box (see Figure 6.37). In this window, enter each name and value that you need to be passed. Click OK twice to close both dialog boxes, and you'll see your fully constructed URL in the Property Inspector's Link field.
For instance, what if visitors might link to the current page from several other places in your site, and you want to customize the information that you present based on who they are? Insert the following script code into your document wherever you want the customized content to appear:
You can modify this script to collect any single URL parameter and display optional page content. Just copy the following framework code into your Dreamweaver document wherever you want the customized content to appear:
Customize the code to your needs like this:
For the code shown in bold, enter your own information (parameter values, custom content).
You'll always want to test for at least one value, so always include the line that begins with if .
For any additional values that you want to have custom content for, include an else if line. Duplicate this line as many times as you want, to add more options.
What happens if there is no passed parameter? If you want default content, use the else statement. If you don't want to display any content, you don't need to include the else statement.
You can make life even easier on yourself by turning each of these lines into a snippet so you don't have to type it by hand every time:
if (x=="value1") document.write('content here');
To use your new snippets, create a document, go to Code view, and do this:
Passed parameters are used extensively when constructing data-driven pages. For more on using passed parameters, see Chapters 22, "Creating Dynamic Pages," and 23, "Further Dynamic Techniques." For the full story on snippets, see Chapter 27, "Writing Code in Dreamweaver."
URL parameters can also be used with email addresses to specify extra things, such as subject and cc. This means that when the user clicks the link and the email program launches, it opens a new message window with all of this information already in place. Table 6.2 lists some email- related URL parameters and what they do.
Adds a cc (carbon copy) recipient to the email message
Adds a bcc (blind carbon copy) recipient to the message
Adds a subject line to the message
Adds text to the body of the message
An email address with URL parameters in place looks like this:
Figure 6.38 shows how an email message window looks when activated by this link.
Unfortunately, you can't use Dreamweaver's handy Parameters window to add parameters to an email address because the Parameters window is called from the Select File dialog box, accessed when you browse to choose a file to browse to. An email address can't be browsed to because it's an absolute URL.
But you can add parameters by manually entering them in the Property Inspector's Link field (which is very tiny) or, of course, directly into Code view. Just remember to include all the proper punctuation: ? to start, & between parameters, and %20 where you want spaces inserted.
If you want a piece of text to trigger a Dreamweaver behavior, it needs to first be made into linked text. Images can trigger behaviors without being linked images, but by having the link turns the browser's cursor into a hand, without which the user might not know to click on the image. You want the user to click on the link, but you don't want the link to actually go anywhereit just needs to trigger the behavior. You need to create a null link. That's an a tag with an href value that does nothing.
This tells the browser not to do anything when the link is pressed.
If you're fond of this kind of coding, you probably know all about this already. But did you know that you can enter this information in the Link field of the Property Inspector? The only problem is, the input field is awfully tiny, so it can be hard to see what you're doing (see Figure 6.40).
|[ LiB ]|