Cover image for Universal Design for Web Applications

Book description

Universal Design for Web Applications teaches you how to build websites that are more accessible to people with disabilities and explains why doing so is good business. It takes more work up front, but the potential payoff is huge -- especially when mobile users need to access your sites. You'll discover how to use standards-based web technologies -- such as XHTML, CSS, and Ajax, along with video and Flash -- to develop applications for a wide range of users and a variety of devices, including the mobile Web. You'll also learn specifics about this target audience, especially the key over-50 age group, whose use of the Web is rapidly growing. With this book, you will:

  • Learn the importance of metadata and how it affects images, headings, and other design elements

  • Build forms that accommodate cell phones, screen readers, word prediction, and more

  • Create designs using color and text that are effective in a variety of situations

  • Construct tables that present information without spatial cues

  • Design Ajax-driven social networking applications that people with disabilities can access

  • Provide audio with transcriptions and video that includes captions and audio descriptions

  • Discover assistive technology support for Rich Internet Application technologies such as Flash, Flex, and Silverlight

Universal Design for Web Applications provides you with a roadmap to help you design easy-to-maintain web applications that benefit a larger audience.

Table of Contents

  1. Universal Design for Web Applications
    1. A Note Regarding Supplemental Files
    2. Preface
      1. Audience
      2. How to Read This Book
      3. A Chapter Breakdown
      4. Conventions Used in This Book
      5. Using Code Examples
      6. Safari® Books Online
      7. How to Contact Us
      8. Acknowledgments
        1. Wendy’s Acknowledgments
        2. Matt’s Acknowledgments
    3. 1. Introducing Universal Design
      1. Accessible Design: A Story
      2. Putting Universal Design to Work
    4. 2. Selling It
      1. There Is No “Them”
      2. Audience Characteristics
        1. Configurability
      3. Growth Opportunity
      4. Legal Liability
      5. The Standards
        1. The World Wide Web Consortium (W3C) and the Web Accessibility Initiative (WAI)
        2. Web Content Accessibility Guidelines (WCAG)
        3. Authoring Tool Accessibility Guidelines (ATAG)
        4. User Agent Accessibility Guidelines (UAAG)
        5. The Accessible Rich Internet Applications Suite (WAI-ARIA)
        6. Mobile Web Best Practices (MWBP)
      6. Professionalism
      7. Early and Often
      8. Summary
    5. 3. Metadata
      1. What Is Metadata?
      2. Images
      3. Keys to Writing Good Text Alternatives
        1. Pictures of Recognizable Objects
          1. Links
          2. Graphs
          3. Logos
          4. Webcams
          5. CAPTCHA
          6. Image dimensions
        2. Document-Level Metadata
          1. Document type
          2. Language and character encoding
          3. Titles
        3. Role and State
        4. Relationships
        5. Link Text
      4. Summary
    6. 4. Structure and Design
      1. First Principles
        1. GET and POST
        2. Semantics
      2. Headings
      3. Links
      4. Tables
      5. Lists
      6. Color
        1. Color Differentiation
        2. Color Contrast
      7. CSS Highlights
        1. Liquid Layout
        2. Text Size
        3. Positioning
        4. Images
        5. Text Versus Images of Text
          1. What works now
          2. Web fonts
      8. Flicker and Patterns
      9. Designing for Email
      10. Summary
    7. 5. Forms
      1. Labels
      2. fieldset and legend
      3. The accesskey Attribute
      4. Tab Order
      5. Error Handling
        1. Client Side
        2. Server Side
      6. CAPTCHA
        1. The Future of Forms
      7. Summary
    8. 6. Tabular Data
      1. Data Table Basics
      2. Headings and Data
        1. Caption
      3. Complex Data Tables
        1. Summary
        2. Specifying Relationships Between Data and Headings
          1. Specifying relationships—another approach
      4. Readability, Layout, and Design
        1. Color
        2. Footnotes and Keys
        3. CSS
          1. Padding
          2. Column widths
          3. Borders
        4. pre
      5. Summary
    9. 7. Video and Audio
      1. Web Video: The Early Years
        1. Video and Universal Design
        2. Optimizing Web Video
      2. Accessibility in Video
        1. Captioning Your Video
        2. Hiring a Captioner
        3. Audio Description
        4. Accessible Mobile Video
      3. Transcripts and Text Alternatives
      4. Summary
    10. 8. Scripting
      1. Building on a Solid Foundation
        1. Disappearing (and Reappearing) Acts
          1. Keyboard activation
          2. Issues with :hover
          3. When the item to activate isn’t an active element
          4. When you don’t need an equivalent for :hover
          5. Issues with device-specific events
      2. Summary
    11. 9. Ajax and WAI-ARIA
      1. Taking Stock of Existing Code
        1. Code That Works Well Universally
        2. Code That Can Be Made to Work Universally
        3. Code That Needs a Workaround
        4. Support in Browsers
        5. Support in Assistive Technology
        6. Direct Accessibility—WAI-ARIA
          1. Process/mindset
          2. Roles
          3. States and properties
          4. Handling navigation and keyboard support
          5. Managing focus
          6. Dealing with updates
          7. aria-flowto
          8. aria-labelledby and aria-describedby
          9. Error handling, part 2
          10. Disabling controls
          11. Maintaining relationships
      2. Summary
    12. 10. Rich Internet Applications
      1. Features of RIAs
        1. Assistive Technology Support for RIAs
          1. Other accessibility APIs
        2. Flex Accessibility
        3. Creating the Look: Accessible Custom Components
        4. Creating the Feel: Accessible Custom Components
        5. Backend Considerations
      2. User-Generated Content
      3. Testing Your Code
        1. Microsoft Testing Tools
        2. ACTF
          1. AccProbe and aDesigner
        3. Photoshop CS4 and Illustrator CS4
      4. Summary
    13. 11. The Process
      1. Universal by Design
        1. Tools and Testing
        2. Development Tools
          1. Content management systems (CMSs)
          2. Building and managing templates
          3. Third-party and user-contributed content
          4. Mash-ups, repurposing, and community contributions
          5. Training and maintaining
        3. Evaluation Tools and Resources
          1. WAT
          2. WAVE 4.0
          3. Firebug
          4. W3C validation tools
          5. inspect32
          6. Accessibility Probe and Accerciser
          7. Browsers
          8. System accessibility
          9. Screen readers
          10. Magnification
          11. Testing for mobile
          12. People
        4. 20 Questions
          1. Question 1. Text alternatives
          2. Question 2. Multimedia
          3. Question 3. Link and control labels
          4. Question 4. Control groups
          5. Question 5. Meaningful structure
          6. Question 6. Nonsensory operation
          7. Question 7. Automatic audio
          8. Question 8. Keyboard-only operation
          9. Question 9. Bypass blocks
          10. Question 10. Page titles
          11. Question 11. Language
          12. Question 12. Predictable behavior
          13. Question 13. Error identification and resolution
          14. Question 14. Syntactical and runtime errors
          15. Question 15. Change notification
          16. Question 16. Timed response
          17. Question 17. Moving, blinking, and scrolling
          18. Question 18. Auto-update
          19. Question 19. Flashing content
          20. Question 20. Field testing
        5. Team Structures and Strategies
          1. The one-person team
          2. Small teams
          3. Larger teams
          4. Big organizations and free-for-alls
    14. A. Cross-Reference for Universal Design for Web Applications
    15. Index
    16. About the Authors
    17. Colophon