H IT W S S C E R O M N E V E G WRITIN D IN M IN Y IT IL ACCESSIB CSS Cafe September 17th, 2020 matuzo.at @mmatuzo
A presentation at CSS Café in September 2020 in by Manuel Matuzovic
H IT W S S C E R O M N E V E G WRITIN D IN M IN Y IT IL ACCESSIB CSS Cafe September 17th, 2020 matuzo.at @mmatuzo
Manuel Matuzovic HTML · CSS · a11y · performance City of Vienna · WACA webclerks · HTMHell · Frontend-Bookmarks manuel@matuzo.at · @mmatuzo @mmatuzo
@mmatuzo
Writing even more CSS with accessibility in mind • Progressive Enhancement • Respecting User Preferences • Improving Accessibility with CSS • CSS and Semantics @mmatuzo
Progressive Enhancement @mmatuzo
Progressive Enhancement @mmatuzo
Progressive Enhancement @mmatuzo
progressive enhancement HTML: Foundation / Semantic markup CSS: Design and visual improvements JS: Enhanced experience @mmatuzo
progressive enhancement div { color: #FFFFFF; css-is: amazing; CSS <3 background: #000000; } @mmatuzo
progressive enhancement @mmatuzo
progressive enhancement img { float: left; shape-outside: polygon(0.23% 2px, 17.11% 0.84%, 61.14% 21.01%, 69.91% 20.17%, 86.88% 27.73%, 90.64% 36.09%, 86.53% 50.56%, 80.07% 79.29%, 86.55% 99.48%, 0px 100%); shape-margin: 20px; } @mmatuzo
progressive enhancement img { float: left; shape-outside: polygon(0.23% 2px, 17.11% 0.84%, 61.14% 21.01%, 69.91% 20.17%, 86.88% 27.73%, 90.64% 36.09%, 86.53% 50.56%, 80.07% 79.29%, 86.55% 99.48%, 0px 100%); shape-margin: 20px; } @mmatuzo
progressive enhancement @mmatuzo
progressive enhancement <head> <script type=”module”> “// Add the .js class to the <html> element document.documentElement.classList.add(‘js’) “</script> “</head>
@mmatuzo
@mmatuzo
progressive enhancement @mmatuzo
progressive enhancement .js .accordion”__panel { display: none; } @mmatuzo
progressive enhancement @mmatuzo
@mmatuzo
Respecting User Preferences @mmatuzo
Font Size @mmatuzo
font size @mmatuzo
font size body { “/* Don’t use px for font sizes “*/ font-size: 18px; } @mmatuzo
font size target font size base font size 18px 16px rem size 1.125rem @mmatuzo
font size body { font-size: 1.125rem; “/* 16 * 1.125 = 18px “*/ } @mmatuzo
Motion and Animation @mmatuzo
motion and animation @mmatuzo
Really, there are no words to describe just how bad a simple parallax effect, scrolljacking, or even background-attachment: fixed would make me feel. I would rather jump on one of those 20-G centrifuges astronauts use than look at a website with parallax scrolling. Facundo Corradini @mmatuzo
The extreme, conscious, focused effort it took to read would make it such that anything moving on the screen would instantly break my focus, and force me to start the paragraph all over. And I mean anything. Facundo Corradini @mmatuzo
motion and animation @keyframes walk { 0% { transform: translateX(100vw); } } img { animation: walk 10s linear infinite; } @media (prefers-reduced-motion: reduce) { img { animation: none; } } @mmatuzo
motion and animation <picture> <source srcset=”moonwalk.jpg” media=”(prefers-reduced-motion: reduce)” “/> <img src=”moonwalk.gif” alt=”Someone doing the moonwalk” “/> “</picture> @mmatuzo
@mmatuzo
motion and animation img { animation: walk 10s linear infinite; } div { transition: transform 1s ease-in; } “/* has no effect in browsers that don’t support prefers-reduced-motion “*/ @media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } } @mmatuzo
@mmatuzo
motion and animation “/* has no effect in browsers that don’t support prefers-reduced-motion “*/ @media (prefers-reduced-motion: no-preference) { img { animation: walk 10s linear infinite; } div { transition: transform 1s ease-in; } } @mmatuzo
motion and animation @media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } } @mmatuzo
Improving .a y with CSS @mmatuzo
Explaining user interfaces @mmatuzo
Explaining user interfaces <a href=”menu.html”> Our Menu Our Menu “</a> <a href=”menu.pdf” download> Our Menu Our Menu “</a> @mmatuzo
Explaining user interfaces [attribute] { } a[download]”::after { background-image: url(‘icons/download.svg’); content: “”; display: inline-block; background-size: contain; } @mmatuzo
Explaining user interfaces <a href=”menu.html”> Our Menu Our Menu “</a> <a href=”menu.pdf” download> Our Menu Our Menu “</a> @mmatuzo
Explaining user interfaces @mmatuzo
Explaining user interfaces <!— screen reader sprite sheet —> <div hidden> <span id=”new-window-0”>Opens in a new window”</span> <span id=”new-window-1”>Opens an external site”</span> <span id=”new-window-2”>File download”</span> “</div> @mmatuzo
Explaining user interfaces <a href=”https:”//css-irl.info/”> Michelle Barker’s website “</a> “Michelle Barker’s website, link” <a href=”https:”//css-irl.info/” aria-describedby=”new-window-1”> Michelle Barker’s website “</a> “Michelle Barker’s website, Opens an external site, link” @mmatuzo
Explaining user interfaces [aria-describedby=”new-window-1”] { background-image: url(‘icons/external.svg’); … } a[href”^=”http:”//”], a[href”^=”https:”//”] { background-image: url(‘icons/external.svg’); … } @mmatuzo
Testing accessibility @mmatuzo
Testing accessibility @mmatuzo
Testing accessibility “/* Force yourself to test without a mouse “*/ .a11y-tests-no-mouse, .a11y-tests-no-mouse *, .a11y-tests-no-mouse *:hover { cursor: none !important; pointer-events: none !important; } <html class=”a11y-tests-no-mouse” lang=”en”> … “</html> @mmatuzo
Testing accessibility “/* Check if the page works without colors “*/ .a11y-tests-grayscale { filter: grayscale(100%) !important; }
<html class=”a11y-tests-grayscale” lang=”en”> … “</html> @mmatuzo
Testing accessibility @mmatuzo
Debugging accessibility @mmatuzo
Debugging accessibility Root element with empty or missing lang attribute. html:not([lang]), html[lang=” “], html[lang=”“], html:not(:lang(en)) { border: 10px solid red; } @mmatuzo
Debugging accessibility Elements with the class .btn or .button that are not real HTML buttons. .btn:not(button):not([type=”button”]):not([type=”submit”]), .button:not(button):not([type=”button”]):not([type=”submit”]) { outline: 2px dashed red; outline-offset: 2px; } @mmatuzo
Debugging accessibility Elements with the class .btn or .button that are not real HTML buttons. .btn:not(button):not([type=”button”]):not([type=”submit”]), .button:not(button):not([type=”button”]):not([type=”submit”]) { outline: 2px dashed red; outline-offset: 2px; } @mmatuzo
Debugging accessibility Elements with the class .btn or .button that are not real HTML buttons. .btn:not(button):not([type=”button”]):not([type=”submit”]), .button:not(button):not([type=”button”]):not([type=”submit”]) { outline: 2px dashed red; outline-offset: 2px; } @mmatuzo
Debugging accessibility Elements with the class .btn or .button that are not real HTML buttons. .btn:not(button):not([type=”button”]):not([type=”submit”]), .button:not(button):not([type=”button”]):not([type=”submit”]) { outline: 2px dashed red; outline-offset: 2px; } @mmatuzo
Debugging accessibility Tabindex higher than 0. [tabindex]:not([tabindex=”0”]):not([tabindex=”-1”]) { outline: 2px dashed red; outline-offset: 2px; } @mmatuzo
Debugging accessibility Buttons nested in links or links nested in buttons. a button, button a { border: 10px solid red; } @mmatuzo
HTMHell - htmhell.dev @mmatuzo
a11y.css - github.com/ffoodd/a11y.css @mmatuzo
<CSS> and Semantics @mmatuzo
CSS and semantics - text-transform: uppercase <ol> <li>SHOW SUBNAVIGATION”</li> <li>Show Subnavigation”</li> <li style=”text-transform: uppercase”> Show Subnavigation “</li> “</ol> @mmatuzo
CSS and semantics - text-transform: uppercase @mmatuzo
CSS and semantics- display: none input { display: none; } input + label”::before { This checkbox is not accessible border: 4px solid #000; content: “”; display: inline-block; height: 20px; margin-right: 1rem; width: 20px; } @mmatuzo
CSS and semantics- display: none .visually-hidden { position: absolute; white-space: nowrap; width: 1px; height: 1px; overflow: hidden; border: 0; padding: 0; clip-path: inset(50%); margin: -1px; } @mmatuzo
CSS and semantics - display: flex <table> <tr> <th>Name”</th>
<th>Age”</th> <th>Location”</th> <td>24”</td> <td>Austria”</td> <td>42”</td> <td>USA”</td> “</tr> <tr> <td>Sandra”</td> “</tr> <tr> <td>Mike”</td> “</tr> “</table> @mmatuzo
CSS and semantics - display: flex @mmatuzo
CSS and semantics - display: flex tr { display: flex; } @mmatuzo
CSS and semantics - display: flex @mmatuzo
CSS and semantics - list-style: none ul { list-style-type: none; } @mmatuzo
@mmatuzo
Thank you! ❤ matuzo.at @mmatuzo @mmatuzo
