Designed for Inclusion: Writing CSS with Accessibility in Mind

Designed for Inclusion: Writing CSS with Accessibility in Mind

Web accessibility has so many facets, that learning about it and implementing it correctly may seem daunting to some of us. Just imagine excluding a whole group of users by simply declaring `* { outline: none; }`.

The good news, though, is that CSS has a lot to offer that may help us create accessible web sites and web apps. This talk aims to demystify web accessibility and provide you with simple and practical CSS tips and tricks, which you can easily incorporate into your workflow today. You are going to find out how to make your web projects more inclusive and improve the usability and user experience at the same time.

Medium articles
https://medium.com/alistapart/writing-html-with-accessibility-in-mind-a62026493412
https://medium.com/@matuzo/writing-javascript-with-accessibility-in-mind-a1f6a5f467b9

Font styling
https://blog.marvelapp.com/body-text-small/
https://madebymike.com.au/writing/precise-control-responsive-typography/
https://www.wired.com/2016/10/how-the-web-became-unreadable/
https://zellwk.com/blog/why-vertical-rhythms/

Pseudo-elements
https://tink.uk/accessibility-support-for-css-generated-content/

Print
https://uxdesign.cc/i-totally-forgot-about-print-style-sheets-f1e6604cfd6

Color and Color Contrast
https://accessibility.blog.gov.uk/2017/03/27/how-users-change-colours-on-websites/
http://www.particletree.com/features/interfaces-and-color-blindness/

Order
http://adrianroselli.com/2017/02/not-all-screen-reader-users-are-blind.html
http://adrianroselli.com/2015/09/source-order-matters.html

Focus
https://allyjs.io/tests/focus-outline-styles/index.html#style=focus&key=text,radio,checkbox,textarea,button,link,div&browser=firefox,chrome,safari,ie11
https://download.microsoft.com/download/B/0/D/B0D4BF87-09CE-4417-8F28-D60703D672ED/INCLUSIVE_TOOLKIT_MANUAL_FINAL.pdf

Grid and flat document structures
https://rachelandrew.co.uk/archives/2015/07/28/modern-css-layout-power-and-responsibility/

Fee3aee3642c55f15adfcbeab11e6bb6?s=128

Manuel Matuzovic

September 10, 2017
Tweet

Transcript

  1. %FTJHOFE 8SJUJOH$44XJUI"DDFTTJCJMJUZJO.JOE *ODMVTJPO GPS Manuel Matuzović @mmatuzo CSS-Minsk-JS 09/2017

  2. None
  3. None
  4. None
  5. { }

  6. { } <frameset cols="17%,*,17%" border="0" noresize="" frameborder="0">

  7. { } <frameset cols="17%,*,17%" border="0" noresize="" frameborder="0"> <frame noresize="" scrolling="auto"

    src="left.html">
  8. { } <frameset cols="17%,*,17%" border="0" noresize="" frameborder="0"> <frame noresize="" scrolling="auto"

    src="left.html"> <frame name="main" noresize="" scrolling="auto" src="start.html">
  9. { } <frameset cols="17%,*,17%" border="0" noresize="" frameborder="0"> <frame noresize="" scrolling="auto"

    src="left.html"> <frame name="main" noresize="" scrolling="auto" src="start.html"> <frame noresize="" scrolling="auto" src="right.html">
  10. { } <frameset cols="17%,*,17%" border="0" noresize="" frameborder="0"> <frame noresize="" scrolling="auto"

    src="left.html"> <frame name="main" noresize="" scrolling="auto" src="start.html"> <frame noresize="" scrolling="auto" src="right.html"> </frameset>
  11. { }

  12. { } <table cellspacing="0" cellpadding="0" bordercolor="#004400" border="1" bgcolor="#006700" align="left" width="442%">

  13. { } <table cellspacing="0" cellpadding="0" bordercolor="#004400" border="1" bgcolor="#006700" align="left" width="442%">

    <tbody> <tr> <td width="23%">Name:</td> <td> Manuel Matuzovic</td> </tr> </tbody> </table>
  14. { }

  15. { } <body link="004600" text="ffffff" bgcolor="005600" alink="004600" vlink="004600">

  16. { } <body link="004600" text="ffffff" bgcolor="005600" alink="004600" vlink="004600"> <font size="4"

    face="arial">
  17. { } <body link="004600" text="ffffff" bgcolor="005600" alink="004600" vlink="004600"> <font size="4"

    face="arial"> <table>
  18. { } <body link="004600" text="ffffff" bgcolor="005600" alink="004600" vlink="004600"> <font size="4"

    face="arial"> <table> ...
  19. { } <body link="004600" text="ffffff" bgcolor="005600" alink="004600" vlink="004600"> <font size="4"

    face="arial"> <table> ... </table>
  20. { } <body link="004600" text="ffffff" bgcolor="005600" alink="004600" vlink="004600"> <font size="4"

    face="arial"> <table> ... </table> </font>
  21. { } <body link="004600" text="ffffff" bgcolor="005600" alink="004600" vlink="004600"> <font size="4"

    face="arial"> <table> ... </table> </font> </body>
  22. CSS 2.1

  23. CSS 2.1 float position text-align overflow border visibility background-repeat color

    font-size max-height margin line-height clip display
  24. CSS 3

  25. CSS 3 border-radius box-shadow text-shadow background-size text-overflow transform transition column

    animation calc() gradients web fonts
  26. CSS

  27. CSS Flexbox Grid Custom properties Feature queries Filters Shapes blend-modes

    Scroll Snap Points sticky :not()
  28. With great power comes great responsibility Uncle Ben

  29. . } a11y_1 font-size {

  30. Zeit Online 20px CSS-Tricks 21px Medium 21px CSS-Minsk-JS 34px/2.5vh Jeffrey

    Zeldman 24px Hugo Giraudel 20px
  31. https://blog.marvelapp.com/body-text-small/

  32. . } a11y_2 line-height {

  33. None
  34. None
  35. None
  36. . } a11y_3 text-align {

  37. None
  38. None
  39. None
  40. . } a11y_4 p: width {

  41. None
  42. None
  43. DIBSBDUFST QFSMJOF

  44. None
  45. { } p { max-width: 65ch; }

  46. :: } a11y_5 content {

  47. { } h2::after { content: "DON'T DO THAT"; }

  48. { } span::before { content:"\00d7"; }

  49. { } span::before { content:"\00d7"; } →

  50. None
  51. None
  52. { } <span aria-hidden="true" class="icon icon--times"></span>

  53. . } a11y_6 color & contrast {

  54. Colors & Color Contrast

  55. Colors & Color Contrast ๏ ~285 million people are visually

    impaired
  56. Colors & Color Contrast ๏ ~285 million people are visually

    impaired ๏ 39 million are blind and 246 million have low vision
  57. Colors & Color Contrast ๏ ~285 million people are visually

    impaired ๏ 39 million are blind and 246 million have low vision ๏ 7 to 12% of men and less than 1% of women have some form of color-vision deficiency
  58. Colors & Color Contrast ๏ ~285 million people are visually

    impaired ๏ 39 million are blind and 246 million have low vision ๏ 7 to 12% of men and less than 1% of women have some form of color-vision deficiency ๏ People dim their screens
  59. Colors & Color Contrast ๏ ~285 million people are visually

    impaired ๏ 39 million are blind and 246 million have low vision ๏ 7 to 12% of men and less than 1% of women have some form of color-vision deficiency ๏ People dim their screens ๏ People use their smartphones outside even when the sun is shining
  60. […] enough contrast between text and its background so that

    it can be read by people with moderately low vision […] https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-contrast.html
  61. Contrast ratio

  62. Contrast ratio ๏ 1:1 same color for text and background

  63. Contrast ratio ๏ 1:1 same color for text and background

    ๏ 1:21 black text on white background and vice versa
  64. Contrast ratio ๏ 1:1 same color for text and background

    ๏ 1:21 black text on white background and vice versa ๏ Minimum ratio for normal text less than 24px 4.5:1
  65. Contrast ratio ๏ 1:1 same color for text and background

    ๏ 1:21 black text on white background and vice versa ๏ Minimum ratio for normal text less than 24px 4.5:1 ๏ Minimum ratio for bold text less than 19px 3:1
  66. Contrast ratio ๏ 1:1 same color for text and background

    ๏ 1:21 black text on white background and vice versa ๏ Minimum ratio for normal text less than 24px 4.5:1 ๏ Minimum ratio for bold text less than 19px 3:1 ๏ Larger text: 3:1
  67. Contrast ratio ๏ 1:1 same color for text and background

    ๏ 1:21 black text on white background and vice versa ๏ Minimum ratio for normal text less than 24px 4.5:1 ๏ Minimum ratio for bold text less than 19px 3:1 ๏ Larger text: 3:1 ๏ Level AAA: At least 7:1 and 4.5:1
  68. None
  69. None
  70. None
  71. None
  72. None
  73. None
  74. None
  75. None
  76. None
  77. Though age has indeed taken its toll on my eyesight,

    it turns out that I was suffering from a design trend. Kevin Marks
  78. @ } media a11y_7 print {

  79. { } @media print { .header { position: static; }

    nav { display: none; } }
  80. { } @media print { .header { position: static; }

    nav { display: none; } }
  81. { } body > *:not(main){ display: none; }

  82. { } section { margin-bottom: 2cm; font-size: 14pt; padding: 8mm;

    }
  83. { } a[href^="http"]:not([href*="mywebsite.com"])::after { content: " (" attr(href) ")"; }

  84. { } a[href^="http"]:not([href*="mywebsite.com"])::after { content: " (" attr(href) ")"; }

  85. { } a[href^="http"]:not([href*="mywebsite.com"])::after { content: " (" attr(href) ")"; }

  86. { } a[href^="http"]:not([href*="mywebsite.com"])::after { content: " (" attr(href) ")"; }

  87. { } a[href^="http"]:not([href*="mywebsite.com"])::after { content: " (" attr(href) ")"; }

  88. None
  89. None
  90. : } a11y_8 focus {

  91. None
  92. None
  93. { } <button>Button</button>

  94. { } <button>Button</button> <div class="btn">Button</div>

  95. None
  96. None
  97. { } *:focus { outline: none; }

  98. None
  99. None
  100. None
  101. None
  102. { } input:focus { outline: 2px solid #000000; }

  103. None
  104. None
  105. { } form:focus-within { box-shadow: 0 0 4px 6px #000000;

    }
  106. None
  107. None
  108. { } :focus { outline: none; } :focus-ring { outline:

    2px solid blue; }
  109. None
  110. https://www.microsoft.com/en-us/design/inclusive

  111. https://www.microsoft.com/en-us/design/inclusive

  112. https://www.microsoft.com/en-us/design/inclusive

  113. Permanent Temporary Situational https://www.microsoft.com/en-us/design/inclusive

  114. . } a11y_9 order {

  115. { } <ul> <li> <a href="#"> <img src="/drink3.jpg" alt="A delicious

    drink" /> </a> </li> … </ul>
  116. { }

  117. { } ul {

  118. { } ul { display: grid;

  119. { } ul { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));

  120. { } ul { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));

    grid-gap: 20px;
  121. { } ul { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));

    grid-gap: 20px; grid-auto-rows: 180px;
  122. { } ul { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));

    grid-gap: 20px; grid-auto-rows: 180px; }
  123. None
  124. { }

  125. { } .long { grid-row: span 2; }

  126. { } .large { grid-row: span 2; } .long {

    grid-row: span 2; }
  127. { } .large { grid-row: span 2; } .long {

    grid-row: span 2; } .large1 { grid-column: span 2 / -1; }
  128. { } .large { grid-row: span 2; } .long {

    grid-row: span 2; } .large1 { grid-column: span 2 / -1; } .large2 { grid-column: 1 / span 2; }
  129. None
  130. { } ul { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));

    grid-gap: 20px; grid-auto-rows: 180px; grid-auto-flow: dense; }
  131. None
  132. None
  133. Properties that affect order ๏ Flexbox (flex-direction, order,…) ๏ position

    ๏ float ๏ Negative margins ๏ Grid (order, grid-auto-flow, grid-row, grid-column,…)
  134. . } a11y_10 progressive enhancement {

  135. None
  136. None
  137. None
  138. You Don’t Have To Overwrite Everything ๏ display: inline-block ๏

    display: table-cell ๏ vertical-align ๏ column-* properties ๏ float …have no effect on grid- or flex-items
  139. . } a11y_11 flat structures {

  140. None
  141. { } <div class="wrapper"> <h2>Heading</h2> <ul> <li>Element 1</li> <li>Element 2</li>

    <li>Element 3</li> <li>Element 4</li> <li>Element 5</li> <li>Element 6</li> </ul> </div>
  142. { } .wrapper { display: grid; grid-template-columns: 120px repeat(2, 1fr);

    grid-gap: 20px; } h2 { grid-column: 2 / -1; }
  143. None
  144. { } <div class="wrapper"> <h2>Heading</h2> <div>Element 1</div> <div>Element 2</div> <div>Element

    3</div> <div>Element 4</div> <div>Element 5</div> <div>Element 6</div> </div>
  145. { } ul { display: subgrid; }

  146. { } ul { display: contents; }

  147. None
  148. { } ul { display: grid; grid-template-columns: 120px repeat(2, 1fr);

    grid-gap: 20px; }
  149. { } ul { grid-column: 1 / -1; display: inherit;

    grid-template-columns: inherit; grid-gap: inherit; display: contents; }
  150. { } <div class="wrapper"> <h2>Heading</h2> <div>Element 1</div> <div>Element 2</div> <div>Element

    3</div> <div>Element 4</div> <div>Element 5</div> <div>Element 6</div> </div>
  151. { }

  152. Designing with constraints in mind is simply designing well. Aaron

    Gustafson
  153. 5IBOLZPV Manuel Matuzović @mmatuzo CSS-Minsk-JS 09/2017