Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Designed for Inclusion: Writing CSS with Access...

Manuel Matuzovic
September 10, 2017

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/

Manuel Matuzovic

September 10, 2017
Tweet

More Decks by Manuel Matuzovic

Other Decks in Technology

Transcript

  1. { }

  2. { } <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">
  3. { } <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">
  4. { } <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>
  5. { }

  6. { } <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>
  7. { }

  8. CSS

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

    impaired ๏ 39 million are blind and 246 million have low vision
  10. 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
  11. 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
  12. 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
  13. […] 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
  14. Contrast ratio ๏ 1:1 same color for text and background

    ๏ 1:21 black text on white background and vice versa
  15. 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
  16. 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
  17. 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
  18. 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
  19. Though age has indeed taken its toll on my eyesight,

    it turns out that I was suffering from a design trend. Kevin Marks
  20. { }

  21. { }

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

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

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

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

    ๏ float ๏ Negative margins ๏ Grid (order, grid-auto-flow, grid-row, grid-column,…)
  26. 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
  27. { } <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>
  28. { } <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>
  29. { } ul { grid-column: 1 / -1; display: inherit;

    grid-template-columns: inherit; grid-gap: inherit; display: contents; }
  30. { } <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>
  31. { }