Accessibility Done Right

Accessibility Done Right

Accessibility is about unified design.

01da6d807a29ad6d49801c0157518148?s=128

Michelle Sanver

February 19, 2015
Tweet

Transcript

  1. @michellesanver Accessibility done right #phpuk

  2. @michellesanver

  3. @michellesanver WIIIIIIIE \o/ “Learn the most by sharing your knowledge

    with others” - @coderabbi
  4. @michellesanver Michelle Sanver

  5. @michellesanver

  6. @michellesanver Michelle Sanver Co-President of PHPWomen

  7. @michellesanver PHPWomen 15 pounds or 30 dollars

  8. @michellesanver Michelle Sanver Accent(s)!?

  9. @michellesanver Michelle Sanver

  10. @michellesanver I’m a backend developer.

  11. @michellesanver Disclaimer There’s a lot more to accessibility.

  12. @michellesanver After lunch story

  13. @michellesanver Aron Aron is a blind programmer

  14. @michellesanver Aron He really knows how to use a screenreader

  15. @michellesanver Aron I don’t

  16. @michellesanver Disclaimer This talk is not how I planned it

  17. @michellesanver This talk is not about “people with disabilities”

  18. @michellesanver This talk is about people who are using the

    web.
  19. @michellesanver Good Code Written with the user in mind

  20. @michellesanver Assistive technology

  21. @michellesanver Assistive technology Screen Readers

  22. @michellesanver Assistive technology Text-To-Speech

  23. @michellesanver Assistive technology Screen Magnifiers

  24. @michellesanver Assistive technology Joysticks

  25. @michellesanver Assistive technology Keyboards

  26. @michellesanver Assistive technology Mobile Devices

  27. @michellesanver Audience participation! What other assistive technology is there?

  28. @michellesanver All technology is assistive technology

  29. @michellesanver What if accessibility online was like accessibility IRL?

  30. @michellesanver A typical ramp

  31. @michellesanver A hotel layout

  32. @michellesanver Hotel Layout: SunshinePHP I lost my glasses…

  33. @michellesanver Hotel Layout: PHPUK I *really* hope I keep my

    glasses
  34. @michellesanver Accessibility is about Universal design

  35. @michellesanver Universal Design “Universal design is the design of products

    and environments to be usable by all people, to the greatest extent possible, without the need for adaptation or specialized design.” -Ron Mace
  36. @michellesanver Universal Design Keywords equitable, flexible, simple, intuitive, low effort,

    approachable, usable
  37. @michellesanver Guidelines, rules and tools Keep your JavaScript ON!!!

  38. @michellesanver Guidelines, rules and tools All functionality for all people

  39. @michellesanver Content Gudelines

  40. @michellesanver General Writing Use Consistent Language

  41. @michellesanver General Writing Write out acronyms (At least the first

    time you use them)
  42. @michellesanver General Writing Be clear and concise

  43. @michellesanver Headings Screen reader users can use heading structure to

    navigate content.
  44. @michellesanver Headings Keep your headers logical

  45. @michellesanver Headings Don’t skip “h2” for design

  46. @michellesanver Font-Face, Size and colour Easy to use sans-serif font

  47. @michellesanver Font-Face, Size and colour Size: 12pt or more

  48. @michellesanver Font-Face, Size and colour Size headers: Relative in order

  49. @michellesanver Font-Face, Size and colour Heading 3: 14pt Heading 2:

    16pt Heading 1: 18pt
  50. @michellesanver Font-Face, Size and colour Keep a high contrast between

    background and font colour.
  51. @michellesanver Links Give your links unique and descriptive names

  52. @michellesanver Tables Only for tabular data!

  53. @michellesanver Tables For complex tables, provide a summary

  54. @michellesanver Forms Label form fields!

  55. @michellesanver Forms Should be “tabable”

  56. @michellesanver Forms “Tabable” in visual order

  57. @michellesanver Forms Use fieldsets for related fields

  58. @michellesanver Forms Don’t use only * for required fields

  59. @michellesanver Forms Use ARIA in *addition* to asterix ARIA required="true"

    and ARIA required="false"
  60. @michellesanver Forms After submitting Include errors in the page-title

  61. @michellesanver Forms CAPTCHA is bad mmmkay http://webaim.org/blog/ spam_free_accessible_forms/

  62. @michellesanver Colours Colourblindness

  63. @michellesanver Colours Learning disabilities

  64. @michellesanver Colours Satisfy both groups! Use colours *and* visual indicators

  65. @michellesanver Audio & Video Alternative text version

  66. @michellesanver Video Use Captions

  67. @michellesanver Audio Include a text transcript

  68. @michellesanver Audio & Video Also for non-auditory learners

  69. @michellesanver Audio & Video If filling material for an already

    descriptive article… No alternative needed
  70. @michellesanver Audio & Video Do *not* autoplay!

  71. @michellesanver Audio & Video Make sure you can pause.

  72. @michellesanver Audio & Video Avoid flashes

  73. @michellesanver Audio & Video 3 flashes in one second can

    cause epileptic reactions.
  74. @michellesanver Images Alt Text

  75. @michellesanver Images Alt Text What you’re trying to convey!

  76. @michellesanver Images Alt Text Can be replaced with a caption.

  77. @michellesanver Images Alt Text Leave empty for decorative images

  78. @michellesanver Images High contrast

  79. @michellesanver Images For graphs, include a table if possible

  80. @michellesanver Images Avoid images of text

  81. @michellesanver WAI-Aria

  82. @michellesanver WAI-Aria ARIA = Accessible Rich Internet Applications

  83. @michellesanver Aria Roles

  84. @michellesanver Aria: Roles “button” can be a fancy clickable element

  85. @michellesanver Aria States and Properties

  86. @michellesanver Aria examples Roles of "navigation" and "menu"

  87. @michellesanver Aria examples Landmarks of "banner" and "main content"

  88. @michellesanver Aria examples Alerts of "live" and "atomic"

  89. @michellesanver Aria examples Forms

  90. @michellesanver Dynamic content Accessible slide shows

  91. @michellesanver Dynamic content Keyboard friendly video players NO AUTOPLAY PLZ

  92. @michellesanver Aria: Live Regions Tell the user about dynamic updates!

  93. @michellesanver Aria: Live Regions Polite or assertive

  94. @michellesanver Aria: Live Regions Allows your JavaScript to be ON

  95. @michellesanver Aria: Live Regions Twitter uses live regions NICELY

  96. @michellesanver Aria: Live Regions: Twitter Has a dedicated accessibility team

  97. @michellesanver Aria: Live Regions: Twitter Tweet field has tons of

    information
  98. @michellesanver Aria Example Twitter <div aria-labelledby="tweet-box-mini-home-profile-label" id="tweet-box-mini-home-profile" class="tweet-box rich-editor notie"

    contenteditable="true" spellcheck="true" role="textbox" aria-multiline="true" dir="ltr" aria-autocomplete="list" aria-expanded="false" aria-owns=“typeahead-dropdown-6” > <div>What's happening?</div></div>
  99. @michellesanver Aria Example Twitter <div aria-labelledby="tweet-box-mini-home-profile-label" id="tweet-box-mini-home-profile" class="tweet-box rich-editor notie"

    contenteditable="true" spellcheck="true" role="textbox" aria-multiline="true" dir="ltr" aria-autocomplete="list" aria-expanded="false" aria-owns=“typeahead-dropdown-6” > <div>What's happening?</div></div>
  100. @michellesanver Aria Example Twitter <div aria-labelledby="tweet-box-mini-home-profile-label" id="tweet-box-mini-home-profile" class="tweet-box rich-editor notie"

    contenteditable="true" spellcheck="true" role="textbox" aria-multiline="true" dir="ltr" aria-autocomplete="list" aria-expanded="false" aria-owns=“typeahead-dropdown-6” > <div>What's happening?</div></div>
  101. @michellesanver Aria Example Twitter <div aria-labelledby="tweet-box-mini-home-profile-label" id="tweet-box-mini-home-profile" class="tweet-box rich-editor notie"

    contenteditable="true" spellcheck="true" role="textbox" aria-multiline="true" dir="ltr" aria-autocomplete="list" aria-expanded="false" aria-owns=“typeahead-dropdown-6” > <div>What's happening?</div></div>
  102. @michellesanver Aria Example Twitter <div aria-labelledby="tweet-box-mini-home-profile-label" id="tweet-box-mini-home-profile" class="tweet-box rich-editor notie"

    contenteditable="true" spellcheck="true" role="textbox" aria-multiline="true" dir="ltr" aria-autocomplete="list" aria-expanded="false" aria-owns=“typeahead-dropdown-6” > <div>What's happening?</div></div>
  103. @michellesanver Aria Example Twitter <div aria-labelledby="tweet-box-mini-home-profile-label" id="tweet-box-mini-home-profile" class="tweet-box rich-editor notie"

    contenteditable="true" spellcheck="true" role="textbox" aria-multiline="true" dir="ltr" aria-autocomplete="list" aria-expanded="false" aria-owns=“typeahead-dropdown-6” > <div>What's happening?</div></div>
  104. @michellesanver Online Assessment Tools

  105. @michellesanver Online Assessment Tools Wave http://wave.webaim.org/

  106. @michellesanver Online Assessment Tools Color Filter http://colorfilter.wickline.org/

  107. @michellesanver Online Assessment Tools Vischeck http://www.vischeck.com/vischeck/

  108. @michellesanver Online Assessment Tools Color Contrast Checker http://webaim.org/resources/contrastchecker/

  109. @michellesanver Online Assessment Tools For more W3C Web Accessibility Tools

    list http://www.w3.org/WAI/ER/tools/
  110. @michellesanver Wrapup

  111. @michellesanver Wrapup Accessibility is *not* about assistive technology.

  112. @michellesanver Wrapup Accessibility is about people.

  113. @michellesanver Wrapup Accessibility is about universal design

  114. @michellesanver Wrapup Accessibility means no workarounds

  115. @michellesanver Wrapup Keep your JavaScript ON

  116. @michellesanver Wrapup Follow guidelines

  117. @michellesanver Wrapup Use WAI-Aria

  118. @michellesanver Ask questions!

  119. @michellesanver Thank you! Please rate my talk! https://joind.in/13371 (OMG, do

    you see the 1337? :D)
  120. @michellesanver Accessibility Let’s talk about it.