Fringe Accessibility: Booster 2016
•Download as PPTX, PDF•
1 like•1,300 views
Slides from my workshop on accessibility at Booster Conference 2016 in Bergen, Norway. 23 different techniques for fun and awesomeness.
Report
Share
Fringe Accessibility: Booster 2016
- 1. Fringe Accessibility Techniques (That Probably Shouldn’t Be) Presented by Adrian Roselli for Booster Conference 2016 #booster2016 Slides from this talk will be available at rosel.li/Booster
- 2. What We’ll Cover • Intro • The (not really) Fringe • Key Takeaways Work with me, people.
- 3. Intro 1 of 3 sections.
- 4. About Adrian Roselli • Co-written four books. • Technical editor for two books. • Written over fifty articles, most recently for .net Magazine and Web Standards Sherpa. • You might know me from the food lines downstairs. Great bedtime reading!
- 5. About Adrian Roselli • Member of W3C HTML Working Group*, W3C Accessibility Task Force, five W3C Community Groups. • Building for the web since 1994. • Business owner / founder, ~20 years. • Now independent / unemployed. • Learn more at AdrianRoselli.com. • Avoid on Twitter @aardrian. I warned you.
- 6. What is a11y? • A numeronym for “accessibility”: • The first and last letter, • The number of characters omitted. • Prominent on Twitter (character restrictions): • #a11y • Examples: • l10n → localization • i18n → internationalization Ain’t language funsies?
- 7. Accessibility Gets No Respect In fairness, Sherwin Williams needs to come up with a lot of color names... “Cyberspace” (gray) “Online” (blue) “Lime Rickey” (green)
- 8. Accessibility Gets No Respect …however I think the team could have done better than this.
- 9. Any Disability • In the United States: • 10.4% aged 21-64 years old, • 25% aged 65-74 years old, • 50% aged 75+. • Includes: • Visual • Hearing • Mobility • Cognitive http://www.who.int/mediacentre/factsheets/fs282/en/ http://www.disabilitystatistics.org/reports/2012/English/HTML/report2012.cfm?fips=2000000&html_year=2012
- 10. Vision Impairments • 285 million worldwide: • 39 million are blind, • 246 million have low vision, • 82% of people living with blindness are aged 50 and above. • 1.8% of Americans aged 21-64. • 4.0% of Americans aged 65-74. • 9.8% of Americans aged 75+. http://www.who.int/mediacentre/factsheets/fs282/en/ http://www.disabilitystatistics.org/reports/2012/English/HTML/report2012.cfm?fips=2000000&html_year=2012
- 11. Hearing Impairments • 360 million people worldwide have disabling hearing loss. • 17% (36 million) of American adults report some degree of hearing loss: • 18% aged 45-64 years old, • 30% aged 65-74 years old, • 47% aged 75+ years old. http://www.who.int/mediacentre/factsheets/fs300/en/ https://www.nidcd.nih.gov/health/statistics/Pages/quick.aspx
- 12. Mobility Impairments • In the United States: • 5.5% aged 21-64 years old. • 15.6% aged 65-74 years old. • 32.9% aged 75+. http://www.disabilitystatistics.org/reports/2012/English/HTML/report2012.cfm?fips=2000000&html_year=2012
- 13. Cognitive Impairments • Dyslexia, • Dyscalculia, • Memory issues, • Distractions (ADD, ADHD), • In the United States: • 4.3% aged 21-64 years old. • 5.4% aged 65-74 years old. • 14.4% aged 75+. http://www.disabilitystatistics.org/reports/2012/English/HTML/report2012.cfm?fips=2000000&html_year=2012&subButton=Get+HTML
- 14. The (not really) Fringe 2 of 3 sections.
- 15. Use @alt Text on Images
- 16. Use @alt Text on Images
- 17. Use @alt Text on Images • Can you still make sense of the page? • Is content missing? • Can you still use the site? • Is your alt text useful? http://www.karlgroves.com/2013/09/05/the-6-simplest-web-accessibility-tests-anyone-can-do/
- 18. Use @alt Text on Images http://www.4syllables.com.au/2010/12/text-alternatives-decision-tree/ http://dev.w3.org/html5/alt-techniques/#tree 1. What role does image play? 2. Does it present new info? 3. What type of info? Informative Yes alt="" or <a href="foo"><img alt="">Link</a> alt="" or Use CSS alt="descriptive identification" or alt="short label" + caption PurelyDecorative Sensory No alt="label for link" alt=“short alternative" or alt="short label" + caption alt="short label + location of long alternative" or long text alternative on same or linked page Long/Complex Short/Simple
- 20. Use On-Page Descriptions • Not just for longdesc or aria-describedat, but any long description technique, • Use an in-page anchor, • Don’t link to another page without reason: • Consider burden of loading a new page, • Consider burden of re-loading original page. • Based on results of latest WebAIM screen reader survey results. http://adrianroselli.com/2015/09/use-on-page-image-descriptions.html
- 22. Hyperlinks! • Is there any “click here,” “more,” “link to…”? http://www.sitepoint.com/15-rules-making-accessible-links/
- 23. Hyperlinks! • Is there any “click here,” “more,” “link to…”? • Are you using all-caps, URLs, emoticons? http://www.sitepoint.com/15-rules-making-accessible-links/
- 24. Hyperlinks! • Is there any “click here,” “more,” “link to…”? • Are you using all-caps, URLs, emoticons? • Do you warn before opening new windows? http://www.sitepoint.com/15-rules-making-accessible-links/
- 25. Hyperlinks! • Is there any “click here,” “more,” “link to…”? • Are you using all-caps, URLs, emoticons? • Do you warn before opening new windows? • Do links to downloads provide helpful info? http://www.sitepoint.com/15-rules-making-accessible-links/
- 26. Hyperlinks! • Is there any “click here,” “more,” “link to…”? • Are you using all-caps, URLs, emoticons? • Do you warn before opening new windows? • Do links to downloads provide helpful info? • Are you using pagination links? http://www.sitepoint.com/15-rules-making-accessible-links/
- 27. Hyperlinks! • Is there any “click here,” “more,” “link to…”? • Are you using all-caps, URLs, emoticons? • Do you warn before opening new windows? • Do links to downloads provide helpful info? • Are you using pagination links? • Are your links underlined (or otherwise obvious)? http://www.sitepoint.com/15-rules-making-accessible-links/
- 28. Hyperlinks! • Is there any “click here,” “more,” “link to…”? • Are you using all-caps, URLs, emoticons? • Do you warn before opening new windows? • Do links to downloads provide helpful info? • Are you using pagination links? • Are your links underlined (or otherwise obvious)? • Is there alt text for image links? http://www.sitepoint.com/15-rules-making-accessible-links/
- 29. Hyperlinks! • Is there any “click here,” “more,” “link to…”? • Are you using all-caps, URLs, emoticons? • Do you warn before opening new windows? • Do links to downloads provide helpful info? • Are you using pagination links? • Are your links underlined (or otherwise obvious)? • Is there alt text for image links? • Is the link text consistent? http://www.sitepoint.com/15-rules-making-accessible-links/
- 31. Use Link Underlines • You are not Google: • Users know Google’s layout, • Users probably don’t visit your site daily. • Relying on color alone will not suffice (WCAG 1.4.1 [A], 1.4.3 [AA]), • Necessary contrast values: • 4.5:1 between text and its background for copy, • 3:1 between text and its background for larger text, • 3:1 between surrounding text and a hyperlink, plus an additional visual cue (G183). http://adrianroselli.com/2014/03/i-dont-care-what-google-did-just-keep.html
- 33. Use :focus Styles • Particularly if you removed link underlines, • Everywhere you have :hover, add :focus, • Look for :focus{outline:none;} in libraries: • If you find it, remove it. • Easy to test with the tab key. http://adrianroselli.com/2014/06/keep-focus-outline.html
- 37. Color Contrast • Is there enough contrast? • Are hyperlinks, menus, etc. still visible? • WCAG 2.0: • 4.5:1 for normal text • 3:1 for large text (14+pt & bold, or 18+pt) • Tools: • Chrome Color Contrast Analyzer • Lea Verou’s Contrast Ratio • WebAIM Color Contrast Checker • CheckMyColours.com http://www.inpixelitrust.fr/blog/en/tips-create-accessible-color-palette/ http://alistapart.com/blog/post/easy-color-contrast-testing
- 39. Use <label> (properly) • Match the for attribute to the field’s id attribute. • When you click label text next to a text box, does the cursor appear in the field? • When you click label text next to a radio / checkbox, does it get toggled? • When you click label text next to a select menu, does it get focus? http://www.karlgroves.com/2013/09/05/the-6-simplest-web-accessibility-tests-anyone-can-do/
- 40. Use HTML5
- 41. Use HTML5 <header role="banner"> <nav role="navigation"> <aside role="complementary"> <form role="search"> <footer role="contentinfo"> <main role="main">
- 42. Use HTML5 “Mobile” often means narrow screen in RWD, as well as this context.
- 43. Use HTML5 <header role="banner"> <nav role="navigation"> <aside role="complementary"> <form role="search"> <footer role="contentinfo"> <main role="main"> “Mobile” often means narrow screen in RWD, as well as this context.
- 44. Use HTML5 • Sectioning elements already have accessibility built in. Use them. • <header> • <nav> • <main> (one per page) • <aside> • <footer> • <form> (a search form) This stuff is baked in!
- 45. Use Only One <main> per Page Modified version of Hixie’s image at https://github.com/whatwg/html/issues/100#issuecomment-138620240
- 46. Use Only One <main> per Page • <main> maps directly to role="main", • AT users expect one main content block, may miss subsequent <main>s, • AT doesn’t expose that are multiples, • Can erode trust in landmark navigation. http://adrianroselli.com/2015/09/use-only-one-main-on-a-page.html
- 47. Use <h#> Wisely
- 48. Use <h#> Wisely • Use only one <h1> per page, • Don’t skip heading levels, • Use appropriate nesting, • There is no Document Outline Algorithm: • Don’t use <h1> within every new <section> nor <article>, • This will not affect your SEO. http://adrianroselli.com/2013/12/the-truth-about-truth-about-multiple-h1.html
- 49. <button>, <input>, or <a> http://adrianroselli.com/2016/01/links-buttons-submits-and-divs-oh-hell.html
- 50. <button>, <input>, or <a> http://adrianroselli.com/2016/01/links-buttons-submits-and-divs-oh-hell.html
- 51. <button>, <input>, or <a> • Don’t use a <div> nor <span>. • Does the control take me to another page? • Use an <a href> . • Note: does not fire on space-bar. • Does the control change something on the current page? • Use a <button>. • Does the control submit form fields? • Use a <input type="submit"> or <button type="submit">. http://adrianroselli.com/2016/01/links-buttons-submits-and-divs-oh-hell.html
- 52. Don’t Use tabindex > 0 https://www.digitalgov.gov/2014/11/17/user-experience-impossible-the-line-between-accessibility-and-usability/
- 53. Don’t Use tabindex > 0 • tabindex="-1" • Use to set focus with script, • Does not put it in tab order of page. • tabindex="0" • Allows user to set focus (eg: via keyboard), • Puts in tab order of page (based on DOM). ��� tabindex="1" (or greater) • Do not do this, • Messes with natural tab order. http://adrianroselli.com/2014/11/dont-use-tabindex-greater-than-0.html
- 54. Maybe Use tabindex = 0 http://adrianroselli.com/2016/02/keyboard-and-overflow.html
- 55. Maybe Use tabindex = 0 • Do you have scrolling content boxes? • Keyboard users cannot access it. • Do you have content that displays on hover? • Keyboard users probably cannot access it. • A technique: • <div role="region" aria-label="[if appropriate]" tabindex="0"> http://adrianroselli.com/2016/02/keyboard-and-overflow.html
- 56. Set lang attribute on <html> http://codepen.io/aardrian/pen/rOGYNL
- 57. Set lang attribute on <html> http://codepen.io/aardrian/pen/rOGYNL
- 58. Set lang attribute on <html> • VoiceOver uses to auto-switch voices, • VoiceOver uses appropriate accenting, • JAWS loads correct phonetic engine / phonologic dictionary, • NVDA matches VoiceOver and JAWS, • Use the correct lang value: • Sub-tags are ok, • Avoid private-use: en-GB-x-hixie http://adrianroselli.com/2015/01/on-use-of-lang-attribute.html
- 60. Source Order Matters • CSS techniques allow visual order to break from DOM order: • Floats, • Absolute positioning, • Flexbox (see 5.4.1 of ED for a11y note), • Grid (read Rachel Andrew on subgrid). • WCAG 1.3.2 and 2.4.3 describe meaningful sequence and tab order matching visual flow, • Different behavior among different browsers. http://adrianroselli.com/2015/09/source-order-matters.html http://200ok.nl/a11y-flexbox/
- 61. Don’t Disable Zoom http://codepen.io/aardrian/full/dYNJOV http://codepen.io/aardrian/full/ojBpjw
- 62. Don’t Disable Zoom • Allow users on mobile to zoom in, • Look in <meta name="viewport"> for this: • minimum-scale=1.0 • maximum-scale=1.0 • user-scalable=no • Look in @-ms-viewport {} for this: • zoom:1.0 • Enhance! • (Google AMP HTML is getting fixed) http://adrianroselli.com/2015/10/dont-disable-zoom.html
- 64. Avoid Infinite Scroll • Makes it impossible to access some content: • Footer, • Sidebar links. • Destroys the back button, • Makes it impossible to share a URL to specific “page” of results, • Makes it impossible to jump ahead several “pages” of results, • Can overwhelm AT users, less powerful devices. http://adrianroselli.com/2014/05/so-you-think-you-built-good-infinite.html http://adrianroselli.com/2015/05/for-infinite-scroll-bounce-rate-is.html
- 65. Reconsider Typefaces for Dyslexia http://opendyslexic.org/try-it/
- 66. Reconsider Typefaces for Dyslexia • Use good typography rules: • Avoid justified text, • Use generous line spacing / leading, • Use generous letter spacing, • Avoid italics, • Generally use sans serif faces, • Use larger text, • Use good contrast, • Use clear, concise writing. http://adrianroselli.com/2015/03/typefaces-for-dyslexia.html
- 67. Test in Windows High Contrast Mode
- 68. Test in Windows High Contrast Mode • It removes CSS background images, • Colors defined in your CSS are overridden, • To activate: • Left ALT + left SHIFT + PRINT SCREEN • Media queries: • -ms-high-contrast: active • -ms-high-contrast: black-on-white • -ms-high-contrast: white-on-black http://adrianroselli.com/2012/08/css-background-images-high-contrast-mode.html
- 71. Use Captions/Subtitles • Everybody uses them: • Working in public, in bed, at home, • Surfing in public, in bed, at work. • Should include audio descriptions, • Should include speaker identification, • Review auto-captions (“craptions”): • NoMoreCraptions.com http://adrianroselli.com/2013/11/captions-in-everyday-use.html
- 72. Use Captions/Subtitles • Do video/audio clips have text alternatives? • Are links to closed-captions or transcripts built into the player or separate text links? • Is there an audio description available? • Tools: • Media Access Australia YouTube captioning tutorial, Vimeo captioning tutorial, • Tiffany Brown’s WebVTT tutorial, • DIY Resources for Closed Captioning and Transcription from 3 Play Media. http://webaim.org/techniques/captions/
- 73. Don’t Tweet Pictures of Text https://twitter.com/jmspool/status/546303256990076929 https://twitter.com/lukew/status/541986091960528896 https://twitter.com/altonbrown/status/653030164985708544
- 74. Don’t Tweet Pictures of Text • Twitter has no provision for alt text, • Make your own: • Reply to own tweet with alt text, • Link to a tweet and provide alt text, • Link to long-form alternative text. • @alt_text_bot as interesting experiment: • By Cameron Cundiff for NYU ABILITY hackathon, • Uses CloudSight API. http://adrianroselli.com/2014/12/dont-tweet-pictures-of-text.html http://adrianroselli.com/2015/04/twitter-accidentally-takes-step-toward.html http://adrianroselli.com/2015/04/alt-text-bot-image-descriptions-ftw.html
- 76. Share a11y Experiences • We’re all trying to do what we can, • Don’t attack someone who doesn’t know what they don’t know, • Someone may find something you never considered, • You may get feedback on something you never considered, • a11ywins.tumblr.com FTW: • Thanks to Marcy Sutton. http://adrianroselli.com/2015/07/lets-share-more-accessibility-experiences.html
- 77. Tweak User Stories & Personas • Components: • User, • Outcome, • Value. • Writing: • As user, I want outcome. • As user, I want outcome so that value. • In order to get value as user, I want outcome. How to Write User Stories for Web Accessibility
- 78. Tweak User Stories & Personas • As a user on a sun-lit patio, I want to be able to read the content and see the controls. Add beer and as a user I may have trouble focusing.
- 79. Tweak User Stories & Personas • As a user in bed with a sleeping spouse, I want to watch a training video in silence so that I can get caught up at work. As a user who doesn’t want to get punched for having slacked off at work.
- 80. Tweak User Stories & Personas • In order to click links as a user with no elbow room in coach class with a tiny trackpad, I want click areas to be large enough and adequately spaced. As a user in coach class who also paid too much for the drink he’s spilling on his keyboard.
- 81. Tweak User Stories & Personas • As a user distracted by the TV, I want clear headings and labels so that I don’t lose my place. As a user who really should be finishing his work in the office.
- 82. Tweak User Stories & Personas Adrian • Works when he should be relaxing, relaxes when he should be working. • Lives between motorcycles. • Works late at night with the TV on. • Uses sub-titles in Netflix. • Keeps all screens as dark as possible. That photo is from official ID.
- 83. Key Takeaways 3 of 3 sections.
- 84. Stairamp Dean Bouchard on Flickrhttp://incl.ca/the-problems-with-ramps-blended-into-stairs/
- 85. ≠ Checklist • Accessibility is not a checklist. No matter how pretty that checklist looks nor how many items you get to check.
- 86. Snowtreeramp Nicolas Steenhouthttps://twitter.com/vavroom/status/571092086365261824 “Wheelchair ramp at pharmacy not only hasn’t been cleared of snow but has 2 potted trees to ensure nobody can pass.”
- 87. = Process • Accessibility is not a checklist. • Accessibility is an ongoing process. You know, kinda like all software.
- 88. Presented by Adrian Roselli for Booster Conference 2016 My thanks and apologies. Slides from this talk will be available at rosel.li/Booster Fringe Accessibility Techniques (That Probably Shouldn’t Be)