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

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/

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

    View full-size slide

  2. Manuel Matuzović
    @mmatuzo

    View full-size slide

  3. { }


    Look ma, no CSS!

    View full-size slide

  4. { }


    Look ma, no CSS!



    View full-size slide

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

    View full-size slide

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

    View full-size slide

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


    Name:
    Manuel Matuzovic



    ???

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  11. With great power comes
    great responsibility
    Uncle Ben

    View full-size slide

  12. .
    }
    a11y_1
    font-size
    {

    View full-size slide

  13. .
    }
    a11y_1
    font-size
    {

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  16. .
    }
    a11y_2
    line-height
    {

    View full-size slide

  17. .
    }
    a11y_2
    line-height
    {

    View full-size slide

  18. .
    }
    a11y_3
    text-align
    {

    View full-size slide

  19. .
    }
    a11y_4
    paragraph
    width
    {

    View full-size slide

  20. DIBSBDUFST
    QFSMJOF

    View full-size slide

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

    View full-size slide

  22. ::
    }
    a11y_5
    content
    {

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  27. .
    }
    a11y_6
    color contrast
    {

    View full-size slide

  28. .
    }
    a11y_6
    color contrast
    {

    View full-size slide

  29. Colors & Color Contrast

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  32. 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 full-size slide

  33. 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 full-size slide

  34. 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 full-size slide

  35. […] 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 full-size slide

  36. Contrast ratio

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  39. 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 full-size slide

  40. 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 full-size slide

  41. 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 full-size slide

  42. 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 full-size slide

  43. 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 full-size slide

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

    View full-size slide

  45. @
    }
    print
    {
    media a11y_7

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  52. { }
    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 full-size slide

  53. { }
    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 full-size slide

  54. { }
    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 full-size slide

  55. { }
    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 full-size slide

  56. :
    }
    a11y_8
    focus
    {

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  70. .
    }
    a9y_11
    derro
    {

    View full-size slide

  71. .
    }
    a11y_9
    order
    {

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  75. { }
    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 full-size slide

  76. { }
    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 full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  80. { }
    .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 full-size slide

  81. { }
    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 full-size slide

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

    View full-size slide

  83. .
    }
    a11y_10
    progressive
    enhancement
    {

    View full-size slide

  84. .
    }
    a11y_10
    progressive
    enhancement
    {

    View full-size slide

  85. .
    }
    a11y_10
    progressive
    enhancement
    {

    View full-size slide

  86. 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 full-size slide

  87. .
    }
    a11y_11
    flat structures
    {

    View full-size slide

  88. { }

    Heading

    Element 1
    Element 2
    Element 3
    Element 4
    Element 5
    Element 6


    A div with two direct child items (h2 and ul)

    View full-size slide

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

    View full-size slide

  90. { }

    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 full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  95. { }

    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 full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide