Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Accessible user interface patterns – NUX

Df6d8f8c1cc3ec843969759ee607e79b?s=47 tempertemper
September 27, 2018

Accessible user interface patterns – NUX

Martin shows us some common user interface patterns that might look great but can be inaccessible or even just inconvenient to a lot of people. Luckily, he also gives us some advice on how to put them right!

His talk looks at both the design itself and the HTML it's built with in a simple, easy-to-understand way.

Df6d8f8c1cc3ec843969759ee607e79b?s=128

tempertemper

September 27, 2018
Tweet

Transcript

  1. @tempertemper Accessible user interface patterns

  2. I’m Martin Interaction designer at Orange Bus

  3. @tempertemper • What is accessibility • Who should care and

    why • Some examples
  4. @tempertemper A11y is for everyone

  5. @tempertemper ♿

  6. @tempertemper ♿

  7. @tempertemper ♿

  8. @tempertemper The social model of disability

  9. @tempertemper Disability is a social state

  10. @tempertemper Impairment does not equal disability

  11. @tempertemper Individuals with an impairment are disabled by society, its

    social structures and it’s failure to build an inclusive environment
  12. @tempertemper Disabled users are just… users!

  13. @tempertemper Who might we disable?

  14. @tempertemper Permanent

  15. @tempertemper Temporary

  16. @tempertemper Situational

  17. @tempertemper https://www.microsoft.com/design/inclusive/

  18. @tempertemper https://www.microsoft.com/design/inclusive/

  19. @tempertemper https://www.microsoft.com/design/inclusive/

  20. @tempertemper https://www.microsoft.com/design/inclusive/

  21. @tempertemper Who cares?

  22. @tempertemper Brand designers

  23. @tempertemper Graphic designers

  24. @tempertemper UX designers

  25. @tempertemper Front-end developers

  26. @tempertemper Back-end developers

  27. @tempertemper Server wizards '

  28. @tempertemper Marketers

  29. @tempertemper Sales people

  30. @tempertemper Stakeholders

  31. @tempertemper Why should we care?

  32. @tempertemper Being a good human being

  33. @tempertemper Legal obligation

  34. @tempertemper Money

  35. @tempertemper People with impairments

  36. @tempertemper More than 10m people were limited in daily activities

    in England and Wales in 2011 https://www.ons.gov.uk/peoplepopulationandcommunity/healthandsocialcare/disability/articles/disabilityinenglandandwales/2013-01-30
  37. @tempertemper Older people

  38. @tempertemper At age 65, the average person will have a

    disability https://www.ons.gov.uk/peoplepopulationandcommunity/healthandsocialcare/healthandlifeexpectancies/bulletins/ disabilityfreelifeexpectancybyuppertierlocalauthorityengland/2014-07-24
  39. @tempertemper Nearly 12m UK residents aged 65 years and over

    https://www.ons.gov.uk/peoplepopulationandcommunity/populationandmigration/populationestimates/bulletins/ annualmidyearpopulationestimates/mid2017#nearly-12-million-uk-residents-aged-65-years-and-over
  40. @tempertemper Parents

  41. @tempertemper 679,106 live births in England and Wales in 2017

    https://www.ons.gov.uk/peoplepopulationandcommunity/birthsdeathsandmarriages/livebirths/bulletins/ birthsummarytablesenglandandwales/2017
  42. @tempertemper 679,106 × 5 = Just over 3m

  43. None
  44. @tempertemper Drivers

  45. @tempertemper 31.7m cars on the road in 2017 https://www.statista.com/statistics/299972/average-age-of-cars-on-the-road-in-the-united-kingdom/

  46. @tempertemper Scottish people

  47. @tempertemper

  48. @tempertemper Scots are also more likely to leave their homeland

    and settle elsewhere than any other English-speaking peoples https://www.scotsman.com/news/the-scottish-diaspora-how-scots-spread-across-the-globe-1-4011012
  49. @tempertemper Other stuff is a bit trickier

  50. @tempertemper People who read their phone at night

  51. @tempertemper People on dodgy phone connections

  52. @tempertemper Commuters

  53. @tempertemper Anti-patterns

  54. @tempertemper https://en.wikipedia.org/wiki/Anti-pattern An anti-pattern is a common response to a

    recurring problem that is usually ineffective and risks being highly counterproductive
  55. None
  56. @tempertemper Expensive

  57. @tempertemper Expensive (see above )

  58. @tempertemper Serves some functional use

  59. @tempertemper Lack of experience

  60. @tempertemper Looks good

  61. @tempertemper Looks good

  62. @tempertemper Everyone’s doing it

  63. @tempertemper Everyone’s doing it

  64. @tempertemper Examples

  65. @tempertemper Forms

  66. @tempertemper Placeholders for labels

  67. @tempertemper

  68. None
  69. None
  70. @tempertemper

  71. None
  72. None
  73. @tempertemper Labels that look like placeholders

  74. @tempertemper

  75. @tempertemper Hint text as placeholder

  76. @tempertemper

  77. @tempertemper

  78. @tempertemper

  79. @tempertemper Source order

  80. @tempertemper Hint text after input

  81. @tempertemper

  82. @tempertemper Parts of the form after the submit button

  83. @tempertemper

  84. @tempertemper

  85. @tempertemper

  86. @tempertemper

  87. @tempertemper

  88. None
  89. None
  90. @tempertemper

  91. @tempertemper

  92. @tempertemper

  93. @tempertemper

  94. None
  95. None
  96. None
  97. @tempertemper More form best practices

  98. @tempertemper Make sure labels have for="" attributes

  99. None
  100. None
  101. @tempertemper Use proper type="" attributes

  102. @tempertemper Try to avoid <select>

  103. @tempertemper

  104. None
  105. None
  106. @tempertemper Use <fieldset> and <legend> elements properly

  107. None
  108. @tempertemper

  109. None
  110. @tempertemper Place labels above inputs to aid readability

  111. @tempertemper

  112. @tempertemper

  113. @tempertemper

  114. None
  115. @tempertemper Split large form up onto multiple pages

  116. @tempertemper Indicate optional fields rather than required fields

  117. @tempertemper Only ask for information you need

  118. @tempertemper Auto tabbing

  119. @tempertemper https://userresearch.blog.gov.uk/2017/04/18/why-we-care-more-about-effectiveness-than-efficiency-or-satisfaction/ “if auto-tabbing stops just a few people from

    using a service successfully, their needs take priority over the many people who might prefer but don’t need the feature”
  120. @tempertemper Hamburger menus

  121. @tempertemper http://www.kukastudios.com/blog/uncategorized/hamburger-icon

  122. @tempertemper What even is it?

  123. @tempertemper Difficult to reach

  124. @tempertemper https://uxplanet.org/the-ultimate-guide-to-the-hamburger-menu-and-its-alternatives-e2da8dc7f1db

  125. @tempertemper Saves space

  126. None
  127. @tempertemper Hamburgers on bigger-than- mobile screens

  128. None
  129. @tempertemper What can we do instead?

  130. @tempertemper Pair/replace it with ‘Menu’

  131. @tempertemper Put the nav on the page

  132. @tempertemper Images in headers

  133. None
  134. None
  135. @tempertemper Takes time to load

  136. @tempertemper Awful, inconsistent contrast for text and buttons

  137. @tempertemper Is there a fall-back background colour?

  138. @tempertemper How can we fix it?

  139. @tempertemper Consider a design using SVG instead

  140. @tempertemper Redesign with CSS instead – gradient?

  141. @tempertemper Use nothing

  142. None
  143. @tempertemper General

  144. @tempertemper Typography ✍

  145. None
  146. @tempertemper Nice, big body font

  147. @tempertemper Avoid all-caps

  148. @tempertemper Font stack for system-font fall-backs

  149. @tempertemper Choose your font(s) carefully

  150. @tempertemper FS Me by Fontsmith

  151. @tempertemper –Mencap For people with learning disabilities, reading is made

    much harder by certain fonts
  152. None
  153. @tempertemper Web fonts

  154. @tempertemper Loading times ⏱

  155. @tempertemper http requests

  156. @tempertemper Download time

  157. @tempertemper Use woff

  158. @tempertemper Or, even better, use woff2

  159. @tempertemper Consider number of weights needed

  160. @tempertemper Avoid animation wherever possible

  161. @tempertemper Makes sure colour contrast is good

  162. @tempertemper Avoid using colour to communicate meaning

  163. @tempertemper Putting things right ⭐

  164. @tempertemper Semantic HTML

  165. @tempertemper Thoughtful HTML

  166. @tempertemper Responsive web design

  167. @tempertemper Subtitles/closed captions

  168. @tempertemper Performant websites

  169. @tempertemper Don’t override default browser behaviour

  170. @tempertemper Use common UI conventions

  171. @tempertemper Consider a11y from the start

  172. @tempertemper A lot of your design decisions make themselves

  173. @tempertemper Think of all those users

  174. @tempertemper You don’t test your users’ patience

  175. @tempertemper Thanks

  176. @tempertemper