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

Accessible form patterns – Sunderland Digital

Df6d8f8c1cc3ec843969759ee607e79b?s=47 tempertemper
November 21, 2018

Accessible form patterns – Sunderland Digital

Martin Underhill takes us through some common mistakes we make when designing and coding forms on the web; patterns that might look great but can be inaccessible or even just inconvenient to a lot of users. Luckily, he also gives us some advice on how to put them right!



November 21, 2018


  1. @tempertemper Accessible form patterns

  2. @tempertemper I’m Martin Underhill

  3. @tempertemper 1/3 of Frontend NE

  4. @tempertemper Interaction designer

  5. @tempertemper 1. What is accessibility? 2. Why is it important?

    3. Tips and tricks
  6. @tempertemper A11y

  7. @tempertemper A11y Accessibility https://css-tricks.com/the-ironic-inaccessibility-of-a11y/

  8. @tempertemper Disability

  9. @tempertemper Traditional way of viewing disability https://www.sciencedirect.com/topics/medicine-and-dentistry/social-model-of-disability

  10. @tempertemper Medical model https://www.sciencedirect.com/topics/medicine-and-dentistry/social-model-of-disability

  11. @tempertemper Impairment ≠ medical disability https://www.microsoft.com/design/inclusive/

  12. @tempertemper 1. Permanent

  13. @tempertemper 1. Permanent 2. Temporary

  14. @tempertemper 1. Permanent 2. Temporary 3. Situational

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

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

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

  18. @tempertemper Any user can be disabled!

  19. None
  20. @tempertemper The social model of disability

  21. @tempertemper A social model of disability moves the location of

    the disability out of the person and into social structures https://www.sciencedirect.com/topics/medicine-and-dentistry/social-model-of-disability
  22. @tempertemper Social perceptions, attitudes, institutions, and policies all contribute to

    the creation of disability https://www.sciencedirect.com/topics/medicine-and-dentistry/social-model-of-disability
  23. @tempertemper Individuals with an impairment are disabled by society’s failure

    to build an inclusive environment
  24. @tempertemper Who’s responsible?

  25. @tempertemper Brand & graphic designers

  26. @tempertemper UX designers

  27. @tempertemper Front-end developers

  28. @tempertemper Back-end developers

  29. @tempertemper Why should we care?

  30. @tempertemper Legal obligation

  31. @tempertemper Legal obligation Money

  32. @tempertemper Legal obligation Money Decent human beings

  33. None
  34. @tempertemper “It’s expensive”

  35. @tempertemper “It’s expensive” “It looks good”

  36. @tempertemper “It’s expensive” “It looks good” “We didn’t know”

  37. @tempertemper Common mistakes and how to fix them

  38. @tempertemper Placeholders for labels

  39. @tempertemper

  40. @tempertemper <input type="text" placeholder="Phone, email or username" /> <input type="password"

    placeholder="Password" />
  41. @tempertemper

  42. @tempertemper <label for="username">Phone, email or username </label> <input id="username" type="text"

    /> <label for="password">Password<label /> <input id="password" type="password" />
  43. @tempertemper Labels that look like placeholders

  44. @tempertemper https://www.bbc.co.uk/gel/

  45. @tempertemper Hint text as placeholder https://admin.typeform.com/login/

  46. @tempertemper

  47. @tempertemper

  48. @tempertemper

  49. @tempertemper Source order

  50. @tempertemper Hint text after input

  51. @tempertemper

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

  53. @tempertemper

  54. @tempertemper

  55. @tempertemper

  56. @tempertemper

  57. @tempertemper <button type="submit">Log In </button> <label> <input type="checkbox" value="1" name="remember_me"

    /> Remember me <a href="forgot-password">Forgotten your password? </a> </label>
  58. @tempertemper

  59. @tempertemper

  60. @tempertemper

  61. @tempertemper <label> <input type="checkbox" value="1" name="remember_me" /> Remember me <a

    href="forgot-password">Forgotten your password? </a> </label> <button type="submit">Log In </button>
  62. @tempertemper .log-in-form button { float: left; }

  63. @tempertemper Match a label’s for attribute to its input id

  64. @tempertemper <label for="username">Phone, email or username </label> <input id="username" type="text"

  65. @tempertemper Use proper type attributes

  66. @tempertemper type="email"

  67. @tempertemper type="url"

  68. @tempertemper type="tel"

  69. @tempertemper type="password"

  70. @tempertemper Try to avoid <select>

  71. @tempertemper Place labels above inputs to aid readability

  72. @tempertemper

  73. @tempertemper

  74. @tempertemper https://www.lukew.com/ff/entry.asp?504

  75. @tempertemper Split up large forms

  76. @tempertemper Reduces cognitive load

  77. @tempertemper

  78. @tempertemper Indicate optional fields rather than required fields

  79. @tempertemper

  80. @tempertemper Label (optional)

  81. @tempertemper Only ask for information you need

  82. @tempertemper Don’t override default browser behaviour

  83. @tempertemper 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 https://userresearch.blog.gov.uk/2017/04/18/why-we-care-more-about-effectiveness-than-efficiency-or-satisfaction/
  84. @tempertemper General

  85. @tempertemper Avoid animation wherever possible

  86. @tempertemper Makes sure colour contrast is good

  87. @tempertemper Avoid using colour to communicate meaning

  88. None
  89. @tempertemper Summing up

  90. @tempertemper Think about accessibility from the very start

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

  92. @tempertemper Think of all those happy users

  93. None
  94. tempertemper.net/youtube