A presentation at Inclusive Design 24 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 #ID24 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” @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> @mmatuzoTesting 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 Images without alt attribute or alt attribute with an empty string as value. img:not([alt]), img[alt=” “] { 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 orange; 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 - 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> @mmatuzoCSS 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
CSS and semantics - list-style: none @mmatuzo
@mmatuzo
CSS and semantics - speak-as span { speak-as: digits; } @mmatuzo
Thank you! ❤ matuzo.at @mmatuzo @mmatuzo
What’s the first thing that comes to your mind when you think of “CSS and accessibility”? Maybe text size, color contrast, or DOM order. Important topics, without question, but there’s a lot more to consider when writing inclusive CSS. This talk aims to help you create better interfaces by adapting to your users’ needs. You’ll learn how to debug and test with CSS, how attribute selectors can improve accessibility, and when CSS affects the semantics of your HTML.
The following resources were mentioned during the presentation or are useful additional information.
for free. You
can too.