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

October 25, 2017
Tweet

Transcript

  1. %FTJHOFE Writing CSS with Accessibility in Mind *ODMVTJPO GPS Manuel

    Matuzović @mmatuzo CSSConf Budapest 10/2017
  2. Manuel Matuzović @mmatuzo

  3. None
  4. None
  5. None
  6. None
  7. None
  8. ???

  9. { } <frameset cols="17%,*,17%" border="0" noresize="" frameborder="0"> </frameset> Look ma,

    no CSS!
  10. { } <frameset cols="17%,*,17%" border="0" noresize="" frameborder="0"> </frameset> Look ma,

    no CSS! <frame noresize="" scrolling="auto" src="left.html"> <frame name="main" noresize="" scrolling="auto" src="start.html"> <frame noresize="" scrolling="auto" src="right.html">
  11. { } <table cellspacing="0" cellpadding="0" bordercolor="#004400" border="1" bgcolor="#006700" align="left" width="442%">

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

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

    Float? Flexbox? Grid? Pfff! <table> <tbody> <tr> <td width="23%">Name:</td> <td> Manuel Matuzovic</td> </tr> </tbody> </table> ???
  14. { } <body link="004600" text="ffffff" bgcolor="005600" alink="004600" vlink="004600"> HTML tags

    and attributes for global page styles
  15. { } <body link="004600" text="ffffff" bgcolor="005600" alink="004600" vlink="004600"> HTML tags

    and attributes for global page styles <font size="4" face="arial"> <table> ... </table> </font> </body>
  16. CSS 2.1 ❤

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

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

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

    animation calc() gradients web fonts ❤
  20. CSS

  21. CSS Flexbox Grid Custom properties (CSS variables) Feature queries (@supports)

    Filters Shapes blend-modes Scroll Snap Points sticky :not()
  22. With great power comes great responsibility Uncle Ben

  23. . } a11y_1 font-size {

  24. . } a11y_1 font-size {

  25. Zeit Online 20px CSS-Tricks 21px Medium 21px CSSConf Budapest 20px

    Jeffrey Zeldman 24px Max Böck 22px
  26. https://blog.marvelapp.com/body-text-small/

  27. . } a11y_2 line-height {

  28. . } a11y_2 line-height {

  29. None
  30. None
  31. None
  32. . } a11y_3 text-align {

  33. None
  34. None
  35. None
  36. . } a11y_4 paragraph width {

  37. None
  38. None
  39. DIBSBDUFST QFSMJOF

  40. None
  41. { } p { max-width: 65ch; } ch represents the

    width of the glyph „0“ in the element’s font.
  42. :: } a11y_5 content {

  43. None
  44. { } h2::after { content: "DON'T DO THIS"; } Don’t

    add text via CSS.
  45. { } span::before { content:"\00d7"; } ::before and ::after are

    great for adding icons and symbols
  46. { } span::before { content:"\00d7"; } ::before and ::after are

    great for adding icons and symbols →
  47. None
  48. None
  49. { } <span aria-hidden="true" class="icon icon--times"></span> Hiding content semantically

  50. . } a11y_6 color contrast {

  51. . } a11y_6 color contrast {

  52. Colors & Color Contrast

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

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

    impaired ๏ 39 million are blind and 246 million have low vision
  55. 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
  56. 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
  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 ๏ People dim their screens ๏ People use their smartphones outside even when the sun is shining
  58. […] 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
  59. Contrast ratio

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

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

    ๏ 1:21 black text on white background and vice versa
  62. 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
  63. 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
  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 ๏ Minimum ratio for bold text less than 19px 3:1 ๏ Larger text: 3: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 ๏ Larger text: 3:1 ๏ Level AAA: At least 7:1 and 4.5:1
  66. None
  67. None
  68. None
  69. None
  70. None
  71. None
  72. None
  73. None
  74. None
  75. 1. Use Chrome Canary 2. Enable experiments: chrome://flags/#enable-devtools- experiments (copy

    and paste this internal link into Canary) 3. From devtools, open settings (F1) 4. Open the experiments panel 5. Hit shift seven times (no, I'm not kidding) 6. Check the "Color contrast ratio line in color picker" https://remysharp.com/2017/08/17/contrast-ratio-in-devtools
  76. None
  77. None
  78. None
  79. None
  80. None
  81. None
  82. None
  83. None
  84. None
  85. Though age has indeed taken its toll on my eyesight,

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

  87. { } @media print { } Add the @media declaration

    block to your CSS for print specific styles
  88. { } @media print { } .header { position: static;

    } Add the @media declaration block to your CSS for print specific styles
  89. { } nav { display: none; } @media print {

    } .header { position: static; } Add the @media declaration block to your CSS for print specific styles
  90. { } body > *:not(main){ display: none; } Hiding all

    children of <body> except for <main>
  91. { } section { margin-bottom: 2cm; font-size: 14pt; padding: 8mm;

    } Using absolute units for print styles is absolutely fine
  92. { } a[href^="http"]:not([href*="mywebsite.com"])::after { content: " (" attr(href) ")"; }

    Selecting all links with an absolute link except links to your site
  93. { } a[href^="http"]:not([href*="mywebsite.com"])::after { content: " (" attr(href) ")"; }

    a[href^="http"] Selecting all links with an absolute link except links to your site
  94. { } a[href^="http"]:not([href*="mywebsite.com"])::after { content: " (" attr(href) ")"; }

    :not([href*="mywebsite.com"]) Selecting all links with an absolute link except links to your site
  95. { } a[href^="http"]:not([href*="mywebsite.com"])::after { content: " (" attr(href) ")"; }

    Selecting all links with an absolute link except links to your site ::after
  96. { } a[href^="http"]:not([href*="mywebsite.com"])::after { content: " (" attr(href) ")"; }

    " (" attr(href) ")" Selecting all links with an absolute link except links to your site
  97. None
  98. None
  99. : } a11y_8 focus {

  100. None
  101. None
  102. { } <button>Button</button> If you need a button, use <button>

  103. { } <button>Button</button> If you need a button, use <button>

    <div class="btn">Button</div>
  104. { } <button>Button</button> If you need a button, use <button>

    <div class="btn">Button</div> <div class="btn" tabindex="0">Button</div>
  105. None
  106. None
  107. { } *:focus { outline: none; } Don’t just remove

    the default outline (dotted outline, blue or orange ring) without providing alternate styles.
  108. None
  109. None
  110. None
  111. None
  112. { } input:focus { outline: 2px solid #000000; } :focus

    pseudo class for custom focus styles
  113. None
  114. None
  115. { } form:focus-within { box-shadow: 0 0 4px 6px #000000;

    } :focus-within select an element which has child elements that are currently focused.
  116. None
  117. None
  118. None
  119. { } :focus { outline: none; } Applying focus styles

    only for appropriate input modalities
  120. { } :focus { outline: none; } :focus-ring { outline:

    2px solid blue; } Applying focus styles only for appropriate input modalities
  121. https://github.com/WICG/focus-ring

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

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

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

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

  126. . } a9y_11 derro {

  127. . } a11y_9 order {

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

    drink" /> </a> </li> … </ul>
  129. { } ul { } A grid with as many

    180px wide columns as possible
  130. { } ul { } display: grid; A grid with

    as many 180px wide columns as possible
  131. { } ul { } display: grid; grid-template-columns: repeat(auto-fill, minmax(180px,

    1fr)); A grid with as many 180px wide columns as possible
  132. { } ul { } display: grid; grid-template-columns: repeat(auto-fill, minmax(180px,

    1fr)); grid-gap: 20px; A grid with as many 180px wide columns as possible
  133. { } ul { } display: grid; grid-template-columns: repeat(auto-fill, minmax(180px,

    1fr)); grid-gap: 20px; grid-auto-rows: 180px; A grid with as many 180px wide columns as possible
  134. None
  135. None
  136. { } CSS Grid Layout explicit placement .long { grid-row:

    span 2; }
  137. { } .large { grid-row: span 2; } CSS Grid

    Layout explicit placement .long { grid-row: span 2; }
  138. { } .large { grid-row: span 2; } CSS Grid

    Layout explicit placement .long { grid-row: span 2; } .large1 { grid-column: span 2 / -1; }
  139. { } .large { grid-row: span 2; } CSS Grid

    Layout explicit placement .long { grid-row: span 2; } .large1 { grid-column: span 2 / -1; } .large2 { grid-column: 1 / span 2; }
  140. None
  141. { } ul { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));

    grid-gap: 20px; grid-auto-rows: 180px; grid-auto-flow: dense; } grid-auto-flow tries to fill the gaps in a grid
  142. None
  143. None
  144. None
  145. None
  146. Properties that affect order ๏ Flexbox (flex-direction, order,…) ๏ position

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

  148. . } a11y_10 progressive enhancement {

  149. . } a11y_10 progressive enhancement {

  150. None
  151. None
  152. None
  153. 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
  154. . } a11y_11 flat structures {

  155. None
  156. { } <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> A div with two direct child items (h2 and ul)
  157. { } .wrapper { display: grid; grid-template-columns: 120px repeat(2, 1fr);

    grid-gap: 20px; } h2 { grid-column: 2 / -1; } A grid with 3 columns
  158. None
  159. { } <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> Don’t flatten the structure of your document and compromise on semantics!
  160. { } ul { display: subgrid; } display: subgrid didn’t

    make it into level 1 of the specification.
  161. { } ul { display: contents; } display: contents causes

    an element's children to appear as if they were direct children of the element's parent.
  162. None
  163. { } ul { display: grid; grid-template-columns: 120px repeat(2, 1fr);

    grid-gap: 20px; } Alternative: Defining a nested grid
  164. { } ul { grid-column: 1 / -1; display: inherit;

    grid-template-columns: inherit; grid-gap: inherit; display: contents; } It’s possible to inherit grid properties
  165. { } <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> Don’t flatten the structure of your document and compromise on semantics!
  166. { } Don’t flatten the structure of your document and

    compromise on semantics!
  167. Designing with constraints in mind is simply designing well. Aaron

    Gustafson
  168. https://medium.com/@matuzo/

  169. None
  170. 5IBOLZPV Manuel Matuzović @mmatuzo CSSConf Budapest 10/2017