Adrian Roselli presented on web accessibility (a11y) at Codedaze 2018, highlighting statistics on various disabilities and emphasizing the importance of considering accessibility for all users. The talk covered guidelines for creating accessible digital content, including alternative text for images, link clarity, color contrast, and document structure, while emphasizing that accessibility is an ongoing process rather than a checklist. Roselli encouraged developers to teach future generations about accessibility to enhance web experiences for aging and disabled users.

4. Presented by Adrian Roselli for CodeDaze Vol. 2
September 14th & 15th, 2018
Buffalo, NY

5. Introductions

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

7. Primer

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

9. Accessibility Gets No Respect

10. Yay Statistics!

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

12. 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+.

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

14. Mobility Impairments
• In the United States:
• 5.5% aged 21-64 years old.
• 15.6% aged 65-74 years old.
• 32.9% aged 75+.

15. 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+.

16. Be Selfish

17. WebAIM’s Hierarchy for Motivating
Accessibility Change

18. My Hierarchy for Motivating Accessibility Change

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

20. Rising Damp on Flickr.

21. Darren Baldwin on Flickr.

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

23. Rev Stan on Flickr.

24. Let Ideas Compete on Flickr.

25. Paul Townsend on Flickr.

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

27. Mariëlle on Flickr.

28. Seb on Flickr.

29. A.Davy on Flickr.

30. Steve Rhodes on Flickr.

31. SuperFantastic on Flickr.

32. Lars Kristian Flem on Flickr.

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

34. Robert Simmons on Flickr.

35. Who Else?
• Everyone else
Look around.

36. Everyone Else!

37. User Experience Models

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. 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. 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. 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. 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. Personas
Book Excerpt: A Web for Everyone, by Sarah Horton, Whitney Quesenbery

44. Technical Bits

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

46. Text Alternatives for Images

47. Text Alternatives for Images

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

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

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

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

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

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

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

55. Label Your Fields

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

57. Structure Your Document

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

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

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

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

62. Structure Your Document

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

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

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

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

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

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

69. Be Keyboard Friendly

70. Be Keyboard Friendly

71. Wrap-up

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

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

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

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

76. ≠ Checklist
• Accessibility is not a checklist.

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

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

79. Resources

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

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

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

83. Presented by Adrian Roselli for CodeDaze Vol. 2
September 14th & 15th, 2018
Buffalo, NY
Slides available at rosel.li/CodeDaze