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/

Transcript

1. %FTJHOFE
   Writing CSS with Accessibility in Mind
   *ODMVTJPO
   GPS
   Manuel Matuzović
   @mmatuzo
   CSSConf Budapest 10/2017
   

   View Slide

2. Manuel Matuzović
   @mmatuzo
   

   View Slide

3. View Slide

4. View Slide

5. View Slide

6. View Slide

7. View Slide

8. ???
   

   View Slide

9. { }
   
   
   Look ma, no CSS!
   

   View Slide

10. { }
    
    
    Look ma, no CSS!
    
    
    
    

    View Slide

11. { }
    border="1" bgcolor="#006700" align="left" width="442%">
    Float? Flexbox? Grid? Pfff!
    

    View Slide

12. { }
    border="1" bgcolor="#006700" align="left" width="442%">
    Float? Flexbox? Grid? Pfff!
    ???
    

    View Slide

13. { }
    border="1" bgcolor="#006700" align="left" width="442%">
    Float? Flexbox? Grid? Pfff!
    
    
    Name:
    Manuel Matuzovic
    
    
    
    ???
    

    View Slide

14. { }
    

    View Slide

15. { }
    

    View Slide

16. CSS 2.1 ❤
    

    View Slide

17. CSS 2.1
    float
    position
    text-align
    overflow
    border
    visibility
    background-repeat
    color
    font-size
    max-height
    margin
    line-height
    clip
    display
    ❤
    

    View Slide

18. CSS 3 ❤
    

    View Slide

19. CSS 3
    border-radius
    box-shadow
    text-shadow
    background-size
    text-overflow
    transform
    transition
    column
    animation calc()
    gradients
    web fonts
    ❤
    

    View Slide

20. CSS
    

    View Slide

21. CSS
    Flexbox
    Grid
    Custom properties
    (CSS variables)
    Feature queries
    (@supports)
    Filters
    Shapes
    blend-modes
    Scroll Snap Points
    sticky
    :not()
    
    

    View Slide

22. With great power comes
    great responsibility
    Uncle Ben
    

    View Slide

23. .
    }
    a11y_1
    font-size
    {
    

    View Slide

24. .
    }
    a11y_1
    font-size
    {
    

    View Slide

25. Zeit Online 20px
    CSS-Tricks 21px
    Medium 21px
    CSSConf Budapest 20px
    Jeffrey Zeldman 24px
    Max Böck 22px
    

    View Slide

26. https://blog.marvelapp.com/body-text-small/
    

    View Slide

27. .
    }
    a11y_2
    line-height
    {
    

    View Slide

28. .
    }
    a11y_2
    line-height
    {
    

    View Slide

29. View Slide

30. View Slide

31. View Slide

32. .
    }
    a11y_3
    text-align
    {
    

    View Slide

33. View Slide

34. View Slide

35. View Slide

36. .
    }
    a11y_4
    paragraph
    width
    {
    

    View Slide

37. View Slide

38. View Slide

39. DIBSBDUFST
    QFSMJOF
    

    View Slide

40. View Slide

41. { }
    p {
    max-width: 65ch;
    }
    ch represents the width of the glyph „0“ in the element’s font.
    

    View Slide

42. ::
    }
    a11y_5
    content
    {
    

    View Slide

43. View Slide

44. { }
    h2::after {
    content: "DON'T DO THIS";
    }
    Don’t add text via CSS.
    

    View Slide

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

    View Slide

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

    View Slide

47. View Slide

48. View Slide

49. { }
    class="icon icon--times">
    Hiding content semantically
    

    View Slide

50. .
    }
    a11y_6
    color contrast
    {
    

    View Slide

51. .
    }
    a11y_6
    color contrast
    {
    

    View Slide

52. Colors & Color Contrast
    

    View Slide

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

    View Slide

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

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

59. Contrast ratio
    

    View Slide

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

    View Slide

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

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

66. View Slide

67. View Slide

68. View Slide

69. View Slide

70. View Slide

71. View Slide

72. View Slide

73. View Slide

74. View Slide

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
    

    View Slide

76. View Slide

77. View Slide

78. View Slide

79. View Slide

80. View Slide

81. View Slide

82. View Slide

83. View Slide

84. View Slide

85. Though age has indeed taken its
    toll on my eyesight, it turns out that
    I was suffering from a design trend.
    Kevin Marks
    

    View Slide

86. @
    }
    print
    {
    media a11y_7
    

    View Slide

87. { }
    @media print {
    }
    Add the @media declaration block to your CSS for print specific styles
    

    View Slide

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

    View Slide

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

    View Slide

90. { }
    body > *:not(main){
    display: none;
    }
    Hiding all children of except for
    

    View Slide

91. { }
    section {
    margin-bottom: 2cm;
    font-size: 14pt;
    padding: 8mm;
    }
    Using absolute units for print styles is absolutely fine
    

    View Slide

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

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

97. View Slide

98. View Slide

99. :
    }
    a11y_8
    focus
    {
    

    View Slide

100. View Slide

101. View Slide

102. { }
     Button
     If you need a button, use
     

     View Slide

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

     View Slide

104. { }
     Button
     If you need a button, use
     Button
     Button
     

     View Slide

105. View Slide

106. View Slide

107. { }
     *:focus {
     outline: none;
     }
     Don’t just remove the default outline (dotted outline, blue or orange ring) without providing alternate styles.
     

     View Slide

108. View Slide

109. View Slide

110. View Slide

111. View Slide

112. { }
     input:focus {
     outline: 2px solid #000000;
     }
     :focus pseudo class for custom focus styles
     

     View Slide

113. View Slide

114. View Slide

115. { }
     form:focus-within {
     box-shadow: 0 0 4px 6px #000000;
     }
     :focus-within select an element which has child elements that are currently focused.
     

     View Slide

116. View Slide

117. View Slide

118. View Slide

119. { }
     :focus {
     outline: none;
     }
     Applying focus styles only for appropriate input modalities
     

     View Slide

120. { }
     :focus {
     outline: none;
     }
     :focus-ring {
     outline: 2px solid blue;
     }
     Applying focus styles only for appropriate input modalities
     

     View Slide

121. https://github.com/WICG/focus-ring
     

     View Slide

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

     View Slide

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

     View Slide

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

     View Slide

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

     View Slide

126. .
     }
     a9y_11
     derro
     {
     

     View Slide

127. .
     }
     a11y_9
     order
     {
     

     View Slide

128. { }
     
     
     
     
     
     
     …
     
     

     View Slide

129. { }
     ul {
     }
     A grid with as many 180px wide columns as possible
     

     View Slide

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

     View Slide

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

     View Slide

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
     

     View Slide

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
     

     View Slide

134. View Slide

135. View Slide

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

     View Slide

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

     View Slide

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

     View Slide

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;
     }
     

     View Slide

140. View Slide

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
     

     View Slide

142. View Slide

143. View Slide

144. View Slide

145. View Slide

146. Properties that affect order
     ๏ Flexbox (flex-direction, order,…)
     ๏ position
     ๏ float
     ๏ Negative margins
     ๏ Grid (order, grid-auto-flow, grid-row, grid-column,…)
     

     View Slide

147. .
     }
     a11y_10
     progressive
     enhancement
     {
     

     View Slide

148. .
     }
     a11y_10
     progressive
     enhancement
     {
     

     View Slide

149. .
     }
     a11y_10
     progressive
     enhancement
     {
     

     View Slide

150. View Slide

151. View Slide

152. View Slide

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
     

     View Slide

154. .
     }
     a11y_11
     flat structures
     {
     

     View Slide

155. View Slide

156. { }
     
     Heading
     
     Element 1
     Element 2
     Element 3
     Element 4
     Element 5
     Element 6
     
     
     A div with two direct child items (h2 and ul)
     

     View Slide

157. { }
     .wrapper {
     display: grid;
     grid-template-columns: 120px repeat(2, 1fr);
     grid-gap: 20px;
     }
     h2 {
     grid-column: 2 / -1;
     }
     A grid with 3 columns
     

     View Slide

158. View Slide

159. { }
     
     Heading
     Element 1
     Element 2
     Element 3
     Element 4
     Element 5
     Element 6
     
     Don’t flatten the structure of your document and compromise on semantics!
     

     View Slide

160. { }
     ul {
     display: subgrid;
     }
     display: subgrid didn’t make it into level 1 of the specification.
     

     View Slide

161. { }
     ul {
     display: contents;
     }
     display: contents causes an element's children to appear as if they were direct children of the element's parent.
     

     View Slide

162. View Slide

163. { }
     ul {
     display: grid;
     grid-template-columns: 120px repeat(2, 1fr);
     grid-gap: 20px;
     }
     Alternative: Defining a nested grid
     

     View Slide

164. { }
     ul {
     grid-column: 1 / -1;
     display: inherit;
     grid-template-columns: inherit;
     grid-gap: inherit;
     display: contents;
     }
     It’s possible to inherit grid properties
     

     View Slide

165. { }
     
     Heading
     Element 1
     Element 2
     Element 3
     Element 4
     Element 5
     Element 6
     
     Don’t flatten the structure of your document and compromise on semantics!
     

     View Slide

166. { }
     Don’t flatten the structure of your document and compromise on semantics!
     

     View Slide

167. Designing with constraints in mind
     is simply designing well.
     Aaron Gustafson
     

     View Slide

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

     View Slide

169. View Slide

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

     View Slide