1 / 65

Making Web Pages Accessible Chapter 9

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.

carsyn
Download Presentation

Making Web Pages Accessible Chapter 9

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Making Web Pages Accessible Chapter 9

  2. 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.

  3. Defining Web Accessibility

  4. Web Accessibility • Web accessibilityis 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.

  5. 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.

  6. 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.

  7. Coding to the Section 508 Web Accessibility Standards

  8. 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.

  9. Rule (a) • A text equivalent for every non-text element shall be provided.

  10. 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 (a) Code

  11. 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.

  12. 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.

  13. MAGpie

  14. 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.

  15. 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.

  16. 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.

  17. Rule (d) Code • Users can add another style sheet of their preference in Internet Explorer. Select: Tools | Options | Accessibility

  18. 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.

  19. 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.

  20. Rule (f) Code • Use the alt attribute.

  21. 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.

  22. 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.

  23. 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.

  24. Rule (h) Code • Use the id attributeto assign a unique identifier to each table header. Then, add to each <td> tag a headers attributethat identifies the header(s) associated with each data cell.

  25. Rule (h) Code

  26. Rule (i) • Frames shall be titled with text that facilitates frame identification and navigation. • Use both a title attribute and name attribute.

  27. Rule (i) Code

  28. 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

  29. 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.

  30. 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.

  31. 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.

  32. 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).

  33. Rule (m) Code • There are three tests to use with applets: • Users must be able to navigate without a mouse. • Users should be able to move from one element to another onscreen using the Tab key. • For every graphical element that conveys meaning or navigation, a textual equivalent must be available.

  34. 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.

  35. 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 attributethat you use to identify the ID of the <input> element with which the label is associated.

  36. Rule (n) Code

  37. 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.

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

  39. 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.

  40. Rule (o) Code • Create the skip navigation link and then the target to that link.

  41. 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.

  42. Making Applets, Helpers, and Plug-ins Accessible

  43. 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

  44. 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.

  45. Alternatives • Several alternative representations of an object may be necessary.

  46. 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.

  47. 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

  48. Accessibility Checker

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

More Related