Making Web Pages Accessible

Chapter 9

Learn how to…

• List guidelines and standards for making Web sites accessible.

• List HTML coding practices to make a Web site meet Section 508 accessibility standards.

• Define how style sheets can enhance accessibility.

• Use tools to assess how well a Web site meets accessibility standards.

Defining Web Accessibility

Web Accessibility

• Web accessibility is the capability that makes it possible for users with disabilities to receive, understand, and navigate content that people without disabilities can process without special assistance.– Web accessibility is a right that is guaranteed by law

under Section 508 of the Rehabilitation Act of 1973.– All Web sites used, procured, developed, or

maintained by government agencies and departments must be accessible.

WAI

• The Web Accessibility Initiative (WAI) coordinates the Web’s official efforts to achieve accessibility.– To learn more, go to www.w3.org/WAI

• The Web Content Accessibility Guidelines (WCAG) consist of 65 checkpoints organized under 14 general guidelines.– Each checkpoint is assigned

to one of three priority levels.

Section 508

• Section 508 includes 16 Web accessibility requirements, all of which must be met for a Web site to be considered accessible.– To see the standards, go to

www.section508.gov and follow the link to the 508 law.

Coding to the Section 508 Web Accessibility Standards

Section 508 Rules

• There are 16 rules of the Section 508 Web Accessibility Standards.– The following slides detail each rule and

indicate what code may be used to meet each standard.

Rule (a)

• A text equivalent for every non-text element shall be provided.

Rule (a) Code

• With the alt attribute tag, alternate text will pop up and may be read aloud.

• The longdesc attribute is used for more than 150 words.

Rule (b)

• Equivalent alternatives for any multimedia presentation shall be synchronized with the presentation.– To meet this rule, one needs to create

captioning that is synchronized with the multimedia presentation.

Rule (b) Code

• MAGpie is a popular tool that can be downloaded for free from the National Center for Accessible Media (NCAM) at ncam.wgbh.org/webaccess/magpie– The MAG in MAGpie stands for Media Access

Generator.

MAGpie

Rule (c)

• Web pages shall be designed so that all information conveyed with color is also available without color, for example from context or markup.– In other words, this rule forbids using color to

convey information that cannot be understood in the absence of color.

Rule (c) Code

• Telling a user to press the red button violates the rule.– Instead, tell the user to

press the red stop button and label the red button with the word stop.

• Use enough contrast between colors.

Rule (d)

• Documents shall be organized so they are readable without requiring an associated style sheet.– You must not use a style sheet so that it

changes the meaning that the page would convey without the style sheet.

Rule (d) Code

• Users can add another style sheet of their preference in Internet Explorer. Select: Tools | Options | Accessibility

Rule (e)

• Redundant text links shall be provided for each active region of a server-side image map.– You can use text boxes to satisfy this rule, but

they may not look good on your design.– However, server-side image maps are mostly

a thing of the past.

Rule (f)

• Client-side image maps shall be provided instead of server-side image maps except where the regions cannot be defined with an available geometric shape.

Rule (f) Code

• Use the alt attribute.

Rule (g)

• Row and column headers shall be identified for data tables.– This requirement applies only to tables

containing data that, to be understood, requires that users know what specific row or column they are in.

– Tables used for layout designs are not affected.

Rule (g) Code

• Use the HTML table header <th> start and </th> stop tags that both create a data cell and define it as a table header.

Rule (h)

• Markup shall be used to associate data cells and header cells for data tables that have two or more logical levels of row or column headers.

Rule (h) Code

• Use the id attribute to assign a unique identifier to each table header. Then, add to each <td> tag a headers attribute that identifies the header(s) associated with each data cell.

Rule (h) Code

Rule (i)

• Frames shall be titled with text that facilitates frame identification and navigation.– Use both a title attribute and name

attribute.

Rule (i) Code

Rule (j)

• Pages shall be designed to avoid causing the screen to flicker with a frequency greater than 2 Hz and lower than 55 Hz.– Animations that blink are not particularly

desirable on a Web site.– To learn more about the risk of inducing

seizures from flicker at a Web site, go to http://www.nws.noaa.gov/sec508/htm/rule_j.htm

Rule (k)

• A text-only page, with equivalent information or functionality, shall be provided to make a Web site comply with the provisions of this part, when compliance cannot be accomplished in any other way. The content of the text-only page shall be updated whenever the primary page changes.– This should be used as a last resort.

Rule (l)

• When pages utilize scripting languages to display content, or to create interface elements, the information provided by the script shall be identified with functional text that can be read by assistive technology.– Scripts can make things happen onscreen

that assistive devices cannot interpret.– Use the <noscript> start and </noscript>

stop tags to provide the necessary text.

Rule (l) Code

• Make sure you can maneuver the page without a mouse.

• Avoid the onDblClick event handler.• When using onMouseDown or onMouseUp

events, provide an onKeyDown or onKey Up handler.

Rule (m)

• When a Web page requires an applet, plug-in, or other application to be present on the client system to interpret page content, the page must provide a link to a plug-in or applet that complies with §1194.21 (a) through (l).

Rule (m) Code

• There are three tests to use with applets:1. Users must be able to navigate without a

mouse.

2. Users should be able to move from one element to another onscreen using the Tab key.

3. For every graphical element that conveys meaning or navigation, a textual equivalent must be available.

Rule (n)

• When electronic forms are designed to be completed online, the form shall allow people using assistive technology to access the information, field elements, and functionality required for completion and submission of the form, including all directions and cues.

Rule (n) Code

• Use the <label> start and </label> stop tags to clarify which instructions and labels go with which form elements onscreen.– The <label> tag has a for attribute that you

use to identify the ID of the <input> element with which the label is associated.

Rule (n) Code

Rule (n) Code

• Many users must use the tab key instead of the mouse. Make sure the tab order is logical by using the tabindex attribute.

Submit Button

• To make forms accessible, therefore, you must provide a Submit button for every form onscreen.

Rule (o)

• A method shall be provided that permits users to skip repetitive navigation links.– Many Web pages have navigational options

across the top and down and on the left side of the page, with the main content occupying the rest of the page. The user has to tab through all of these navigation links before getting to the main content on the page.

– Use a skip navigation link at the start of the page.

Rule (o) Code

• Create the skip navigation link and then the target to that link.

Rule (p)

• When a timed response is required, the user shall be alerted and given sufficient time to indicate more time is required.– Some sites require users to interact often, or

the session times out and the user must log on again.

Making Applets, Helpers, and Plug-ins Accessible

Flash

• The latest version of the Flash player conforms to Microsoft Active Accessibility (MSAA), which is an application programming interface (API) that helps Windows applications interoperate with assistive technology.

• Guidelines for making Flash movies comply with Section 508 are at: www.macromedia.com/macromedia/accessibility

Multimedia Objects

• The <object> start and </object> stop tags are used to put Flash movies (and other kinds of multimedia content) on a Web page.

Alternatives

• Several alternative representations of an object may be necessary.

PDF

• Structure the document properly with your word processor before converting it into a PDF file.

• Give each heading or subheading the appropriate heading style.

• To provide alternate text for an image in an MS Word document, right-click the image to pop out the quick menu, choose Format Picture to display the Format Picture dialog, and click the Web tab to display the Alternative text box.

PDF

• To test the file for accessibility, run Acrobat’s built-in Accessibility Checker.

• For more information, go to www.adobe.com/products/acrobat/solutionsacc.html

Accessibility Checker

Multimedia Accessibility

• The rich media accessibility showcase can be found at: http://ncam.wgbh.org/richmedia

Defining Style Sheets for Accessibility

Font Selection and Size

• Times Roman is one of the best fonts if you are creating a document for printing on paper.

• The typeface preferred onscreen is 12-point Arial dot-matrix.

• Specify the font size in a unit called an em.

• Use fonts that scale.

Color and Contrast

• Always use colors that are high in contrast.– Color brightness = ((Red value × 299) + (Green value

× 587) + (Blue value × 114)) / 1000– The difference between the brightness of the text and

background colors must be greater than 125.• Difference = (maximum (Red value 1, Red value 2) –

minimum (Red value 1, Red value 2)) + (maximum (Green value 1, Green value 2) – minimum (Green value 1, Green value 2)) + (maximum (Blue value 1, Blue value 2) – minimum (Blue value 1, Blue value 2))

• If the color difference is greater than 500, the colors are sufficiently high in contrast.

Color and Contrast

• To perform the calculations on the previous slide, use a tool available at: www.juicystudio.com/services/colourcontrast.asp

• For more information, visit www.w3.org/TR/AERT#color-contrast

Color and Contrast

• These colors are acceptable for proper contrast.

Color Blindness Simulator

• Vischeck is a color blindness simulator that allows you to see what a Web page will look like to someone with a given type of color blindness.– Go to www.vischeck.com

Layering and CSS Layout

• Linearization is the process of thinking of a Web page in the order in which the elements occur in the HTML file.

• Instead of using a skip navigation link as in Rule (o), you can use absolute positioning and the <div> and </div> start and stop tags (div = division).– A page with a banner and sidebar followed by the

main content could be arranged to provide the main content before the banner and the sidebar.

– Absolute positioning is still not widely supported.

Absolute Positioning

Tools for Assessing Web Site Accessibility

Bobby

• Bobby is a comprehensive Web accessibility tool that can analyze a single page or an entire Web site.– Exposes barriers to accessibility, makes

recommendations for necessary repairs, and encourages compliance with existing guidelines.

– For more information, visit http://bobby.watchfire.com/bobby/html/en/index.jsp

LIFT

• LIFT is a suite of products that can test, monitor, report, and repair Web accessibility problems.– For more information, visit

www.usablenet.com

WebKing

• WebKing performs static analysis, functional testing, and load testing.– Checks for broken links and navigational

problems.– Checks for accessibility issues.– Checks the results of various usage loads.

For more information, visit www.parasoft.com

STEP508

• Simple Tool for Error Prioritization (STEP) was created for the federal government for Section 508 compliance.

Web Accessibility

• Web accessibility links:– National Center for Accessible Media (NCAM)

site at ncam.wgbh.org– Section 508 site at www.section508.gov – A Section 508 tutorial at

http://www.nws.noaa.gov/sec508/htm/rules.htm

– W3C’s Web Accessibility Initiative (WAI) at www.w3.org/WAI