Download as PDF, PPTX
Uploaded by3Play Media
Implementing and Evaluating Web Application Accessibility
The document discusses the importance of implementing and evaluating web application accessibility, emphasizing that accessibility is a continuous process that encourages good design and improves SEO and mobile content. It outlines guidelines for creating accessible content using the Web Content Accessibility Guidelines (WCAG) 2.0, which include best practices for perceived, operable, understandable, and robust web design. Key points include the necessity of meaningful semantics, keyboard accessibility, and thorough user testing to ensure true accessibility for all users.
More Related Content
Similar to Implementing and Evaluating Web Application Accessibility
Implementing and Evaluating Web Application Accessibility
- 1. 1 Implementing & EvaluatingWeb Application Accessibility Jared Smith Associate Director WebAIM @jared_w_smith www.3playmedia.com twitter: @3playmedia live tweet: #a11y ! Type questions in the window during the presentation ! Recording of presentation will be available for replay ! To view live captions, please click the link in the chat window Lily Bond (Moderator) 3Play Media Director of Marketing lily@3playmedia.com
- 2. Jared Smith @jared_w_smith webaim.org Implementing and EvaluatingWeb Application Accessibility
- 3. Accessibility ... ... isa continuum. ... is a process. ... can always be improved.
- 4. Accessibility ... ... encouragesgood design and development practices. ... supports SEO. ... supports internationalization. ... supports mobile-friendly content.
- 5. >8.5% of thepopulation has a disability that affects computer use
- 6. Guidelines are measureson the continuum of accessibility
- 7. Web Content Accessibility Guidelines2.0 •Levels - A, AA, and AAA •Finalized in 2008 •Principles-based and technology agnostic = ethereal and confusing •WebAIM’s WCAG 2.0 Checklist
- 8.
- 9.
- 11. Your site canbe compliant, yet inaccessible
- 12.
- 13. Your site canbe technically accessible, yet functionally inaccessible
- 14.
- 15. Auditory Disabilities •Captions forvideo & live audio •Text transcripts for all audio content
- 16.
- 18. Structure and Semantics Isthe application and content structured to facilitate understanding and navigation? Are the semantics of components meaningful and accurate?
- 19. Logical Heading Structure •Typically one <h1> per page. • Should define an ‘outline’ or table of contents. • Headings should be descriptive of page sections.
- 20. Regions • HTML5 • <header>,<nav>, <main>, <footer>, and <aside> • ARIA Landmarks • role=banner, complementary, contentinfo, main, navigation, or search • <div role=“region” aria-labelledby=“filterHeading”> <h2 id=“filterheading”>Filter</h2>
- 21. Semantics •Use meaningful links.Avoid “click here”. •Alternative text for non-text elements •Content and Function <img alt=“Jared Smith”>
- 22. •Form control labels <labelfor=“name”>Name:</label> <input type=“text” id=“name”> •Button values <button>Search</button> or <input type=“submit” value=“Search”> Semantics
- 23. •Associate data cellsto row/column headers <th scope=“col”> or <th scope=“row”> •Descriptive page titles <title>Introduction to Web Accessibility</title> •Define document language <html lang=“en”> Semantics
- 24. Semantics •HTML elements havedefault semantics, so use them. •When the semantics of HTML are not sufficient, then (and only then) can you use ARIA (Accessible Rich Internet Applications).
- 25. Rule #1 ofARIA: Don’t use ARIA
- 26. ARIA ARIA changes andenhances the default semantics of HTML elements to API values which screen readers already understand. <slider>???
- 27. Just use abutton!
- 28. Visual Disabilities •Sufficient contrast •http://webaim.org/resources/ contrastchecker/ •Ensurethat meaning is not conveyed with color alone
- 29.
- 30.
- 31. Operable •Ensure keyboard accessibility •Don’tremove focus indicators •Avoid outline:0 and outline:none •Ensure interactive elements are clearly distinguishable •Logical reading/navigation order
- 32. Operable •Programmatic focus shouldfollow visual focus •Allow user to skip over repetitive or lengthy lists of links •Give users control over time-sensitive changes
- 33. ARIA Enhancements • aria-expanded=“true| false” • aria-haspopup=“true” • aria-live=“assertive | polite | off” • aria-required=“true” • aria-invalid=“true” • role=“alert”, etc. BE CAREFUL!!!
- 34.
- 35. Who does thisaffect? •Users with cognitive or learning disabilities •Largest disability group. Larger than all the others put together. •Everyone!
- 36. Understandable •Be careful withmovement and other distracters •Use good organization (headings, lists, etc.) •Simplify and be consistent. •Avoid small text •Avoid long line lengths
- 37. Understandable •Focus the user’sattention •“Chunk” and simplify content •Balance cognitive load vs. functionality
- 38.
- 39. Does it workin the technologies my users have? Robust
- 40.
- 41. Evaluating Web Accessibility •Onlypeople can evaluate true accessibility •Use a checklist •WebAIM’s WCAG 2.0 Checklist •Perform keyboard testing •Test in a screen reader •Conduct user testing •Use automated tools
- 42.
- 43. “For people withoutdisabilities, technology makes things convenient, whereas for people with disabilities, it makes things possible.” - Judy Hueman
- 44.
- 45. 3 Presenters Jared Smith Associate Director WebAIM LilyBond (Moderator) 3Play Media Director of Marketing lily@3playmedia.com Q&A Upcoming Webinars: ! July 29: Accessibility at Yahoo ! August 4: Impact of Recent Lawsuits ! September 8: Quick Start to Captioning ! September 29: Fall 2016 Legal Update on Digital Accessibility Cases (with Lainey Feingold) You can register for these free webinars at: www.3playmedia.com/webinars/ Please type your questions into the window in your control panel. A recording of this webinar will be available for replay.