You can’t spell Accessibility without CSS

In this talk, we’ll discuss website accessibility in the context of CSS. Things like when to use an image and when to use a background image, how to ensure proper contrast between text and background colors, maintaining a hierarchical layout in your design, when to use an outline: 0 property (almost never), and a whole bunch of other things.

Transcript

1. You can’t spell Accessibility without CSS A presentation by Jemima Abu
2. Jemima Abu 2 Front end Developer @jemimaabu
4. “CSS benefits accessibility primarily by separating document structure from presentation.” — w3.org @jemimaabu
5. @jemimaabu
6. “People ignore design that ignores people.” — Frank Chimero @jemimaabu
7. Text and background contrast
8. The general rule for Level AA contrast is that normal text needs a ratio of 4.5:1 between the foreground and background colours, while really large text (at least 18 point) can have a 3:1 ratio. — simplyaccessible @jemimaabu
9. 21:1 White text on black background (and vice versa) 1:1 Text has same color as the background
10. https://css-tricks.com/understanding- web-accessibility-color-contrast-guide lines-and-ratios/ Read more @jemimaabu
11. Balance colors, weight and size Bold, large fonts can use lighter colors Light, small fonts need dark colors @jemimaabu
12. Use high contrast to distinguish elements @jemimaabu
13. ✖ @jemimaabu
14. ✔ @jemimaabu
15. .disabled { user-select: none; pointer-events: none; /* cursor doesn't work if pointer-events is set to none */ cursor: not-allowed; } @jemimaabu
17. What if the image doesn’t load?
18. What if the image doesn’t load?
19. Set a fallback for the background @jemimaabu
20. .banner { background: #000 url(''); color: white; } @jemimaabu
21. @jemimaabu
23. .background::after { content: ""; position: absolute; top: 0; left: 0; height: 100%; width: 100%; background-color: rgba(0, 0, 0, 0.5); } @jemimaabu
24. @jemimaabu
25. .blend { color: #fff; mix-blend-mode: difference; } @jemimaabu
26. @jemimaabu
27. @jemimaabu
28. .invert { background-image: inherit; color: transparent; background-clip: text; filter: invert(1) grayscale(1) contrast(5); } @jemimaabu
29. @jemimaabu
30. @jemimaabu
31. body { background-color: white; color: black; } @media screen and (prefers-color-scheme: dark) { body { background-color: black; color: white; } } @jemimaabu
32. Tools for testing contrast
33. Chrome DevTools @jemimaabu
34. WEBAIM Contrast Checker @jemimaabu
35. Font, text and units
36. Don’t override the browser’s default font-size @jemimaabu
37. html { font-size: 100%; } html { font-size: 14px; } ✖ ✔ @jemimaabu
38. Use relative units for font sizes @jemimaabu
39. ✖ ✔ em, rem, %, ch px, pt, vh, vw, vmax @jemimaabu
40. Avoid using semantics for styling @jemimaabu
41. <strong></strong> span { font-weight: bold } div { font-style: italic } <em></em> ✖ ✔ <h1></h1> p { font-size: larger } @jemimaabu
42. Don’t justify text in large paragraphs @jemimaabu
43. p { text-align: justify } ✖ @jemimaabu
44. Keep paragraph width narrow (55 to 65 characters) @jemimaabu
45. ✖ @jemimaabu
46. ✔ @jemimaabu
47. p { max-width: 65ch; } @jemimaabu
48. Apply text-effects with styles (or SVG) not content @jemimaabu
49. ✖ ✔ p { text-transform: uppercase; letter-spacing: .5em; } <span>H</span> <span>E</span> <span>L</span> <span>L</span> <span>O</span> @jemimaabu
50. Allow users to control zoom @jemimaabu
51. <meta name="viewport" content="maximum-scale=1, user-scalable=no"> ✖
52. <meta name="viewport" content="width=device-width, initial-scale=1"> ✔
53. CSS can influence screen readers @jemimaabu
54. “However, you'll learn that VoiceOver has confused the capitalized "ADD" button for the acronym A.D.D.—something it definitely wouldn't have done if we hadn't changed the CSS.” — Ben Meyers @jemimaabu
55. https://blog.benmyers.dev/css-can-infl uence-screenreaders/ Read more @jemimaabu
56. Order and hierarchy of elements
57. Group related content @jemimaabu
58. ✖ ✔ @jemimaabu
59. Arrange content logically @jemimaabu
60. ✔ ✔ @jemimaabu
61. CSS reorders visually not logically @jemimaabu
62. .grid-item:nth-of-type(7) { order: 1 } .grid-item:nth-of-type(4) { order: 2 } ... @jemimaabu
63. ✖ ✖ @jemimaabu
64. .grid-item:nth-of-type(7) { order: 1 } <div class="grid-item" tabindex="1">7</div> @jemimaabu
65. ✔ ✔ @jemimaabu
66. Place logically with HTML not CSS @jemimaabu
67. <div class="grid-item">7</div> <div class="grid-item">4</div> <div class="grid-item">1</div> <div class="grid-item">8</div> ... @jemimaabu
68. @jemimaabu
69. nav { position: absolute; top: 0; left: 0; } <header>Header</header> <nav>Nav</nav> ✖ @jemimaabu
70. nav { position: sticky; top: 0; } <nav>Nav</nav> <header>Header</header> ✔ @jemimaabu
71. Keep columns together @jemimaabu
72. ✖ ✖ @jemimaabu
73. ✔ ✔ @jemimaabu
74. .column { -webkit-column-break-inside: avoid; page-break-inside: avoid; break-inside: avoid; } @jemimaabu
75. <img /> vs background-image
76. img is for content @jemimaabu
77. <img src="" alt="" /> image as content @jemimaabu
78. background-image is for design @jemimaabu
79. .container { background-image: url(''); } image as design @jemimaabu
80. Outlines
81. * { outline: none } ✖ @jemimaabu
82. Include in focus (and hover) styles @jemimaabu
83. button:hover, button:focus { background-color: #fff; border: 2px solid; outline: none; } ✔ @jemimaabu
84. Fallback for properties
85. Use fallback for custom properties @jemimaabu
86. :root { --bg-color: #000; } /*fallback for not supported variable*/ body { background-color: #000; background-color: var(--bg-color); } @jemimaabu
87. :root { --bg-color: #000; } /* fallback for undefined variable*/ body { background-color: var(--bg-color, #000) } @jemimaabu
88. Use browser prefixes @jemimaabu
89. button { -webkit-transition: color 1s; -moz-transition: color 1s; -ms-transition: color 1s; -o-transition: color 1s; transition: color 1s; } @jemimaabu
90. @jemimaabu
91. @jemimaabu
92. Fallback for images? @jemimaabu
93. <img alt="kitty" src="https://images.pexels.com /photos/416160/pexels-photo-41 6160.jpeg" /> @jemimaabu
94. <img alt="kitty" src="" /> @jemimaabu
95. img { width: 100%; background-image: url('https://images.pexels.com/ photos/730896/pexels-photo-7308 96.jpeg'); min-height: 550px; background-size: cover; color: #fff; } @jemimaabu
96. Tools for testing design accessibility • Lighthouse • ChromeVox • WAVE Web Accessibility Evaluation Tool • Manually manipulate design @jemimaabu
97. Slides: https://speakerdeck.com/jemimaabu Code: https://codepen.io/Jemimaabu/pen/abdmYOa
98. Resources • CSS Accessibility - TSBVI • Writing CSS with Accessibility in Mind - Manuel Matuzovic • Website Accessibility Checklist (15 Things You Can Improve) - Bruce Lawson • 5 Keys to Accessible Web Typography - Better Web Type • CSS Media Queries for Accessibility - Karl Castillo @jemimaabu
99. Thanks! Does anyone have any questions? www.jemimaabu.com @jemimaabu
100. Credits This is where you give credit to the ones who are part of this project. Did you like the resources on this template? Get them for free at our other websites. ◂ Presentation template by Slidesgo ◂ Icons by Flaticon ◂ Images & infographics by Freepik ◂ Photos created by Freepik - Freepik.com