1 / 84

Accessible Website Design Building Complex Web Sites (SI539)

Accessible Website Design Building Complex Web Sites (SI539). Mike Elledge Assistant Director Usability & Accessibility Center (UAC) Michigan State University. Topics. Introduction (:05) Context of Accessibility (:15) Use of Adaptive Technology (:15)

fawzia
Download Presentation

Accessible Website Design Building Complex Web Sites (SI539)

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. Accessible Website Design Building Complex Web Sites (SI539) Mike Elledge Assistant Director Usability & Accessibility Center (UAC) Michigan State University

  2. Topics • Introduction (:05) • Context of Accessibility (:15) • Use of Adaptive Technology (:15) • Creating Accessible Websites (:90) • Criteria (:45) • Design (:45) • Evaluating Websites for Accessibility (:30) • Questions & Wrap-up (:25) • Resources -2-

  3. Introduction • Mike Elledge, Assistant Director, UAC, MSU • MSI School of Information, U of M • MBA Columbia University, New York • 8+ years usability testing and accessibility evaluation; 18+ years consumer marketing and research • Usability & Accessibility Center, MSU • State-of-art purpose-built center: training, focus group, and testing rooms; digital audio/video capture; remote viewing • Director: Sarah Swierenga, PhD Human Factors, U South Dakota; 20+ years human factors, usability testing; Lexis/Nexis, UDRI, University of Dayton faculty • Visit: http://usability.msu.edu -3-

  4. Context of Web Accessibility • Key aspects of Web Accessibility • Economic • Social • Legal • Practical • Use of Adaptive Technology -4-

  5. Economic Context • Persons with disabilities represent a large group • Twenty percent of population has some form of impairment • 54 million people • One in ten severe • One in two over 65 have reduced capabilities • The number will grow with aging Boomers • Estimated disposable income is between $175 and $220 Billion • Plus what they influence -5-

  6. Social Context • Disabilities cover a broad range of impairments and conditions • Temporary and permanent • Congenital and onset • Hearing—Conductive, sensorineural • Visual—Color blindness, low vision, blindness • Cognitive Impairments—ADD, TBI, Dyslexia • Physiological Impairments—MS, MD, CP, injuries, Carpal Tunnel -6-

  7. Share of Disabilities -7-

  8. Legal Context • Federal government must meet Section 508 requirements for its websites and applications • Provide persons with disabilities equal access to Federal information, and employees with disabilities equal access to electronic and information technology • ADA requirements being extended to e-commerce sites • Sexton and NFB vs. Target class-action suit • “The 'ordinary meaning' of the ADA's prohibition against discrimination…is that whatever goods or services the place provides, it cannot discriminate on the basis of disability in providing enjoyment of those goods and services." -8-

  9. Practical Context 1 • Persons with disabilities benefit • Adults with disabilities spend, on average, twice as much time online as adults without disabilities- 20 hours per week compared to 10 hours per week. • Adults with disabilities are much more likely than adults without disabilities to report that the Internet has significantly improved the quality of their lives (48% vs. 27%) “How the Internet is Improving the Lives of Americans with Disabilities,” Humphrey Taylor, Harris Poll #30, June 7, 2000 -9-

  10. Practical Context 2 • “Non-impaired” users benefit • “Curb-cut Analogy” • Usability improvements • Business benefits • Paying attention to content = “Staying On-Message” • Minimizing Clutter = Emphasizes Branding • Expanded customer base • Legal protection • Good will -10-

  11. Use of Adaptive Technology • Persons with disabilities use websites differently • Blind persons listen to sites • Persons with low vision enlarge their screens • Color blind persons can’t differentiate some colors • Deaf persons read sites • Physically impaired persons use tools • Persons with cognitive issues need help understanding andfocusing -11-

  12. Adaptive Technology Users • Kyle (Blind person): www.webaim.org/media/video/kyle/kyle.asx • Curtis (Deaf person): www.webaim.org/media/video/curtis/curtis.asx • Gordon (Quadraplegic): www.webaim.org/media/video/gordon/gordon.asx -12-

  13. Creating Accessible Websites--Criteria • Section 508 • WCAG 2.0 • ARIA 1.0 -13-

  14. Section 508 vs. WCAG 1.0--Definitions • Section 508 • Required for websites and software developed by, and for, Federal government • Often used in U.S. as standard • Derived in consultation with W3C • WCAG 1.0 • Voluntary guidelines developed by Web Accessibility Initiative (WAI) of the W3C (World Wide Web Consortium) • Used outside U.S. as standard -14-

  15. Section 508 vs. WCAG 1.0--Characteristics • Section 508 • Descriptive—Not so much “how,” but “what” www.access-board.gov/sec508/guide/ 1194.22.htm • WCAG 1.0 • Prescriptive—”How” • HTML-focused • Can be more comprehensive than 508, depending on priority level chosen (I, II or III) www.w3.org/TR/WAI-WEBCONTENT/full-checklist.html -15-

  16. Text equivalent for images (A) Synchronized multimedia captioning (A) Information not color dependant (A) Readable without style sheet (A) Redundant text links for image maps (A) Client-side image maps (A) Row and column headers for data tables (A) Associate data with headers in complex tables (A) Title frames with text (A) No page flicker (A) A text-only version only when no alternative (A) Accessible alternative to scripting (A) Links to accessible plug-ins or applets (AA) Make forms accessible (AA) Ability to skip repetitive navigation links (AAA) Notification of timed response and ability to notify if more time is needed (not in WCAG 1.0) Section 508: Hybrid of WCAG 1.0 http://www.jimthatcher.com/sidebyside.htm#WCAGView -16-

  17. WCAG 1.0 • Web Accessibility Initiative (WAI) • Web Content Accessibility Guidelines • Priority One: MUST be done • Priority Two: SHOULD be done • Priority Three: MAY be done (helpful) • Based on specific html-based standards -17-

  18. Approach • WCAG 1.0 • Primarily HTML-oriented • Elements • Guidelines > Checkpoints: Must (Priority One), should (Two) and may (Three) > Conformance: “A,” “AA”, and “AAA” • WCAG 2.0 • Technology-independent • Elements • Conformance and Success Criteria Requirements • Principles: Perceivable, Operable, Understandable, Robust (POUR) > Guidelines > Success criteria: Levels “A”, “AA” and “AAA” > Techniques: Sufficient, Advisory -18-

  19. WCAG 2.0 • Released December 2008 • More streamlined & guidelines broader in scope to accommodate variety of technologies -19-

  20. Why WCAG 2.0? • Experience providing accessibility has grown • Some requirements outdated (“must work with JS turned off”) • Some requirements reconsidered (“Skip to Main Content” OR headings) • Requests for greater specificity, more technical guidance for HTML, non-HTML • Web has evolved • HTML is no longer only game in town • AJAX, DHTML, XML, Flash • User agents have more control over content (“Until user agents…”) • Standards have changed • XHTML 1.0 (August 2002) • CSS 2.0 > CSS 2.1 > CSS 3.0 (mostly working drafts) • HTML 4.01 > HTML 5.0 (in process) • Adaptive technology has improved • Support PDF, JavaScript, ARIA, Flash • Adobe, Microsoft text-to-speech built-ins • Browsers more advanced • Firefox 3, IE 8 support ARIA, CSS -20-

  21. What is WCAG 2.0? • Web Content Accessibility Guidelines (W3C) • 1.0: May, 1999 • 2.0: December, 2008 • Related documents • Understanding WCAG 2.0: http://www.w3.org/TR/UNDERSTANDING-WCAG20/ • Techniques for WCAG 2.0: http://www.w3.org/TR/WCAG20-TECHS/ • Four principles of accessibility • Perceivable • Operable • Understandable • Robust • Twelve guidelines (4, 4, 3, 1) • 61 success criteria (22, 20, 17, 2) • Level A, Level AA, Level AAA • 264 Sufficient and advisory techniques, failures -21-

  22. WCAG 2.0 Principles • Perceivable • Provide text alternatives for non-text content. • Provide captions and alternatives for audio and video content. • Make content adaptable; and make it available to assistive technologies. • Use sufficient contrast to make things easy to see and hear. • Operable • Make all functionality keyboard accessible. • Give users enough time to read and use content. • Do not use content that causes seizures. • Help users navigate and find content. • Understandable • Make text readable and understandable. • Make content appear and operate in predictable ways. • Help users avoid and correct mistakes. • Robust • Maximize compatibility with current and future technologies. -22-

  23. WCAG 2.0 Guidelines 1.1 Text Alternatives Provide text alternatives for any non-text content so that it can be changed into other forms people need, such as large print, Braille, speech, symbols or simpler language 1.2 Time-based Media Provide alternatives for time-based media 1.3 Adaptable Create content that can be presented in different ways (for example simpler layout) without losing information or structure. 1.4 Distinguishable Make it easier for users to see and hear content including separating foreground from background. 2.1 Keyboard Accessible Make all functionality available from a keyboard. 2.2 Enough Time Provide users enough time to read and use content. -23-

  24. WCAG 2.0 Guidelines 2.3 Seizures Do not design content in a way that is known to cause seizures. 2.4 Navigable Provide ways to help users navigate, find content and determine where they are. 3.1 Readable Make text content readable and understandable. 3.2 Predictable Make Web pages appear and operate in predictable ways. 3.3 Input Assistance Help users avoid and correct mistakes. 4.1 Compatible Maximize compatibility with current and future user agents, including assistive technologies. -24-

  25. What does it mean for me? • Designers/Developers • Greater freedom • Greater responsibility • Higher expectations • Evaluators • Requirements more precisely testable • Past evaluations using WCAG 1.0 still applicable • Future evaluations using WCAG 2.0 • Most tests still relevant • Some no longer necessary • Some additional -25-

  26. Keywords and Concepts • Accessibility-supported • Technology that is accessibility-supported works with assistive technologies (AT) and the accessibility features of operating systems, browsers, and other user agents. Technology features can be relied upon to conform to WCAG 2.0 success criteria only if they are used in a way that is "accessibility supported". • Change of context • Major changes in the content of the Web page that, if made without user awareness, can disorient users who are not able to view the entire page simultaneously. • Conformance • Satisfying all the requirements of a given standard, guideline or specification. • Info and relationships • Information and relationships that are implied by visual or auditory formatting are preserved when the presentation format changes. For example, the presentation format changes when the content is read by a screen reader or when a user style sheet is substituted for the style sheet provided by the author. -26-

  27. Keywords and Concepts (continued) • Meaningful sequence • Enables a user agent to provide an alternative presentation of content while preserving the reading order needed to understand the meaning. It is important that it be possible to programmatically determine at least one sequence of the content that makes sense. • Name, role, value • Text (or number) by which software can identify a component, function or value within Web content to a user. • Example: A number that indicates whether an image functions as a hyperlink, command button, or check box. • Programmatically-determined • Content is authored in such a way that user agents, including assistive technologies, can access the information. • User interface component • A part of the content that is perceived by users as a single control for a distinct function. • Web page • Encompasses both static and dynamic representations of content. -27-

  28. Underlying Conformance • There are five Conformance Requirements that must be achieved for each Web page to be compliant with WCAG 2.0 • Conformance levels • Levels A, AA, or AAA must be attained or an alternate conforming version be provided • Authors are encouraged to report any progress toward meeting success criteria from all levels beyond the achieved level of conformance. • Not recommended that Level AAA conformance be required as a general policy for entire sites because it is not possible to satisfy all Level AAA Success Criteria for some content. • Full pages only • No excluding portions of page • Complete processes • All Web pages in a process must conform • Only accessibility-supported ways of using technologies • Can satisfy success criteria • Non-interference • If technologies are not accessibility supported or are non-compliant they do not block access to the rest of the page -28-

  29. General Success Criteria • All content must also meet these success criteria: • Audio control • Mechanism for pausing, stopping or controlling volume if audio plays automatically for more than three seconds. • No keyboard trap • If focus can be moved to component using keyboard, it can also be moved away using keyboard. Tell user of non-standard keystrokes. • Three flashes or below threshold • Nothing flashes more than three times in any one second period; flash is below general flash and red flash thresholds. • Pause, stop hide • Any moving, blinking, scrolling or auto-updating information that 1) starts automatically, (2) lasts more than five seconds, and (3) is presented in parallel with other content, has mechanism for user to pause, stop or hide it unless it is essential to an activity. -29-

  30. Technical Detail • There is far more detail about how guidelines can be met. • WCAG 1.0 • 7.1: Until user agents allow users to control flickering, avoid causing the screen to flicker. [Priority 1] • WCAG 2.0 • 2.3.1 Three Flashes or Below Threshold:Web pages do not contain anything that flashes more than three times in any one second period, or the flash is below the general flash and red flash thresholds. (Level A) • Note: Since any content that does not meet this success criterion can interfere with a user's ability to use the whole page, all content on the Web page (whether it is used to meet other success criteria or not) must meet this success criterion. See Conformance Requirement 5: Non-Interference. • 2.3.2 Three Flashes:Web pages do not contain anything that flashes more than three times in any one second period. (Level AAA) -30-

  31. Examples -31-

  32. WCAG 2.0 • See Handout -32-

  33. Creating Accessible Websites--Design • Components of website accessibility • Organization • Navigation • Presentation • Content -33-

  34. Organization • Provides context for persons with disabilities, by describing organization of page and content • Metadata • Page Title • Divs • Lists • Headings • Frame Attributes • Also improves search engine indexing -34-

  35. Organization--Metadata • Describes page content and can be used to navigate • Search bots use metadata for indexing • “Link” relationship tag: “Alternate,” “Index,” “Next,” “Prev,” “Home”, etc. recognized by Lynx, Opera, iCab, Firefox* • “Meta” tag within <head> section: “Description,” “Keywords,” “Author” Example: <meta name="keywords" content="Accessibility, usability” /> <link rel=“prev" title=“Chapter 1” href="Chapter1.html" /> * “Dive Into Accessibility,” http://diveintoaccessibility.org/day_9_providing_additional_navigation_aids.html -35-

  36. Organization--Page Titles • First item announced by a screen reader • Can be spoken on request • Press “<Insert> plus t” to hear title • Provide contextual information in breadcrumb format • “Travelers By Design: Registration” • “Title” tag within <head> section Example: <title>Main Page--Accessibility and Website Design Website</title> <title>Table Formatting—Formats Section--Accessibility and Website Design Website</title> -36-

  37. Organization--Div • Adds structure and semantic meaning to page content • Is not parsed by screen reader, but enables (for example) content to be read before navigation; facilitates clean code • Can also be a hook for JavaScript operations • “Div” tag within <body> section Example: <div id=“news”> <h3>Zeldman.com turns 10</h3> <p>Another milestone for Jeffrey as zeldman.com turns 10 today</p> <p><a href=“news.php”>More news about zeldman.com</a></p> </div> -37-

  38. Organization--Lists • Add structure and semantic meaning to page content • Is announced as “List of x items” • “Ul” and “li” tags within <body> Example: <ul> <li><a href="services_expertRev.asp">Expert Review</a></li> <li><a href="services_UserExp.asp">User Experience Evaluation</a></li> <li><a href="services_Research.asp">Research</a ></li> <li><a href="services_training.asp">Training</a ></li> <li><a href="facilities_rental.asp">Facility Rental</a ></li> </ul> -38-

  39. Organization--Headings • Provide context and can be used to navigate • Press “h” to move through page • Headings are read aloud along with their level: “Accessible design matters, heading level one” • Press <Insert> + F6 to see/hear list • “h1,” “h2”, etc. within <body> tag Example: <h1>Accessible Design Matters!</h1> <h2>This Site and You</h2> <p>This site has been developed to help you design accessible websites and web-based software.</p> -39-

  40. Organization--Frame Attributes • Best to avoid frames • Accesskeys don’t work across frames, violates user mental construct of “page” • Users may be confused about “page” (frame) they are on or where they are on page • But if you use them… • Include “title,” “name,” “% sizing” within <frame> tag • Use “title” and “name” to describe content • Duplicate content in <noframes> sections • Use heading tags (<h1>, etc.) for cross-frame navigation -40-

  41. Organization—Tips • Retrofitting a site • Always work on a duplicate site, not your live site • Validate your code and convert your site to XHTML 1.0 • If you are using Dreamweaver, activate Accessibility prompts • Frequently review your changes, especially changes to CSS • Use headings to complement site architecture • Make sure hierarchy (h1, h2) is consistent page to page • Avoid using nested lists (i.e., multi-level dropdown menus) -41-

  42. Navigation • Helps users move easily through site by tabbing or skipping repetitive links • Uses screen reader features and browser capabilities • Page Links • Skip Links • Accesskeys • Tab Ordering -42-

  43. Navigation--Page Links • Users surf by tabbing through links • Can also list links with <Insert> + f7 • Will read: “Link about this site” • Must make sense out of context • Include the “title” attribute • User can set screen reader to read longest text • Sighted users can see title with mouseover Example: <a href="About.html" title="Information about this site”> About this site</a> -43-

  44. Navigation--Skip Links • Enable users to skip over navigation bar • To avoid repetition on each page • Will read: “Skip to main content same page link” • Ideally should be visible to help all keyboard users • Often used in combination with accesskey • Top of page: <a href=“#Content”>; where content begins: <a name=“Content”> Example: <a href="#Content” title=“Skip to Content” >Skip to Main Content</a> <h1><a name="Content”></a>Welcome...</h1> -44-

  45. Navigation--Accesskeys • Enable users to go directly to link or form input • Will read: “Destinations link alt plus d” • User presses Alt key plus accesskey to set focus • Then press <enter> to implement • Should be used sparingly—some say not at all because of browser conflicts • If you want to us them, we recommend: • Numeric keys, as suggested by UK eCommerce Dept. -45-

  46. Navigation--UK Accesskey Standard • UK standard for non-letter-based accesskeys: 1 - Home page2 - What's new3 - Site map4 - Search5 - Frequently Asked Questions (FAQ)6 - Help7 - Complaints procedure8 - Terms and conditions9 - Feedback form0 - Access key details plus S - Skip navigation http://www.cabinetoffice.gov.uk/e-government/resources/handbook/html/2-4.asp -46-

  47. Navigation--Accesskey Implementation • Example: <a href="Accessibility.html" title=“Accessibility Information about this site: alt + 0” accesskey=”0”>Accessibility page (0)</a> -47-

  48. Navigation--Tab Ordering • Enables user to tab through site in logical way • Creates reading order for links and inputs (from “0” to “32767”) • “Taborder” within the <a href> tag • Not necessary if web page linearizes (tabs) properly • Tab = “0” enables part of page to receive focus, even if it is not a link or form field Example: <a href="About.html" title="Information about this site: Alt + A" class="BottomNav" accesskey=”A" tabindex="121”> About this site (A)</a> -48-

  49. Navigation—Tips • Ensure navigation text matches destination page titles • Accesskeys • Don’t overdo it; 3-4 numeric keys • Include an accesskey to an Accessibility page on your site that tells screen reader users how to navigate your site • Make navigation headings clickable and provide a destination page with meaningful content -49-

  50. Presentation • Not everyone “sees” the same page • Blindness, color blindness and visual impairments affect millions of people • Meaningful descriptions, adequate contrast and “safe” color combinations help level the playing field • Alt tags • Text images • Links • Relative sizing • Color • Contrast -50-

More Related