O slideshow foi denunciado.
Utilizamos seu perfil e dados de atividades no LinkedIn para personalizar e exibir anúncios mais relevantes. Altere suas preferências de anúncios quando desejar.

Selfish Accessibility — YGLF Vilnius

450 visualizações

Publicada em

We can pretend that we’re helping others by making websites and software accessible, but we are really making them better for our future selves. Learn some fundamentals of accessibility and how it can benefit you (whether future you from ageing or you after something else limits your abilities).

We’ll review simple testing techniques, basic features and enhancements, coming trends, and where to get help. This is an overall primer for those who aren’t sure where to start nor how it helps them.

Publicada em: Internet
  • Seja o primeiro a comentar

Selfish Accessibility — YGLF Vilnius

  1. 1. Introductions
  2. 2. • I’ve written some stuff, • Member of W3C, • Building for the web since 1993, • Learn more at AdrianRoselli.com, • Avoid on Twitter @aardrian. About Adrian Roselli
  3. 3. Primer
  4. 4. What is a11y? • A numeronym for “accessibility”: • The first and last letter (accessibility), • The number of characters omitted (a11y). • Prominent on Twitter (character restrictions): • #a11y • Examples: • l10n → localization • i18n → internationalization
  5. 5. Disability is not just a health problem. It is a complex phenomenon, reflecting the interaction between features of a person’s body and features of the society in which he or she lives. — World Health Organization
  6. 6. Accessibility Gets No Respect
  7. 7. Yay Statistics!
  8. 8. 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
  9. 9. 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+.
  10. 10. 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.
  11. 11. Mobility Impairments • In the United States: • 5.5% aged 21-64 years old. • 15.6% aged 65-74 years old. • 32.9% aged 75+.
  12. 12. 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+.
  13. 13. Be Selfish
  14. 14. WebAIM’s Hierarchy for Motivating Accessibility Change
  15. 15. My Hierarchy for Motivating Accessibility Change
  16. 16. Getting Older • Affects (nearly) everyone, • Carries risks and side effects, • Is not for the young. I’m still experimenting with it.
  17. 17. Rising Damp on Flickr.
  18. 18. Darren Baldwin on Flickr.
  19. 19. Accidents • Broken limbs, • Eye injuries, • Hearing injuries, • Head trauma. All of these have happened to me, multiple times.
  20. 20. Rev Stan on Flickr.
  21. 21. Let Ideas Compete on Flickr.
  22. 22. Paul Townsend on Flickr.
  23. 23. But I’m Invincible! • Multi-tasking, • Sunlight, • Eating at your desk, • No headphones handy, • Content is not in your native language. The sun is trying to kill me.
  24. 24. Mariëlle on Flickr.
  25. 25. Seb on Flickr.
  26. 26. A.Davy on Flickr.
  27. 27. Steve Rhodes on Flickr.
  28. 28. SuperFantastic on Flickr.
  29. 29. Lars Kristian Flem on Flickr.
  30. 30. Tech Support • Think of your family! • Think of your time spent helping them! • Think of the wasted holidays! This is why we hate the holidays.
  31. 31. Robert Simmons on Flickr.
  32. 32. Who Else? • Everyone else Look around.
  33. 33. Everyone Else!
  34. 34. H. Michael Karshis on Flickr.
  35. 35. User Experience Models
  36. 36. Personas Book Excerpt: A Web for Everyone, by Sarah Horton, Whitney Quesenbery
  37. 37. Selfish Persona • Reflect the client / stakeholder: • Travels on a train, • Keeps office very bright, • Inept with smart phone, • Asks you to speak up, • Keeps losing mouse, • Etc.
  38. 38. User Stories • 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
  39. 39. Selfish User Stories • 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.
  40. 40. Selfish User Stories • 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.
  41. 41. Selfish User Stories • 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.
  42. 42. Selfish User Stories • 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.
  43. 43. Technical Bits
  44. 44. Text Alternatives for Images • Can you still make sense of the page? • Is content missing? • Can you still use the site? • Is your alt text useful? • Do you account for CSS background images? • What about SVGs? • Or CSS-generated symbols / icons? http://www.4syllables.com.au/2010/12/text-alternatives-decision-tree/ http://dev.w3.org/html5/alt-techniques/#tree
  45. 45. Text Alternatives for Images
  46. 46. Text Alternatives for Images
  47. 47. 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://adrianroselli.com/2014/03/i-dont-care-what-google-did-just-keep.html
  48. 48. Hyperlinks! • 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
  49. 49. Hyperlinks! http://www.sitepoint.com/15-rules-making-accessible-links/
  50. 50. 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) • WCAG 2.1: • 3:1 for UI components, graphical objects
  51. 51. Color Contrast • WCAG 2.1 has broadened it, • Typography, • Icons and glyphs, • Form elements, error messages, placeholders, • Hover, focus, selected states.
  52. 52. Label Your Fields • Provide instructions for the entire form, • Provide a programmatic indication of required fields, • Provide formatting advice, • Use ARIA to associate formatting advice, • Avoid placeholder text, • Associate error messages with fields.
  53. 53. Label Your Fields • Match the for attribute to the corresponding field’s id attribute. • Label text provides a larger hit area for mouse / touch, • Label text should appear above or the left of text inputs or menus (for LTR languages), • Label text should appear after checkboxes / radio buttons (for LTR languages). • Label grouped fields (<fieldset> / <legend>)
  54. 54. Label Your Fields
  55. 55. Structure Your Document • 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!
  56. 56. Structure Your Document
  57. 57. Structure Your Document <header role="banner"> <nav role="navigation"> <aside role="complementary"> <form role="search"> <footer role="contentinfo"> <main role="main">
  58. 58. Structure Your Document “Mobile” often means narrow screen in RWD, as well as this context.
  59. 59. <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. Structure Your Document
  60. 60. Structure Your Document • 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
  61. 61. Structure Your Document
  62. 62. Be Keyboard Friendly • 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
  63. 63. Be Keyboard Friendly http://adrianroselli.com/2016/02/keyboard-and-overflow.html
  64. 64. Be Keyboard Friendly • Do not use a <div> nor <span> as a control. • Does the control take me to another URL? • Use an <a href>. • Note: does not fire on space-bar. • Does the control change something on the current page? • Use a <button type="button">. • Does the control submit form fields? • Use <input type="submit"> or <button type="submit">. http://adrianroselli.com/2016/01/links-buttons-submits-and-divs-oh-hell.html
  65. 65. Be Keyboard Friendly http://adrianroselli.com/2016/01/links-buttons-submits-and-divs-oh-hell.html
  66. 66. Be Keyboard Friendly • Define :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. • Do not rely on browser defaults, • Easy to test with the tab key. http://adrianroselli.com/2014/06/keep-focus-outline.html
  67. 67. Be Keyboard Friendly
  68. 68. Be Keyboard Friendly
  69. 69. Wrap-up
  70. 70. The Message • Supporting accessibility now helps to serve future you. Do or do not.
  71. 71. The Message • Supporting accessibility now helps to serve future you. • Supporting accessibility now helps injured you, encumbered you. There is no try.
  72. 72. The Message • Supporting accessibility now helps to serve future you. • Supporting accessibility now helps injured you, encumbered you. • Getting younger developers to buy in helps future you – if you teach them well. Always pass on what you have learned.
  73. 73. Stairamp Dean Bouchard on Flickrhttp://accessibility.net.nz/blog/the-problems-with-ramps-blended-into-stairs/
  74. 74. ≠ Checklist • Accessibility is not a checklist.
  75. 75. Maintenance 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.”
  76. 76. = Process • Accessibility is not a checklist. • Accessibility is an ongoing process.
  77. 77. Resources
  78. 78. Resources • Web Accessibility and Older People: Meeting the Needs of Ageing Web Users http://www.w3.org/WAI/older-users/Overview.php • Easy Checks - A First Review of Web Accessibility http://www.w3.org/WAI/eval/preliminary • How People with Disabilities Use the Web: Overview http://www.w3.org/WAI/intro/people-use- web/Overview.html
  79. 79. Resources • 2.11 ARIA Role, State, and Property Quick Reference http://www.w3.org/TR/aria-in-html/#aria-role-state-and- property-quick-reference • 2.12 Definitions of States and Properties (all aria-* attributes) http://www.w3.org/TR/aria-in-html/#definitions-of- states-and-properties-all-aria--attributes
  80. 80. Resources • Designing For The Elderly: Ways Older People Use Digital Technology Differently http://www.smashingmagazine.com/2015/02/05/designing- digital-technology-for-the-elderly/ • How to Write User Stories for Web Accessibility http://www.interactiveaccessibility.com/blog/how-write- user-stories-accessibility-requirements • Book Excerpt: A Web for Everyone http://uxmag.com/articles/book-excerpt-a-web-for- everyone
  81. 81. http://rosel.li/yglf

×