%FTJHOFE Writing CSS with Accessibility in Mind *ODMVTJPO GPS Manuel Matuzovi ć

   @mmatuzo

CSSConf Budapest 10/2017

Manuel Matuzovi ć @mmatuzo

???

{ }

<frameset cols = "17%,*,17%"

border

"0"

noresize

""

frameborder

"0"

</frameset> Look ma, no CSS!

{ }

<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" >

{ }

<table cellspacing = "0"

cellpadding

"0"

bordercolor

"#004400"

border

"1"

bgcolor

"#006700"

align

"left"

width

"442%"

Float? Flexbox? Grid? Pfff! <table> !

{ }

<table cellspacing = "0"

cellpadding

"0"

bordercolor

"#004400"

border

"1"

bgcolor

"#006700"

align

"left"

width

"442%"

Float? Flexbox? Grid? Pfff! <table> ! ???

{ }

<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> ???

{ }

<body link = "004600"

text

"ffffff"

bgcolor

"005600"

alink

"004600"

vlink

"004600"

HTML tags and a

ributes for global page styles

{ }

<body link = "004600"

text

"ffffff"

bgcolor

"005600"

alink

"004600"

vlink

"004600"

HTML tags and a

ributes for global page styles

<font size= "4" face= "arial"

<table> 
  ...
</table> </font> </body>

CSS 2.1 ❤

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

CSS 3 ❤

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

❤

CSS

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

With great power comes great responsibility Uncle Ben

. } a11y_1 font-size {

. } a11y_1 font-size {

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

h

ps://blog.marvelapp.com/body-text-small/

. } a11y_2 line-height {

. } a11y_2 line-height {

. } a11y_3 text-align {

. } a11y_4 paragraph width {

DIBSBDUFST QFSMJOF

{ } p {

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

:: } a11y_5 content {

{ } h2::after {

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

{ } span ::before {

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

{ } span ::before {

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

{ } <span aria-hidden

"true"

class

"icon icon--times"

</span>

Hiding content semantically

. } a11y_6
color contrast {

. } a11y_6 color contrast {

Colors & Color Contrast

Colors & Color Contrast ๏ ~285 million people are visually impaire d

Colors & Color Contrast ๏ ~285 million people are visually impaire d ๏ 39 million are blind and 246 million have low vision

Colors & Color Contrast ๏ ~285 million people are visually impaire d ๏ 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

Colors & Color Contrast ๏ ~285 million people are visually impaire d ๏ 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

Colors & Color Contrast ๏ ~285 million people are visually impaire d ๏ 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

[…] enough contrast between text and its background so that it can be read by people with moderately low vision

[…] h

ps://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-contrast.html

Contrast ratio

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

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

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

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

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

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

Use Chrome Canary 2. Enable experiments: chrome://flags/#enable-devtools- experiments (copy and paste this internal link into Canary) 3. From devtools, open se

ings (F1) 4. Open the experiments panel 5. Hit shi $ seven times (no, I'm not kidding) 6. Check the "Color contrast ratio line in color picker" h

ps://remysharp.com/2017/08/17/contrast-ratio-in-devtools

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

@ } print { media a11y_7

{ } @ media print {

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

{ } @ media print {

} .header {

position : static; }

Add the @media declaration block to your CSS for print specific styles

{ }

nav {

display : none; } @ media print {

} .header {

position : static; }

Add the @media declaration block to your CSS for print specific styles

{ } body

*:not(main){

display : none; } Hiding all children of

<body> except for <main>

{ } section {

margin-bottom : 2cm ;

font-size : 14pt ;

padding : 8mm ; } Using absolute units for print styles is absolutely fine

{ } a [href^="http"]:not([href*="mywebsite.com"]):: after {

content : " ("

attr (href) ")" ; } Selecting all links with an absolute link except links to your site

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

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

{ } a [href^="http"]:not([href*="mywebsite.com"]):: after {

content : " ("

attr (href) ")" ; } Selecting all links with an absolute link except links to your site :: after

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

: } a11y_8 focus {

{ } <button> Button </button> If you need a bu

on, use <button>

{ } <button> Button </button> If you need a bu

on, use <button>

<div class= "btn" > Button </div>

{ } <button> Button </button> If you need a bu

on, use <button>

<div class= "btn" > Button </div> <div class= "btn" tabindex="0" > Button </div>

{ } *:focus {

outline : none; } D on’t just remove the default outline (do

ed outline, blue or orange ring) without providing alternate styles.

{ } input :focus {

outline : 2px solid #000000 ; } :focus pseudo class for custom focus styles

{ } form :focus-within {

box-shadow : 0

0

4px

6px #000000 ; } :focus-within select an element which has child elements that are currently focused.

{ } :focus {

outline : none; }

Applying focus styles only for appropriate input modalities

{ } :focus {

outline : none; }

:focus-ring {

outline : 2px solid blue; } Applying focus styles only for appropriate input modalities

h

ps://github.com/WICG/focus-ring

h

ps://www.microso $ .com/en-us/design/inclusive

h

ps://www.microso $ .com/en-us/design/inclusive

h

ps://www.microso $ .com/en-us/design/inclusive

Permanent Temporary Situational h

ps://www.microso $ .com/en-us/design/inclusive

. } a9y_11 derro {

. } a11y_9 order {

{ }

<ul> <li>

<a href= "#"

<img src= "/drink3.jpg" alt= "A delicious drink" />

</a> </li>

…

</ul>

{ } ul {

} A grid with as many 180px wide columns as possible

{ } ul {

} display : grid; A grid with as many 180px wide columns as possible

{ } ul {

} display : grid;

grid-template-columns : repeat (auto-fill, minmax(180px, 1fr)); A grid with as many 180px wide columns as possible

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

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

{ } CSS Grid Layout explicit placement .long {

grid-row : span 2 ; }

{ } .large {

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

grid-row : span 2 ; }

{ } .large {

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

grid-row : span 2 ; } .large1 {

grid-column : span 2 / - 1 ; }

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

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

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

. } a11y_10 progressive enhancement {

. } a11y_10 progressive enhancement {

. } a11y_10 progressive enhancement {

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

. } a11y_11 flat structures {

{ }

<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 )

{ } .wrapper {

display : grid;

grid-template-columns : 120px

repeat (2, 1fr);

grid-gap : 20px ; } h2 {

grid-column : 2 / - 1 ; } A grid with 3 columns

{ }

<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 fla # en the structure of your document and compromise on semantics !

{ } ul {

display : subg rid; } display: subgrid didn’t make it into level 1 of the specification.

{ } ul {

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

{ } ul { display : grid;

grid-template-columns : 120px

repeat (2, 1fr);

grid-gap : 20px ; } Alternative: Defining a nested grid

{ } ul {

grid-column : 1 / - 1 ;

display : inherit;

grid-template-columns : inherit;

grid-gap : inherit;

display : contents; } It’s possible to inherit grid properties

{ }

<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 fla # en the structure of your document and compromise on semantics!

{ } Don’t fla

en the structure of your document and compromise on semantics!

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

h

ps://medium.com/@matuzo/

5IBOLZPV $ Manuel Matuzovi ć

   @mmatuzo

CSSConf Budapest 10/2017