You can’t spell Accessibility without CSS

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.

106c42e28924b83cf9ee4c4cfa5ddde2?s=128

Jemima Abu

June 18, 2020
Tweet

Transcript

  1. You can’t spell Accessibility without CSS A presentation by Jemima

    Abu
  2. Jemima Abu 2 Front end Developer @jemimaabu

  3. None
  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
  16. None
  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

  22. None
  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