A presentation at CSS Conf Budapest in 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
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.
The following resources were mentioned during the presentation or are useful additional information.
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/
for free. You
can too.