Writing even more CSS with Accessibility in mind

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 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 @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 “/* 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 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 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> @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

CSS and semantics - list-style: none @mmatuzo

@mmatuzo

CSS and semantics - speak-as span { speak-as: digits; } @mmatuzo

Thank you! ❤ matuzo.at @mmatuzo @mmatuzo