250 html and web design secrets phần 7 pdf

This may be as simple as providing a clear link on your home page to an accessible version of your site, linking to alternative pages using the linkelement, or using the longdesc attribu

Trang 1

Accessibility has become a critical component of Web design This is cially true for those designers working in government and education, wherespecific laws may require those designers to implement accessibility features.Creating accessible Web sites is not a difficult thing to do, really, if you havedeveloped sound markup practices and reduced or removed the use of tables forlayout from your designs After that, it’s a matter of applying certain elements andattributes to your documents, providing alternatives to aural or visual media, andproperly testing your documents for accessibility compliance

espe-What is Web Accessibility?

The term “accessibility” is used to describe a specific problem within Web design:how to make Web sites available to those who have disabilities that might preventthem from seeing, hearing, and moving through Web pages

A significant number of disabilities impact use of the Web, including those lated to vision, hearing, and mobility Some visually challenged individuals rely

re-on large-type, high-cre-ontrast operating system and Web browser features to accesspages Many visually challenged people use screen reader technology, a combina-tion of hardware and software that reads screen content aloud Braille printers arealso common, where screen data is interpreted by the printer and then printed out.People with mobility impairments may use special keyboards, mice, and pointingdevices (such as special sticks held in the mouth or placed on the forehead fortapping out keyboard commands) Other devices exist as well, but in all cases,

using these devices (referred to as assistive devices) on the types of Web pages

dominating the Web is no easy task

note For an excellent overview of this topic, see “How People with Disabilities Usethe Web” from the W3C, at www.w3.org/WAI/EO/Drafts/PWD-Use

-Web/.

Another accessibility concern is comprehension Even a physically healthy, brightperson requires clear communication on the Web, where making a quick yet lastingimpression counts Whether a person has a learning disability or is extremelyliterate, your site should have clarity and context to communicate its message

The Advent of Accessibility Challenges

The field of accessibility on the Web has an intriguing history Remember, theWeb was introduced as a text-based environment, not the predominantly visualenvironment that most people experience it as being After all, in only a decadethe Web has become a platform that supports almost every conceivable media type.However, back in the day, the Web was just text You could include a link to animage or other object, but that object would have to be downloaded and viewed in

an external application, because the user agents at that time, such as Lynx, did nothave graphical user interfaces (GUIs, pronounced “gooey”) The markup in usewas very simple: just headers, paragraphs, text, lists, a horizontal rule to break upsections of text See Figure 10-1 for a view of a text-only browser

You might think that in comparison to what we have today, the text-based Web wasextremely limiting After all, there was no Flash, no QuickTime, Real Audio and

Trang 2

Figure 10-1: A Web page as viewed in the text-only browser, Lynx

Video, not even inline GIFs or JPEGs to make the site visually interesting, and noready means of using color, except whatever your monochrome monitor used fordisplay

If I’d not witnessed the Web’s growth from birth to its current state, I would thinkthat these were limitations too But from a historical standpoint, a text-only en-vironment was far more accessible than most of the sites we have today Earlytext-based sites were easier for screen reader technology to interpret for blindusers, because screen readers were simply reading directly from the text, with nobrowser GUI causing a barrier There were no images to deal with and no complextable layouts to confound and frustrate For the mobility impaired, there were nofly-out menus or drop-down toggles to contend with

When the transition to a GUI-based environment via visual Web browsers occurred,many disabled people who were using Internet-related services, such as e-mail,Gopher, and the World Wide Web, were suddenly left out in the cold

For several years, Internet resources such as Gopher had been a source of erment for many disabled, and suddenly that empowerment was gone becausethe GUI Web browser was so effective that it became the application of choice foraccessing other Internet services via the Web, too And existing assistive devicessimply weren’t advanced enough to handle the complex demands that the visualWeb began placing on them To this day, screen reader technology is several stepsbehind, but advances have been made With the implementation of accessibilityfeatures in operating systems and Web browsers, many barriers are finally comingdown

empow-Fortunately, we now have enough awareness and techniques to begin seriouslyaddressing these issues in our design and development tasks The good news isthat it’s not really that difficult to make a Web site accessible, especially if you’readhering to Web standards and best practices While you can have a standardizedsite and still not meet accessibility guidelines, following standards, especially interms of creating structured, valid markup, and removing presentational elementsand attributes from a document, makes that document inherently more accessible.Best practices in document authoring means writing conforming documents thatare also accessible These practices are interdependent, even if they have exclusivefeatures

Trang 3

Accessibility and Law

One reason that Web accessibility has become so popular an area of study is thatmany countries have implemented laws pertaining to the accessibility of Web sites.The United States, United Kingdom, Australia, and many European countries haveimplementations of accessibility legislation and guidelines

In the United States, accessibility laws emerged as legislation with the tion Act in 1973 In 1990, the Americans with Disabilities Act (ADA) was signed intolaw By 1998, an update to the original Rehabilitation Act was published, known

Rehabilita-as the Workforce Investment Act (WIA) Section 508 of this act requires that all U.S federal government Web sites and sites developed with federal monies must

be accessible in accordance with the guidelines set out by this section.

Other institutions in the United States, while not necessarily required to create cessible Web sites, are beginning to implement policies Many state governments,universities and community colleges, and other public institutions are reviewingpolicies and creating accessibility guidelines for their Web sites

ac-note Complete documentation for the Rehabilitation Act of 1973 is available atwww.icdi.wvu.edu/files/file20.htm.

The full text of the ADA can be found at

nation to institute a formal policy on Web accessibility) mandates accessibility for

all Web sites.

note Many wonder about the enforceability of accessibility legislation, especiallywhen accessibility features are just starting to be implemented on a grand

scale

The W3C tracks and manages international implementations of Web accessibility

In fact, the W3C offers the most explicit specifications for Web accessibility via theWeb Accessibility Initiative (WAI), which includes a number of important specifi-cations and activities, such as the Web Content Accessibility Guidelines (WCAG).The W3C’s involvement in accessibility is largely due to the many issues discussedhere: accessibility’s relationship to markup, the international scope of accessibilityneeds, and the continued improvement and evolution of the Web

note For more information on laws pertaining to countries other than the U S.,please see the WAI International Program Office page, at

www.w3.org/WAI/IPO/Activity.html.

The WAI home page (www.w3.org/WAI/) provides details regarding all

activities within the W3C related to accessibility

Trang 4

Accessibility and You

In many disabled communities, there’s a term for nondisabled people, “TAB.” TABstands for “Temporarily Able Bodied” and is an ironic way to express a very realtruth: Most people will become disabled to some degree and for some period oftime at some point in their lives

Whether you sustain a bad injury from a snowboarding accident, find yourselfbattling a long-term illness, or suffer side effects of old age, none of us get a freepass when it comes to physical vulnerabilities

Making Web sites accessible is important because the Web should be available for

all people Creating accessible sites makes for a better Web that can enrich and

empower us all

Secret #167: Describing Visual

and Aural Content

Imagine that I have a video on a page that is a capture of a class I taught Forthose individuals who can see and hear (and have broadband), the full experience

of watching me teach might be preferable to just reading a transcript However,for those who cannot or prefer not to view and listen to the presentation, making

a transcript available is a perfect option

As simple as it seems, one of the major challenges when dealing with Web sibility is to accurately provide enough information to describe what’s happening

acces-on a page that cacces-ontains compacces-onents that might not be accessible to persacces-ons with

a given disability

Any time you have graphic, audio, video, or other nontext content on a page,provide a description either inline or using additional accessibility features foundwithin this chapter The point, however simple, is to author your documents wellenough so they would be completely understandable without the graphic, audio,

or video content

Secret #168: Providing Alternate Content

One means of ensuring access to Web sites is to provide alternate content wherevernecessary This may be as simple as providing a clear link on your home page to

an accessible version of your site, linking to alternative pages using the linkelement, or using the longdesc attribute to provide access to pages with a longerdescription

If you’ve got a Web site that is simply not accessible for some reason (such as thefact that it’s built in Flash), consider offering a simple link to text-based contentfrom the home page

warning In today’s practices of using streamlined, structured markup with CSS, theneed to provide alternative pages for most sites should be unnecessary The

exceptions to this are whenever your document is primarily Flash, or usesaudio, video, or other objects that might be inaccessible

Trang 5

Another way to offer alternative information is to place a link element in the head

portion of your document with a relationship defined as an accessible site link, as

in the following code:

<head>

<title>Acccessibility Techniques</title>

<link title="Text-only version" rel="accessible"

href="textpage.html" media="aural, Braille, tty" />

</head>

You’ll end up creating two documents—one with the Flash or graphical tion and one that is text-only for accessibility purposes Browsers that support thealternative media specified by the link element will automatically provide access

informa-to the linked document via a user-agent feature

Interestingly, you can create fully accessible navigation schemes using the linkelement, as shown here:

The rel attribute is used within the link element to indicate the text that will

be displayed within the compliant browser, with a hyperlink assisting users tonavigate to those pages directly (see Figure 10-2)

Figure 10-2: Mozilla offers a menu that will appear when link elements are found in

a document

tip You can set the site navigation bar in Mozilla to never show, show whenneeded, or show always To modify these settings, select View➪Show/Hide

➪Site Navigation Bar, and select your option from the menu

Another technique for providing additional information is the longdesc attribute.This attribute provides text descriptions on another page related to the object.The attribute is placed within the img element itself The value is the URL to thealternate page, as demonstrated in the following:

<img src="breeds.jpg" alt="chart of cat breeds by country"

Trang 6

“D” inside square brackets, as follows:

<img src="breeds.jpg" alt="chart of cat breeds by country"

longdesc="accessible/breeds.html" /><a href="accessible/breeds.html" title="text description of cat breeds by country">[D]</a>.

This way, any browser or user agent that can support the longdesc attribute will,and a link will be available in either case to the additional descriptive information

Secret #169: They’re NOT alt “Tags!”

The alt attribute is one of the first accessibility features to have found widespreadsupport early on in terms of specifications and browsers And somehow the term

“alt tag” became part of our professional gloss

It’s very important to learn proper terminology, to use it, and to continue ing it and modifying the way we speak to foster better communications betweenourselves, fellow team members, and our clients

learn-The alt attribute is available for use with a number of nontext elements, includingapplet(which is deprecated in HTML 4.0), area, img, and input The goal ofthe text is to provide a replacement description of the object in question, as in thefollowing example:

<img src="images/abyssinian.jpg" width="300" height="200"

alt="photo of an adult Abyssinian cat" />

If the image is of a complex nature, such as a graph or chart, and a short tion is not possible, you can provide alternate content by following the guidelinesdiscussed previously in this chapter

descrip-warning While you shouldn’t be using spacer graphics at this point, if you do, you maywish to include the alt attribute but leave the value empty, alt="" This

way, your document will conform and no unsightly [image] placeholder willappear Using the term “spacer” is a poor choice because screen readers will

read the alt text, so if you have a lot of spacer graphics in your document

identified that way, the visitor will hear “spacer spacer spacer spacer” instead

of your content!

Secret #170: Use the title Attribute in Links

The title attribute allows you to add extra context to your links without tracting from the flow of your content In Chapter 4, “Making Sites Usable andPersuasive,” I discussed how important it is for links to be descriptive But de-scriptive links alone, while helpful, can be limiting The title attribute lets youadd more information about the link so the site visitor can have more contextualinformation should it be required

Trang 7

de-Listing 10-1 shows how.

Listing 10-1: Adding the title attribute to links

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

</body>

</html>

Figure 10-3 shows a sample of this markup with the mouse passing over one ofthe links The tool tip appears with the additional information This feature exists

in all contemporary browsers

Figure 10-3: Additional title attribute information within a tool tip Note how the Opera browser also displays the title attribute information in the browser status bar

upon mouseover

Trang 8

tip Using the title attribute not only helps with accessibility, but helps with search engine ranking too A happy side effect of using title attribute

descriptions is that you can have additional keywords within a title

attribute, helping leverage your site rank effects For more information onsearch ranking, see Chapter 14

Secret #171: Using the abbr Element

for Abbreviations

Acronym? Abbreviation? What’s the difference? This is an area of great debate as

it pertains to markup Both elements emerged at around the same time but wereimplemented differently between browsers during the addition of accessibility el-ements in HTML 4.0

So you now have two elements: abbr and acronym You use them in exactly thesame way, but have to determine which is an abbreviation and which is an acronym

in a given circumstance

Abbreviations are typically defined as a shortened word formed from a completeword, such as Win for Windows Acronyms are typically defined as being formedfrom letters or components of a compound term, such as OS for Operating System

To use the abbr element, simply place the content in the tags, and use the titleattribute to write out the abbreviation, as shown in Listing 10-2

Listing 10-2: Using the abbr element

Trang 9

attention to the fact that the term is an abbreviation and more information is

avail-able (see Figure 10-4)

Figure 10-4: Abbreviations tagged with the abbr element will appear with a dotted

underline

tip You can modify the style of the default underline using CSS

Secret #172: Using the acronym Element

for Acronyms

The acronym element is applied exactly as the abbr element is, but is reservedfor use with acronyms, as illustrated in Listing 10-3

Listing 10-3: Using the acronym element

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

Trang 10

Figure 10-5: Acronyms tagged with the acronym element will result in the tool tip

appearing upon mouseover

warning Internet Explorer 6.0 does not support the abbr element As a result, manyaccessibility specialists suggest using the acronym element in all cases Of

course, this is problematic because it goes against the semantics and is

therefore a hack Furthermore, acronym is going to be deprecated in

XHTML 2.0

For an interesting discussion on the issue, including some excellent adviceabout using CSS along with acronyms and abbreviations for accessibilitypurposes, see Craig Saila’s article “HTML is Not an Acronym” at

www.evolt.org/article/HTML-is-not-an-acronym/17/35750/.

Trang 11

Secret #173: Understand the accesskey

Attribute

The accesskey attribute makes it easier to navigate from the keyboard than from

a pointing device such as a mouse Essentially, you’re creating keystroke nations to provide a keyboard shortcut to a given element or form control Your

combi-site visitors will hold down the Alt key and press the assigned accesskey value

to get to the element or form control in question

The accesskey attribute can be used with the following elements:

Listing 10-4: Using the accesskey attribute

note You’ll have noticed that I included a text reference (Alt+B) to indicate to myvisitor that the link has been assigned an access key and can be reached

quickly by using the keystroke combination

Trang 12

con-If you have a logically ordered document in terms of each link and form elementfollowing the next in a natural sequence, you won’t have to use tabindex How-ever, should you wish to allow a site visitor fast access to links or form controlsoutside of a sequential flow, such as making navigation items on the page last inthe list even though they might appear first, tabindex is the solution.

The tabindex attribute can be used along with the following elements:

Listing 10-5: Indexing tabs using tabindex within a series of links

<head>

<title>Adding Tab Indexing</title>

Trang 13

When using tabindex in form controls, the process is the same: simply add the

tabindexattribute and value in the series you prefer, such as the following:

<input type="checkbox" id="feeding" tabindex="2" />Yes, send me information about feeding techniques.

<input type="checkbox" id="training" tabindex="3" />Yes, send me information about training techniques.

<input type="checkbox" id="playing" tabindex="1" />Yes, send me information about exercise techniques.

Anyone tabbing through the preceding markup will tab to the last item first, thetop item second, and the middle item last

Secret #175: Group Form Selections with

select and optgroup

The optgroup element helps you group form selections into logical chunks Thisassists with the clarity of a document, which is generally helpful as well as espe-cially important when authoring documents for the learning disabled or those withother cognitive problems In this example, I’ve broken down the breeds of cat bylocation The element relies on the label attribute (note that this is significantlydifferent from the label element) to define the group name

The resulting menu provides greater clarity for the site visitor (refer to Listing 10-6)

Listing 10-6: Grouping form selections

<head>

<title>Working with optgroup</title>

charset=iso-</head>

<body>

<p>Which cat breeds have you considered?</p>

Trang 15

Listing 10-7 shows how fieldset and legend are used.

Listing 10-7: Combining form controls into logical groups

<head>

<title>Your New Kitten</title>

<legend>Information About You</legend>

Your Last Name:

Your First Name:

Figure 10-7 shows the visual results with the cues that help enhance understanding

of the form sections

Trang 16

Figure 10-7: Fieldset and Legend help provide visual cues to assist users in

understanding and navigating forms more effectively

tip Always group your form sections logically, clearly identifying which sectionbelongs to what type of questions.

Secret #177: Using the label Element

with Forms

The label element (not to be confused with the label attribute discussed earlier)

assists with the accessibility of forms by labeling form controls This additionallabeling provides information for screen readers and other assistive devices sothey can more adequately describe the context of each form control

The label element works in tandem with the for attribute, in which you describethe purpose of the form control (see Listing 10-8)

Listing 10-8: Using the label element

(continued)

Trang 17

Listing 10-8: (continued)

<head>

<title>Your New Kitten</title>

charset=iso-</head>

<body>

<legend>Information About Your Kitten</legend>

<label for="id-kitten">Name of kitten: </label>

<label for="age-kitten">Age of kitten: </label>

<label for="breed-kitten">Breed of kitten: </label>

</fieldset>

<legend>Information About You</legend>

<label for="owner-firstid">Your First Name: </label>

note The value of the for attribute must have a corresponding id value within thecontrol being labeled.

Secret #178: Summarize and Caption

Trang 18

Listing 10-9: Summarizing and captioning data tables

sum-Listing 10-10: Summarizing a data table

Trang 19

tip While ideally you’ll use both captions and summaries to make your datatables more accessible, most experts feel that if you decide not to use the

captionelement because it displays text you might not wish to havedisplayed on your page, you should at least include the summary attributeand table description

Trang 20

Secret #179: Consider Using Skip Links

Skip links are a technique that allows users (not just those interested in bility) to skip over navigation systems that might appear between the user and themain content This gets the user directly to the content

accessi-If you view your site in a text-based browser or with style sheets turned off andfind that your navigation appears prior to your content (as shown in Figure 10-9),you may wish to consider using skip links

Figure 10-9: Navigation in this instance appears before the content

In skip linking you use a standard anchor link referenced to an intrapage link.Then, you add some CSS to hide the link Screen readers will read the skip linkfirst, allowing users to jump ahead to content at their discretion

First, create the skip link and name the target The skip link should appear first inthe body portion of your documents:

<a href="content" class="skiplink">Skip to Content</a>

Then, create the intrapage link target, placing it right above where content starts:

note If you’re using HTML 4.0, the name attribute for your anchor is fine However, in XHTML 1.0, it’s recommended to use both the name and id, such as <a name

="content" id="content"></a> In XHTML 1.1, the name attribute has been replaced completely by id, so you’d write <a id="content"></a>.

Trang 21

In your CSS, add the class for the skip link, and hide the link, as follows:.skiplink {

display: none;

}

This hides the link completely from the visual display, but those accessing the siteusing assistive devices will be able to choose it Listing 10-11 shows a mockuppage with everything in the correct order I’ve used embedded style to add thestyle class; ordinarily, this will likely be placed in an external or imported sheet

Listing 10-11: Ordering skip links

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

acces-note If you do use skip linking, be sure to implement it on every page of your siteconsistently What’s more, learn about potential problems with hidden

Trang 22

elements and how they react in some screen readers at http://simon incutio.com/archive/2003/09/13/screenReaders.

Secret #180: Making Frames Accessible

I was reading my friend Matt Mullenweg’s site the other day Matt is the oper of the WordPress Weblogging system and a co-author of the XHTML FriendsNetwork (XFN), an extension of XHTML used in social networking

devel-cross

ref See Chapter 13, “Keeping Sites Fresh and Engaging,” for more information.

He had a few personal points on the site, the first one being, “I have done someterrible things in my life but I have never made a site with frames.”

After I picked myself up off the floor from laughing so hard, I gave the issuesome consideration When frames first became available, they were browser-based,proprietary constructs Since we’d never seen anything like that for the Web, for atime framed sites were all the rage I myself have built more framed sites than Ican count, but all prior to 1998

Part of the problem with frames is that they go against the very premise of markup—their job is presentational Other problems concern the ability to properly book-mark frame-based pages, navigate back and forth using browser controls, andlimiting screen space even further by breaking available space into smaller boxes.While there are some reasonable applications for frames, they are limited and are

in very minimal use at this point despite the fact that frameset and frame elementsare standardized within HTML and XHTML frameset DTDs

The best advice when it comes to making frames accessible, take Matt’s sarcasticcomment and places it in a cold, harsh light: don’t use them For the most part, theWeb will be a better place if you avoid them altogether

Should you decide to use frames, you can make them accessible by includingnoframescontent This allows for browsers without frame support to display acomplete page’s contents without the frames, but you have to set this content up,essentially maintaining multiple versions of a given document to achieve yourgoal

Listing 10-12 shows a sample frameset with the noframes content

Listing 10-12: Using noframes in a frameset document

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

<head>

(continued)

Định dạng
Số trang	44
Dung lượng	2,6 MB