The title attribute
Regular users of Internet Explorer for
Windows may be familiar with its habit of
popping up alt text as a tooltip. This has
encouraged web designers to wrongly fill alt
text with explanatory copy for those links that
require an explanation, rather than using the
alt text for a succinct overview of the image’s
content. Should you require a pop-up, add a
title attribute to your surrounding a element
to explain what will happen when the
link is clicked. The majority of web browsers
display its value when the link is hovered over
for a couple of seconds (see right), although
some older browsers, such as Netscape 4,
don’t provide this functionality.
<a href="large-image.html" title="Click to view a larger image">
å<img src="image.jpg" alt="This is some text that explains what
å the image is" width="400" height="300" /></a>
There are a few things to be mindful of when using title attributes. The first is that
behavior varies slightly between browsers, and the positioning and style of the tooltip cannot
be controlled. Internet Explorer exhibits some particularly quirky behavior. In addition
to displaying alt text as a tooltip, alt text defined within an img element will override (and
therefore be displayed instead of) title text for a surrounding a element. However, if the
title and alt attributes are both placed within the img element, the title attribute wins
out. Therefore, some technically unnecessary duplication of content is required to ensure
compliance from Internet Explorer. Also, Microsoft’s browser does not display title text
when you mouse over area elements within image maps.
Windows may be familiar with its habit of
popping up alt text as a tooltip. This has
encouraged web designers to wrongly fill alt
text with explanatory copy for those links that
require an explanation, rather than using the
alt text for a succinct overview of the image’s
content. Should you require a pop-up, add a
title attribute to your surrounding a element
to explain what will happen when the
link is clicked. The majority of web browsers
display its value when the link is hovered over
for a couple of seconds (see right), although
some older browsers, such as Netscape 4,
don’t provide this functionality.
<a href="large-image.html" title="Click to view a larger image">
å<img src="image.jpg" alt="This is some text that explains what
å the image is" width="400" height="300" /></a>
There are a few things to be mindful of when using title attributes. The first is that
behavior varies slightly between browsers, and the positioning and style of the tooltip cannot
be controlled. Internet Explorer exhibits some particularly quirky behavior. In addition
to displaying alt text as a tooltip, alt text defined within an img element will override (and
therefore be displayed instead of) title text for a surrounding a element. However, if the
title and alt attributes are both placed within the img element, the title attribute wins
out. Therefore, some technically unnecessary duplication of content is required to ensure
compliance from Internet Explorer. Also, Microsoft’s browser does not display title text
when you mouse over area elements within image maps.
Using accesskey and tabindex
I’ve bundled the accesskey and tabindex attributes because they have similar functions—
that is, enabling keyboard access to various areas of the web page. Most browsers enable
you to use the Tab key to cycle through links, although if you end up on a web page with
dozens of links, this can be a soul-destroying experience. (And before you say “So what?”
you should be aware that many web users cannot use a mouse. You don’t have to be
severely disabled or elderly to be in such a position either—something as common as
repetitive strain injury affects plenty of people’s ability to use a mouse.)
The accesskey attribute can be added to anchor and area elements. It assigns an access
key to the link, whose value must be a single character. In tandem with your platform’s
that is, enabling keyboard access to various areas of the web page. Most browsers enable
you to use the Tab key to cycle through links, although if you end up on a web page with
dozens of links, this can be a soul-destroying experience. (And before you say “So what?”
you should be aware that many web users cannot use a mouse. You don’t have to be
severely disabled or elderly to be in such a position either—something as common as
repetitive strain injury affects plenty of people’s ability to use a mouse.)
The accesskey attribute can be added to anchor and area elements. It assigns an access
key to the link, whose value must be a single character. In tandem with your platform’s
assigned modifier key (Alt for Windows and Ctrl for Mac), you press the key to highlight or
activate the link, depending on how the browser you’re using works.
<a href="index.html" accesskey="/">Home page</a>
An ongoing problem with access keys is that the shortcuts used to activate them are
mostly claimed by various technologies, leaving scant few characters. In fact, research conducted
by WATS.ca (www.wats.ca/show.php?contentid=32) concluded that just three
characters were available that didn’t clash with anything at all: /, \ and ]. This, combined
with a total lack of standard access key assignments/bindings, has led to many accessibility
gurus conceding defeat, admitting that while there’s a definite need for the technology, it’s
just not there yet.
The tabindex attribute has proved more successful. This is used to define the attribute’s
value as anything from 0 (which excludes the element from the tabbing order, which can
be useful) to 32767, thereby setting its place in the tab order, although if you have 32,767
tabbable elements on your web page, you really do need to go back and reread the earlier
advice on information architecture (see Chapter 1). Note that tab orders needn’t be consecutive,
so it’s wise to use tabindex in steps of ten, so you can later insert extra ones
without renumbering everything.
Not all browsers enable tabbing to links, and others require that you amend some preferences
to activate this function, and so tabindex ultimately only really comes in handy
when working with forms, as you’ll see in Chapter 8. When used for too many other elements,
you also run the risk of tabindex values hijacking the mouse cursor, meaning that
instead of the Tab key moving the user from the first form field to the second, it might end
up highlighting something totally different, elsewhere on the page. What’s logical to some
people—in terms of tab order—may not be to others, so always ensure you test your websites
thoroughly, responding to feedback.
activate the link, depending on how the browser you’re using works.
<a href="index.html" accesskey="/">Home page</a>
An ongoing problem with access keys is that the shortcuts used to activate them are
mostly claimed by various technologies, leaving scant few characters. In fact, research conducted
by WATS.ca (www.wats.ca/show.php?contentid=32) concluded that just three
characters were available that didn’t clash with anything at all: /, \ and ]. This, combined
with a total lack of standard access key assignments/bindings, has led to many accessibility
gurus conceding defeat, admitting that while there’s a definite need for the technology, it’s
just not there yet.
The tabindex attribute has proved more successful. This is used to define the attribute’s
value as anything from 0 (which excludes the element from the tabbing order, which can
be useful) to 32767, thereby setting its place in the tab order, although if you have 32,767
tabbable elements on your web page, you really do need to go back and reread the earlier
advice on information architecture (see Chapter 1). Note that tab orders needn’t be consecutive,
so it’s wise to use tabindex in steps of ten, so you can later insert extra ones
without renumbering everything.
Not all browsers enable tabbing to links, and others require that you amend some preferences
to activate this function, and so tabindex ultimately only really comes in handy
when working with forms, as you’ll see in Chapter 8. When used for too many other elements,
you also run the risk of tabindex values hijacking the mouse cursor, meaning that
instead of the Tab key moving the user from the first form field to the second, it might end
up highlighting something totally different, elsewhere on the page. What’s logical to some
people—in terms of tab order—may not be to others, so always ensure you test your websites
thoroughly, responding to feedback.
Skip navigation links
Designers who work with CSS layouts tend to focus on information structure, rather than
blindly putting together layouts in a visual editor. This is good from an accessibility standpoint,
because you can ensure information is ordered in a logical manner by checking its
location in the code. However, when considering alternate browsers, it’s clear that some of
the information on the page will be potentially redundant. For example, while a user surfing
with a standard browser can ignore the masthead and navigation in a split second, rapidly
focusing on the information they want to look at, someone using a screen reader will
have to sit through the navigation links being read out each time, which can prove
extremely tedious if there are quite a few links.
Various solutions exist to help deal with this problem, and although you can use CSS to
reorder the page information (most commonly by placing the code for the masthead at
the end of the HTML document and then using absolute positioning to display it at the top
when the page is viewed in a browser), it’s more common to use what’s typically referred
to as skip navigation
Designers who work with CSS layouts tend to focus on information structure, rather than
blindly putting together layouts in a visual editor. This is good from an accessibility standpoint,
because you can ensure information is ordered in a logical manner by checking its
location in the code. However, when considering alternate browsers, it’s clear that some of
the information on the page will be potentially redundant. For example, while a user surfing
with a standard browser can ignore the masthead and navigation in a split second, rapidly
focusing on the information they want to look at, someone using a screen reader will
have to sit through the navigation links being read out each time, which can prove
extremely tedious if there are quite a few links.
Various solutions exist to help deal with this problem, and although you can use CSS to
reorder the page information (most commonly by placing the code for the masthead at
the end of the HTML document and then using absolute positioning to display it at the top
when the page is viewed in a browser), it’s more common to use what’s typically referred
to as skip navigation
No comments:
Post a Comment