% F T J H O F E Writing CSS with Accessibility in Mind * O D M V T J P O G P S Manuel Matuzovi ć
@mmatuzo
CSSConf Budapest 10/2017
A presentation at CSS Conf Budapest in October 2017 in Budapest, Hungary by Manuel Matuzovic
% F T J H O F E Writing CSS with Accessibility in Mind * O D M V T J P O G P S Manuel Matuzovi ć
@mmatuzo
CSSConf Budapest 10/2017
Manuel Matuzovi ć @mmatuzo
???
{ }
<frameset cols = "17%,*,17%""0"
""
"0"
</frameset> Look ma, no CSS!
{ }
<frameset cols = "17%,*,17%""0"
""
"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""0"
"#004400"
"1"
"#006700"
"left"
"442%"
Float? Flexbox? Grid? Pfff! <table> !
{ }
<table cellspacing = "0""0"
"#004400"
"1"
"#006700"
"left"
"442%"
Float? Flexbox? Grid? Pfff! <table> ! ???
{ }
<table cellspacing = "0""0"
"#004400"
"1"
"#006700"
"left"
"442%"
Float? Flexbox? Grid? Pfff! <table> !
<tbody> <tr> <td width= "23%" > Name: </td> <td> Manuel Matuzovic </td> </tr> </tbody> </table> ???
{ }
<body link = "004600""ffffff"
"005600"
"004600"
"004600"
HTML tags and a
ributes for global page styles
{ }
<body link = "004600""ffffff"
"005600"
"004600"
"004600"
HTML tags and a
ributes for global page styles
<font size= "4" face= "arial"
<table> ...
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 {
D I B S B D U F S T Q F S M J O F
{ } 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 →
"true"
"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/
5 I B O L Z P V $ Manuel Matuzovi ć
@mmatuzo
CSSConf Budapest 10/2017
