Tài liệu Web Application Design Patterns- P13 docx

346 CHAPTER 11 Accessibility

<link rel="stylesheet" href="name_of_cssfile.css" type="text/css" media="all" />

<style type="text/css">

@import url(name_of_cssfile.css);

</style>

FIGURE 11.2 Two common approaches of referencing an external style sheet.

FIGURE 11.3 Washington Mutual allows users to change the text size by clicking on one of

the text options in the top-right corner of the page.

earlier in this chapter). Then, add presentation-related markup using style sheets

such that the addition of style sheets does not limit the page’s accessibility.

KEEP PAGE MARKUP AND STYLE SHEETS SEPARATE

Keep all style sheet declarations in external CSS fi les rather than embedding them

in individual pages or presenting them inline with markup elements. Style sheet

fi les can then be referenced using either the < link > or @import tag ( Figure 11.2 ).

By keeping all style declarations in a separate fi le, it’s also easier to update one

external fi le rather than go through every application page and make updates.

USE RELATIVE UNITS FOR FONT SIZES TO ALLOW

USERS TO RESIZE TEXT

Using relative units, such as em, %, and keywords, allows users to enlarge or

reduce text size as needed in web browsers such as Firefox, Safari, and Internet

Explorer. Although px (pixels) is considered a relative unit, Internet Explorer

(version 6 and older) doesn’t allow text in the px-based layouts to be resized.

Internet Explorer 7, however, allows user to zoom in and out of the page; this

feature zooms in/out the entire page, not just the text.

It’s possible that some users may not know how to resize text using browser con￾trols. Therefore, consider providing users an explicit way to resize text ( Figure 11.3 ).

ALLOW USER STYLE SHEETS TO OVERRIDE AUTHOR

STYLE SHEETS

User style sheets are CSS fi les created by users and are used to override author

style sheets to make pages easier to read. For example, a user might change the

background color to black and the text color to yellow and set the font size

larger to make the page easier to read. Most of the popular web browsers allow

347

users to specify and use their own style sheet over the designer’s/publisher’s

style sheet.

Browsers give preference to users ’style sheets unless a style declaration is

marked !important in the style sheets. Not being able to override the author

styles can, in some instances, make pages unreadable for some users. Therefore,

avoid using !important declaration in style sheets.

Related design patterns

Even when using CSS unobtrusively, it’s important to use structural tags

to mark up pages to ensure that pages are accessible without style sheets

(SEMANTIC MARKUP). In addition, style sheets should be added only after

the page structure has been created (PROGRESSIVE ENHANCEMENT).

UNOBTRUSIVE JAVASCRIPT

Problem

Using JavaScript on pages can offer users richer interactivity and make inter￾action more pleasant. However, not all web browsers support JavaScript, and

users or system administrators may disable JavaScript because of their work￾place security policy or personal preference. Therefore, web applications depen￾dent on JavaScript may become inaccessible to at least some users.

Solution

Use JavaScript “ unobtrusively ” — that is, incorporate JavaScript within web

pages in such a way that not having it available does not affect users ’ability to

use the web application.

Why

Using JavaScript unobtrusively and redundantly allows web applications to be

functional without being dependent on it. When JavaScript is supported and

enabled, the web application can offer enhanced interactivity.

How

Following the principle of PROGRESSIVE ENHANCEMENT, structure the

page fi rst (SEMANTIC MARKUP), add necessary presentation enhancements

(UNOBTRUSIVE STYLE SHEETS), and then enhance browser interaction using

JavaScript such that not having it available does not affect structural and pre￾sentation layers and the use of the web application.

KEEP PAGE MARKUP AND JAVASCRIPT SEPARATE

Keep all JavaScript for the web application in external JS fi les rather than in the

page itself or embedded in the HTML markup, and reference them using the

< script > tag as follows:

< script type = " text/javascript "src = " javascriptfile.js " > < /script >

Unobtrusive JavaScript

348 CHAPTER 11 Accessibility

Keeping JavaScript fi les separate from page structure also makes it easy to

change scripts without updating individual pages within the application.

USE THE DOM SCRIPTING APPROACH TO ATTACH

FUNCTIONS TO PAGE EVENTS

Do not embed JavaScript functions within page markup. That is, do not call

JavaScript functions that use the approaches shown in Figure 11.4 .

Calling JavaScript functions from page markup may prevent pages from work￾ing correctly in browsers where JavaScript is unavailable or disabled. A better

approach is to attach functions to events for different page elements using

the DOM 3

Scripting approach (Keith, 2005). Use DOM methods such as

getElementById and getElementsByTagName to fi nd a specifi c element or a set

of elements, respectively, and then assign behavior to specifi c events such as

click , mouse over , and so forth ( Figure 11.5 ).

DO NOT USE DROPDOWN LISTS TO INITIATE NAVIGATION

OR FORM SUBMISSION

Do not use JavaScript to navigate to a different page or change effects on the

web page when users change the option in a dropdown list. This is typically

accomplished using the onchange event handler in JavaScript. Instead, allow

users to select the menu item and then click an adjacent form button to go to

the page corresponding to the item they have selected.

If a dropdown list is used to submit a form or to navigate to a different page,

it will be extremely diffi cult, if not impossible, for keyboard users to select an

appropriate option. For example, if a dropdown list is used to navigate to a dif￾ferent page as users select an item in the list, this would trigger the onchange

event, and users would be immediately taken to the corresponding page.

<a href="javascript:doThis();">Link Anchor</a>

or

<input type="button" onclick="doThis();" value="Save Changes" />

FIGURE 11.4 “ Obtrusive ” ways of incorporating JavaScript — that is, calling JavaScript

functions within the page markup.

var allLinks = document.getElementsByTagName("a");

for (var i=0; i<allLinks.length; i++) {

allLinks[i].onclick = function() {

…

return false;

}

}

FIGURE 11.5 This code snippet accesses all links within the document (marked up using the

< a > tag) and assigns the onclick behavior to it.

3

DOM, or Document Object Model, refers to a way of representing HTML and XML documents

so that they can be manipulated using scripting technologies such as JavaScript. For more infor￾mation, see www.w3.org/TR/DOM-Level-3-Core/introduction.html .