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.

1. Presented by Adrian Roselli for Harbour Front
Vol. 230 October 2018
The Hive, Wan Chai, Hong Kong

2. Introductions

3. • 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

4. Primer

5. 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

6. Accessibility Gets No Respect

7. Yay Statistics!

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. 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. 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. 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. 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. Be Selfish

14. WebAIM’s Hierarchy for Motivating
Accessibility Change

15. My Hierarchy for Motivating Accessibility Change

16. Getting Older
• Affects (nearly) everyone,
• Carries risks and side effects,
• Is not for the young.
I’m still experimenting with it.

17. Rising Damp on Flickr.

18. Darren Baldwin on Flickr.

19. Accidents
• Broken limbs,
• Eye injuries,
• Hearing injuries,
• Head trauma.
All of these have happened to me, multiple times.

20. Rev Stan on Flickr.

21. Let Ideas Compete on Flickr.

22. Paul Townsend on Flickr.

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. Mariëlle on Flickr.

25. Seb on Flickr.

26. A.Davy on Flickr.

27. Steve Rhodes on Flickr.

28. SuperFantastic on Flickr.

29. Lars Kristian Flem on Flickr.

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. Robert Simmons on Flickr.

32. Who Else?
• Everyone else
Look around.

33. Everyone Else!

34. User Experience Models

35. 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

36. 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.

37. 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.

38. 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.

39. 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.

40. Personas
Book Excerpt: A Web for Everyone, by Sarah Horton, Whitney Quesenbery

41. Technical Bits

42. 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

43. Text Alternatives for Images

44. Text Alternatives for Images

45. 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

46. 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

47. Hyperlinks!
http://www.sitepoint.com/15-rules-making-accessible-links/

48. 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

49. Color Contrast
• WCAG 2.1 has broadened it,
• Typography,
• Icons and glyphs,
• Form elements, error messages,
placeholders,
• Hover, focus, selected states.

50. 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.

51. 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>)

52. Label Your Fields

53. 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!

54. Structure Your Document

55. Structure Your Document
<header role="banner">
<nav role="navigation">
<aside role="complementary">
<form role="search">
<footer role="contentinfo">
<main role="main">

56. Structure Your
Document
“Mobile” often means narrow screen
in RWD, as well as this context.

57. <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

58. 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

59. Structure Your Document

60. 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

61. Be Keyboard Friendly
http://adrianroselli.com/2016/02/keyboard-and-overflow.html

62. Be Keyboard Friendly
http://adrianroselli.com/2016/12/accessible-emoji-tweaked.html

63. 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

64. Be Keyboard Friendly
http://adrianroselli.com/2016/01/links-buttons-submits-and-divs-oh-hell.html

65. 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

66. Be Keyboard Friendly

67. Be Keyboard Friendly

68. Wrap-up

69. The Message
• Supporting accessibility now helps to serve future
you.
Do or do not.

70. The Message
• Supporting accessibility now helps to serve future
you.
• Supporting accessibility now helps injured you,
encumbered you.
There is no try.

71. 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.

72. Stairamp
Dean Bouchard on Flickrhttp://accessibility.net.nz/blog/the-problems-with-ramps-blended-into-stairs/

73. ≠ Checklist
• Accessibility is not a checklist.

74. 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.”

75. = Process
• Accessibility is not a checklist.
• Accessibility is an ongoing process.

76. Resources

77. 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

78. 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

79. 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

80. Presented by Adrian Roselli for Harbour Front
Vol. 230 October 2018
The Hive, Wan Chai, Hong Kong