CHAPTER 11 Accessibility
350
In this example, the text fi eld for fi rst name has an id of “ fi rstName ” that is ref-
erenced in the < label > tag using the “ for ” attribute to associate the label First
Name
to the corresponding text fi eld.
Not only does the < label > tag make it easy for screen readers to correctly associ-
ate labels to form control irrespective of where the form control is positioned,
but it also helps sighted users when they interact with radio buttons and check-
boxes. When used with radio buttons and checkboxes, the < label > tag allows
users to click the label to select the corresponding radio button or checkbox.
Thus, users have a larger clickable area and are not restricted to clicking the
smaller radio button controls or checkboxes ( Figure 11.6 ).
In addition, to ensure that screen readers present information to users in the
correct order, place labels that relate to text fi elds or dropdown lists before the
form element in the markup. This does not apply to radio buttons and check-
boxes, where labels come after the corresponding controls.
GROUP FORM CONTROLS USING < FIELDSET > TAGS
Use the < fi eldset > tag to group related form controls and use the < legend > tag
to provide a heading to the grouped form controls ( Figure 11.7 ). This helps
screen readers identify and communicate groups to users. The tags < fi eldset > and
< legend > can also be styled using style sheets to make them visually appealing
(Adams, 2008).
MAKE FORMS KEYBOARD ACCESSIBLE
Most browsers allow users to navigate among links, frames, and form elements
on a page using the Tab key, which when pressed, moves the focus from one
element to another in the order of their presence in the markup. In most cases,
when the page is marked up correctly, the sequence in which users would move
from one element to another would be correct. However, in cases, when the
default tab sequence needs to be changed to provide a better form-fi lling expe-
rience, use the tabindex attribute for form elements ( Figure 11.8; see also the
KEYBOARD NAVIGATION pattern in Chapter 2).
Another way to make forms keyboard accessible and effi cient to use is by using
the
accesskey attribute, which allows users keyboard access to frequently used
FIGURE 11.6
In this form from Orbitz, users can click either on the highlighted areas or
the radio controls instead of just clicking the radio button control to select an option.
351
areas on a page or form ( Figure 11.9 ). For example, the accesskey attribute can
be used to navigate among primary navigation options in a web application
and can also be used with a link to allow users to navigate to corresponding
pages using the keyboard.
When the accesskey attribute is specifi ed, users can press a combination of the
“ modifi er ” key(s) (e.g., Alt or Ctrl keys) in conjunction with the character spec-
ifi ed in the accesskey attribute. See Figure 11.10 for a list of modifi er key(s) on
different browsers.
USE JAVASCRIPT UNOBTRUSIVELY WHEN USED
FOR FORM VALIDATION
Many forms use client-side scripting technology, such as JavaScript, to manipulate
forms or check for validity of users ’ data input. However, use of such scripting
Accessible Forms
<label for="firstName">First Name:</label>
<input type="text" id="firstName" name="firstName" tabindex="10" />
<label for="lastName">Last Name:</label>
<input type="text" id="lastName" name="lastName" tabindex="20" />
FIGURE 11.8
The tabindex attribute allows users to navigate form elements in a logical manner.
<label for="search" accesskey="S">Search:</label>
<input type="text" id="search" name="search" />
FIGURE 11.9
By adding the accesskey attribute of “ S ” to the < label > tag for the search
box, we can allow users to focus on the search fi eld by pressing the Alt key (or Ctrl key or
another key combination) and the “ s ” key at the same time.
FIGURE 11.7
This form in (a) is created using the < fi eldset > and < legend > tags shown in
(b) along with a few style sheet rules (not shown).
(a)
<fieldset>
<legend>Personal Information</legend>
<label for="firstName">First Name:</label>
<input type="text" id="firstName" name="firstName" />
<label for="lastName">Last Name:</label>
<input type="text" id="lastName" name="lastName" />
</fieldset>
(b)
CHAPTER 11 Accessibility
352
technology may render forms inaccessible to users with assistive technology or
those who have disabled JavaScript in their browsers. Therefore, perform the form
validation on the web server regardless of whether it’s done on users ’ browsers
using JavaScript. This will ensure that forms remain accessible to all, including
those using browsers that do not support JavaScript (see also the HIJAX approach
discussed in the PROGRESSIVE ENHANCEMENT pattern earlier in this chapter).
Related design patterns
The patterns discussed in Chapter 2, such as LOGICAL GROUPING, REQUIRED
FIELD INDICATORS, SMART DEFAULTS, FORGIVING FORMAT, KEYBOARD
NAVIGATION, INPUT HINTS/PROMPTS, and ACTION BUTTONS, are all essen-
tial for designing usable and accessible forms.
ACCESSIBLE IMAGES
Problem
Images are not available to users with visual impairments.
Solution
Provide necessary text alternatives for images and minimize the use of superfl u-
ous graphics. There is a common misconception that to make a page accessible, all
images must be removed. This is not true. Illustrations, graphics, and other images
(including animated images) not only help improve comprehension for users
without vision impairments but also help those with some forms of cognitive/
learning disabilities (Brewer, 2005). By incorporating text alternatives for images,
designers can possibly avoid building an alternative version of the web application.
Why
Making images accessible by providing a text alternative allows both screen
reader users and those who have disabled images in their browsers to under-
stand the purpose and function of the images. An added benefi t is that it pro-
vides a meaning and description of images that can be read by search engines
to improve searchability of pages. When used appropriately, images can make a
page look visually pleasing and be incorporated in the page without impacting
its accessibility.
How
Provide a text alternative for images describing the image’s purpose. This is accom-
plished using the alt attribute for all image-related markup: < img > tags, < area >
tags for hotspots on image maps, and input tags of type = " image " ( Figure 11.11 ).
Internet Explorer ALT (PC), Ctrl (Mac)
Mozilla Firefox ALT + SHIFT (configurable by typing about:config in the address field)
Opera SHIFT + Esc
Konqueror (Linux) Press CTRL and the accesskey in sequence
FIGURE 11.10
Modifi er key(s) for different browsers when using the accesskey attribute.
353
USE AN EMPTY ALT ATTRIBUTE FOR DECORATIVE IMAGES
Decorative images refer to images that are used for presentation purposes
only — for example, spacer images, transparent images, or fi ller photographs.
Using the alt attribute to describe such images is not necessary because it
doesn’t communicate any relevant information to users. Therefore, use an
empty alt attribute for images, such as < img src = " spacer.gif " alt = " " / > .
When images are used only for decorative purposes, consider using them as back-
ground. Screen reader users will not see the image, and the need for an empty alt
text will not arise. This can be easily accomplished using CSS ( Figure 11.12 ).
USE THE LONGDESC ATTRIBUTE FOR DETAILED IMAGE
DESCRIPTIONS
Use the alt attribute for images when a short description for the image is suffi -
cient. In cases where the image cannot be described succinctly, use the longdesc
attribute to reference and link to the page where the detailed image description
is provided ( Figure 11.13 ).
Because the longdesc attribute is not supported by older assistive technologies,
often designers put a “ d-link ” (description link) next to the image that opens the
description fi le — the same fi le referenced in the longdesc attribute ( Figure 11.14 ).
USE MEANINGFUL TEXT WHEN DESCRIBING IMAGES
When describing images using either the alt or longdesc attribute, indicate the
image’s informational content and/or function as appropriate within its usage
context. For example, consider Figure 11.15 . This example from WebAIM.org
illustrates a good approach in determining what would constitute a meaningful
text for the PDF icon image. Four potential values for the PDF icon’s alt text are:
1. " Employment Application "
2 . " PDF File "
3. " PDF icon "
4. " " , because the image content is presented in context
Accessible Images
<map name="globalNav">
<area coords="0,0,50,20" href="AboutUs.html" alt="About Us" />
<area coords="51,0,100,20" href="CustomerSupport.html" alt="Customer Support" />
</map>
(b)
(c)
<input type="image" src="btn_login.gif" alt="Log In" />
<img src="btn_login.gif" alt="Log In" />
(a)
FIGURE 11.11
Examples of alt text for images (a), image maps (b), and the input
(type = “ image ” ) tag (c).
CHAPTER 11 Accessibility
354
The preceding are discussed in the online article, Appropriate Use of Alternative
Text (www.webaim.org/techniques/alttext /) :
Notice that the image is within the link. If it were not within the link, then
the
alt text might be different. In this case, because the image provides
additional information about the function of the link, it’s important that it
<div id="preamble">
<h3><span>So What is This About?</span></h3>
<p class="p1">…. </p>
</div>
(b)
#intro #preamble {
background: transparent url(images/breakrule.gif) no-repeat center bottom;
padding: 25px 0px 37px 0px;
width: 464px; }
(c)
#intro #preamble h3 {
background: transparent url(images/txt_sowhatisthisabout.gif) no-repeat left top;
height: 25px;
margin: 0px 0px -9px 27px; }
#intro #preamble h3 span {
display: none; }
(d)
(a)
FIGURE 11.12
In this example from CSS Zen Garden, the designer has included a decorative
image below the section in the background (a). This is evident in the HTML code for this section
(b) and the corresponding style (c). The designer uses the breakrule.gif fi le as the background
image and positions it at the bottom of the paragraph to use it as a separator between it and the
next section. A similar approach is used for the section header, the text of which ( “
So What Is
This About?
” ) is enclosed within the < h3 > < span > tags (b), and its CSS shows the use of the
image as background. The text is hidden from sighted users by setting its display to “ none ” but
is still accessible to text reader users. Another option is to use a large negative text-indent value
(e.g., – 9999px). (Source: www.csszengarden.com/?cssfi le ϭ /204/204.css & page ϭ 0 . )
355
be within the link itself and is read with the link. This is vital because links
are often accessed out of context from their surroundings.
Option A (
" Employment Application " ) is redundant with surrounding text
so it is not the best choice. Option B is the best choice — it clearly provides
the content that is being presented by the image — that the link is to a PDF
fi le. The function (
" Download the Employment Application " ) is presented
within the text of the link, so it does not need to be included within the
alt
attribute. Option C (
" PDF icon " ) describes the image itself, but is not most
appropriate for this context. In another context, it may be important that
the user know that this image is indeed an icon — in such a case, using the
word
" icon " in the alt text may be appropriate. Option 4 (null or empty alt
text) would not provide the important information that the image presents.
Accessible Images
<img src="chart_sales.gif" alt="Sales from the year 2000 to 2003" longdesc="traffic_chart.html" />
FIGURE 11.13
When describing a chart, alt text ( “ Sales from the year 2000 to 2003 ” )
may not be suffi cient to describe what the chart represents. To make it easier for users to
understand the chart, summarize the content on a separate page (in this example,
“ traffi c_
chart.html ”
) and link it using the image’s longdesc attribute.
<img src="chart_sales.gif" alt="Sales from the year 2000 to 2003" />
<a href=”traffic_chart.html”>D</a>
FIGURE 11.14
An example of a d-link that references the page and provides the detailed
image description.
FIGURE 11.15
Using a link and an image together.
NOTE
Another option is to use the PDF icon as a background image and position it using the
style sheet and use the text PDF in the HTML markup as follows:
HTML:
< a href = " /docs/employement_application.pdf " class = " pdfdoc " >
Download the Employment Application (PDF, 300KB)
< /a >
CSS:
a.pdfdoc {
/* Assuming that the image is about 24px × 24px and 6px space to its
left is adequate */
background: transparent url(/images/icon_pdf.doc) no=repeat right;
padding-right: 30px;
}
CHAPTER 11 Accessibility
356
AVOID USING TEXT IN GRAPHICS
Graphic formats (e.g., GIF, JPEG, and PNG) appear pixelated when zoomed in.
When text is used in graphics, users who have magnifi ed the screen to improve
readability would end up reducing the page’s readability ( Figure 11.16 ).
Readability is further compromised when text is overlaid on another image or a
patterned background. Therefore, as much as possible, avoid using text in graph-
ics; it also helps with internationalization (see the EXTENSIBLE DESIGN pattern
in Chapter 10).
FIGURE 11.16
Text used in graphics appears pixelated and thus is diffi cult to read when
magnifi ed.
Related design patterns
Using images should not compromise the SEMANTIC MARKUP. Therefore,
use decorative images as background images using CSS so that they are not
included in the page structure (see also the UNOBTRUSIVE STYLE SHEETS pat-
tern earlier in this chapter).
ACCESSIBLE TABLES
Problem
Reading and understanding data presented in tables can be confusing to assis-
tive technology users if they are unable to establish the relationship among the
data elements. For example, if users are not able to associate data in table cells
to corresponding headings, they may not know exactly what the data represent
and how they relate to data in other cells.
Solution
Reserve the use of < table > tags for presenting tabular data and use style sheets
for page layout (see the TABULAR LIST pattern in Chapter 7). Mark up tabular
data such that table captions, column headings, and row headings are clearly
identifi ed. This helps screen readers understand and communicate the relation-
ship between data presented in tables.
This is not to suggest that pages formatted using < table > tags are inaccessible.
It is possible to build accessible pages using tables so that when content is
“ linearized ” — that is, when all table-related tags are removed and content is
presented in the order it appears in the markup — the resulting content order
matches what users would expect and the page is accessible to assistive tech-
nology users. However, the same visual and structural result can be achieved
357
using style sheets, and there is no longer a valid reason for favoring < table > tags
for layout (Andrew and Shafer, 2006). In addition, using tables for layout vio-
lates the SEMANTIC MARKUP pattern, which suggests that content be marked
up using tags to match its structural intent and not to achieve a certain visual
presentation.
Why
Associating data in tables to their column and row headings helps screen read-
ers correctly communicate the relationship among data elements, and users
establish appropriate context for their use.
How
Most important, clearly distinguish headings that indicate what the data repre-
sent from data cells (the actual values). This is achieved by marking up head-
ings (both column and row headings) using < th > tags and data values using
< td > tags.
USE THE < CAPTION > TAG AND SUMMARY ATTRIBUTE
TO ESTABLISH CONTEXT
Use the < caption > tag to provide a short descriptive title indicating the table’s
purpose ( Figure 11.17 ). The information within the < caption > tag is displayed
to users and can be formatted using style sheets.
In addition, use the summary attribute to describe in detail what the table presents.
Because information contained within the summary attribute is not displayed, its
main purpose is to describe the data table’s purpose and any relevant formatting
information for assistive technology users ( Figure 11.18 ).
IDENTIFY ROW AND COLUMN HEADERS OF DATA TABLES
Ensure that data values are correctly associated with their headings by using the
scope attribute. Such a practice lets assistive technology users know if data are
Accessible Tables
NOTE
With the new browsers supporting CSS tables using the display properties of table ,
table-row , and table-cell , soon there would be even fewer valid reasons to use HTML
< table > tags for laying out pages (Andrew and Yank, 2008).
<table>
<caption>Sales Data for Past 3 years</caption>
… rest of the table markup
</table>
FIGURE 11.17
Use the < caption > tag to briefl y describe the purpose of tabular data.
CHAPTER 11 Accessibility
358
tied to column headings ( < th scope = " col " > ), row headings ( < th scope = " row " ),
or both ( Figure 11.19 ).
USE THE HEADERS ATTRIBUTE ON CELLS OF COMPLEX
DATA TABLES
Use the headers attribute to specify the relationship among the headings for a
given cell in more complex tables. This is accomplished by attaching an id attri-
bute to any cell that you want to be a header cell and then adding the ids of
those header cells to the headers attribute of the data cells ( Figure 11.20 ).
Related design patterns
Data table presentation can be improved using style sheets so that the rela-
tionship between data values and headings are clear to those without vision
impairments as well. (See Christie, 2008, for how CSS can be used to effec-
tively present tabular data.) This is important for sighted users because attri-
butes such as summary , scope , and headers are not displayed in web browsers.
However, UNOBTRUSIVE STYLE SHEETS should be used to ensure that markup
and presentation are layered independently as advocated in the PROGRESSIVE
ENHANCEMENT pattern.
<table summary=”Sales data for years 2005, 2006, and 2007 show an increasing trend, with
sales doubling from $1,200,000 in 2005 to $2,400,000 in 2007”>
<caption>Sales Data for Past 3 Years</caption>
… rest of the table markup
</table>
FIGURE 11.18
By using the summary attribute, users know what is relevant and important
in the table and can help improve comprehension of the data presented in the table.
<table>
<caption>Sales Data for Past 3 Years</caption>
<tr>
<th></th>
<th scope="col">2005</th>
<th scope="col">2006</th>
<th scope="col">2007</th>
</tr>
<tr>
<th scope="row">Sales</th>
<td>$ 1,200,000</td>
<td>$ 1,500,000</td>
<td>$ 2,400,000</td>
</tr>
</table>
FIGURE 11.19
Knowing the scope of
headings, users can
clearly establish that
sales in 2005 were
$1,200,000.
359
ACCESSIBLE NAVIGATION
Problem
Most web pages are organized such that the main “ content ” area comes after persis-
tent elements such as a logo, utility navigation, primary navigation, and secondary
navigation. Although this practice is benefi cial for users without vision impair-
ments because they prefer a consistent location for navigation (see Chapter 5),
it’s disruptive for screen readers and keyboard users because they have to navigate
through those links with every page load before they can reach the main content.
Solution
Allow users to access the page’s main content without requiring them to go
through persistent navigation and other elements located in the page’s header
Accessible Navigation
<table>
<caption>Travel Expense Report</caption>
<tr>
<th><br /></th>
<th id="meals">Meals</th>
<th id="hotel">Hotel</th>
<th id="transportation">Transportation</th>
</tr>
<tr>
<td id="august-25" >25-Aug-03</td>
<td headers="meals august-25">$ 37.74</td>
<td headers="hotel august-25>$ 112.00</td>
<td headers="transportation august-25">$ 45.00</td>
</tr>
<tr>
<td id="august-26" >25-Aug-03</td>
<td headers="meals august-26">$ 37.74</td>
<td headers="hotel august-26>$ 112.00</td>
<td headers="transportation august-26">$ 45.00</td>
</tr>
<tr>
<th id="total">Total:</th>
<td headers="meals total">$ 196.27</td>
<td headers="hotel total">$ 442.00</td>
<td headers="transportation total">$ 162.00</td>
</tr>
</table>
FIGURE 11.20
In this example, the ids of the column headers are meals , hotel , and
transportation , and the ids of the row headers are
august-25 , august-26 , and total .
Then the cell at row 2, column 3 would have
headers = " hotel august-25 " or the other way
around — that is,
headers = " august-25 hotel " — if that seems more appropriate.
Không có nhận xét nào:
Đăng nhận xét