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

Designed for Inclusion: Writing CSS with Acces...

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

October 25, 2017
Tweet

More Decks by Manuel Matuzovic

Other Decks in Technology

Transcript

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

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

  3. { } <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">
  4. { } <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> ???
  5. { } <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>
  6. CSS 2.1 float position text-align overflow border visibility background-repeat color

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

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

    Filters Shapes blend-modes Scroll Snap Points sticky :not()
  9. { } p { max-width: 65ch; } ch represents the

    width of the glyph „0“ in the element’s font.
  10. Colors & Color Contrast ๏ ~285 million people are visually

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

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

    it turns out that I was suffering from a design trend. Kevin Marks
  22. { } @media print { } Add the @media declaration

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

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

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

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

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

    Selecting all links with an absolute link except links to your site
  28. { } 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
  29. { } 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
  30. { } a[href^="http"]:not([href*="mywebsite.com"])::after { content: " (" attr(href) ")"; }

    Selecting all links with an absolute link except links to your site ::after
  31. { } 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
  32. { } <button>Button</button> If you need a button, use <button>

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

    the default outline (dotted outline, blue or orange ring) without providing alternate styles.
  34. { } input:focus { outline: 2px solid #000000; } :focus

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

    } :focus-within select an element which has child elements that are currently focused.
  36. { } :focus { outline: none; } Applying focus styles

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

    2px solid blue; } Applying focus styles only for appropriate input modalities
  38. { } ul { } A grid with as many

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

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

    1fr)); A grid with as many 180px wide columns as possible
  41. { } 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
  42. { } 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
  43. { } .large { grid-row: span 2; } CSS Grid

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

    Layout explicit placement .long { grid-row: span 2; } .large1 { grid-column: span 2 / -1; }
  45. { } .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; }
  46. { } 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
  47. Properties that affect order ๏ Flexbox (flex-direction, order,…) ๏ position

    ๏ float ๏ Negative margins ๏ Grid (order, grid-auto-flow, grid-row, grid-column,…)
  48. 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
  49. { } <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)
  50. { } .wrapper { display: grid; grid-template-columns: 120px repeat(2, 1fr);

    grid-gap: 20px; } h2 { grid-column: 2 / -1; } A grid with 3 columns
  51. { } <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!
  52. { } ul { display: subgrid; } display: subgrid didn’t

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

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

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

    grid-template-columns: inherit; grid-gap: inherit; display: contents; } It’s possible to inherit grid properties
  56. { } <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!