Accessibilità con stile - CSS per il web moderno e accessibile

Quando si discute di accessibilità nel web, si parla spesso di WAI-ARIA, elementi HTML semantici, attributi, e come JavaScript può aiutare in tutto questo. Ma il terzo, fondamentale componente del web è costituito dal CSS.
Vedremo in che modo il CSS può avere impatto all'accessibilità della pagina, anche in modi in cui forse non avremmo immaginato; come il CSS può aiutarci a migliorare la fruizione dei contenuti, non solo per specifici impedimenti sensoriali e cognitivi ma per tutti gli utilizzatori; e quali sono gli strumenti su cui possiamo fare affidamento per lo sviluppo di pagine e applicazioni accessibili.

Transcript

1. Accessibilità con stile CSS per il web moderno e accessibile
2. Il web • HTML • JavaScript • CSS • media
3. HTML • Elementi semantici: <header>, <article>, <nav>, <img>, <table>, … • Attributi e elementi descrittivi: alt, for, lang, dir, scope, required, <figcaption>, <caption>, <legend>, … JavaScript • Controllo del focus • Aggiornamento attributi WAI-ARIA: role, aria-label, aria-describedby, aria-live, aria-selected, … • Attributi WAI-ARIA: role, aria-label, aria-describedby, aria-live, aria-selected, … • Attributi di controllo: tabindex, accesskey, target, contenteditable, autofocus, list, … • Creazione nuovi elementi e contenuti CSS • … che fa?
4. CSS e accessibilità display: none • Non mostra il nodo • Gli screen reader ignorano il nodo PERÒ display: table • Non comporta role="table" display: grid • Non comporta role="grid"
5. Screen reader 🔊 “Add” ➕ Add 🔊 “A-D-D” text-transform: uppercase ➕ ADD
6. Screen reader, pt. 2 Home Page Site <nav> <ul> <li><a href="…">Home</a></li> <li><a href="…">Page</a></li> <li><a href="…">Site</a></li> </ul> </nav> ul { display: flex; list-style: none; color: white; background: rebeccapurple; ... }
7. Screen reader, pt. 2 Home Page Site • Elenco • Numero link • Indice link • Elenco • Numero link • Indice link ¯\_(ツ)_/¯ A parità di HTML, CSS, OS e screen reader!
8. Accessibilità nel web Su cosa si basano le indicazioni di accessibilità dei contenuti web? HTML + CSS Accessibility Tree
9. Accessibility Feedback Cycle
10. Dal DOM all’Accessibility Tree • Mappatura uno-a-uno • <nav> navigation • <header> banner • <ul> <ol> list • <a> link • … • “Appiattimento” • Era <em>molto</em> importante > text Era > text molto > text importante • Espansione • <video>…</video> Video > button riproduci > button disattiva audio > slider > graphic Core Accessibility API Mappings
11. Dal DOM all’Accessibility Tree Attributi di accessibilità • Da attributi aria-* • Nativi slider Name: "dispositivo di scorrimento durata video 0:00 / 0:05" aria-labelledby : Not specified aria-label: "dispositivo di scorrimento durata video 0:00 / 0:05" From label: Not specified title: Not specified Value: 0 Role: slider Invalid user entry: false Focusable: true Can set value: true Orientation: horizontal Minimum value: 0 Maximum value: 5.059000015258789 Value description: "Tempo trascorso: 0:00"
12. Ma c’è di più! Anche logiche euristiche del browser possono influenzare la definizione dell’accessibility tree • Tabelle per il layout • Dimensioni nulle • Contenuto fuori schermo • … altro a venire .sr-only { clip: rect(0 0 0 0); clip-path: inset(50%); height: 1px; overflow: hidden; position: absolute; white-space: nowrap; width: 1px; }
13. Strumenti di sviluppo: Chrome
14. Strumenti di sviluppo: Firefox
15. Strumenti di sviluppo: Safari ¯\_(ツ)_/¯
16. E non è tutto! Non è sufficiente HTML, CSS ed euristica del browser per determinare l’accessibilità Riuscite a leggere questo testo? LOREM IPSUM O a premere questo pulsante? × O a capire cos’è selezionato? Carta di Credito Contanti O questo?
17. Testi e font
18. Storia della dimensione perfetta L’industria tipografica stabilì empiricamente che la dimensione ottimale del font fosse di 12pt. Ma il web usa i pixel, quindi... 1pt = ??px 🤔
19. Dimensioni dei display nella storia Per non parlare di: TV, proiettori, smartwatch…
20. Lo standard web Per standard W3C, 12pt = 16px è la dimensione di base* del font (font-size). * a meno che non venga reimpostato. Inoltre, l’interlinea di base (line-height: normal) è ~1.2 “Circa” in quanto dipende dal font.
21. Dimensione del font La dimensione fisica del carattere di dimensione standard è andata sempre calando. a 📄 ~2.5 mm 💻 ~1.7 mm 📱 ~1.1 mm 👉 display più vicini agli occhi 👉 maggiore stress visivo
22. Dimensioni di base (livello AAA) 👉 Aumentare la dimensione font 👉 Aumentare l’interlinea (a 1.5) 👉 Massimo 80 caratteri/linea 👉 Testo allineato a sinistra :root { font-size: 20px; line-height: 30px; } :root { font-size: 125%; line-height: 1.5; }
23. Dimensioni, segnali e ordine
24. Sempre a proposito di dimensioni… Gli elementi interattivi dovrebbero avere una superficie di contatto di almeno 44px in altezza e larghezza. Ok Annulla 🚫 Ok Annulla ✅ Ok Annulla ✅
25. Focus Stili eliminati spesso perché brutti. Andrebbero invece rimpiazzati con stili altrettanto efficaci. O anche più efficaci, in quanto gli stili di default potrebbero non fare abbastanza contrasto coi colori della pagina (es.: sfondo blu).
26. Focus button { border: solid 1px; } button:focus { outline: red solid 1px; } Ok Ok
27. Focus e em per gli spessori button:focus { border: solid .1em; } button:focus { outline: red solid .1em; } Ok Ok
28. Focus e min/max per i bordi button { border: solid max(.1em, 1px) } button:focus { outline: red solid max(.1em, 1px); } Ok Ok
29. Focus button:focus { ...; outline-offset: max(.1em, 1px); } Ok Ok button:focus { outline: dashed max(.1em, 1px); outline-offset: min(-.1em, -1px); }
30. Focus e border-radius button { border-radius: .25em; } button:focus { outline: red solid max(.1em, 1px); } Ok outline dovrebbe seguire la curvatura degli angoli, ma non lo fa (ancora). Nel mentre si può usare box-shadow o effetti alternativi. Ok Ok
31. Focus ed effetti alternativi Si faccia attenzione a cosa si usa come effetto alternativo per il focus. Può non essere chiaro quale elemento ha il focus, anche se si rispettano tutti i vincoli di WCAG. outline ha il vantaggio di essere generalmente riconosciuto come uno standard per il focus. Ok Focus Default Ok Ok Focus Default Ok In ogni caso, outline: none può dare problemi quando si usano colori forzati: meglio outline-color: transparent.
32. :focus-visible button:focus-visible { outline: red solid .1em; } Alternativa per mostrare un effetto di focus solo quando necessario (es.: con movimento da tastiera). I browser implementano una logica euristica a seconda degli input. Il supporto dei browser non è ancora completo e non c’è graceful degradation. button:focus { outline: red solid .1em; } button:focus:not( :focus-visible) { outline: none; }
33. :focus-within Consente di dare stile ad un elemento quando un elemento al suo interno ha focus. Utile per evidenziare form o sottosezioni di form. fieldset:focus-within { border-color: red; background: #fffafa; } Nome Cognome Via/Piazza Roma| N. civico O anche per cose del genere: <label> <input type="checkbox"> Accetto i termini </nav>
34. Sempre a proposito di focus… Il focus dovrebbe seguire l’ordine degli elementi nel DOM. Home Products Support News Privacy Contact us Home Products Support News Privacy Contact us 🚫 ✅
35. Causa di focus visivamente fuori ordine • position: absolute; • margini negativi (es.: .col-pull/push-x); • order (flex); • grid-auto-flow: x dense; • grid-template-rows: masonry; • flex-direction: x-reverse; • tabindex maggiore di 0;
36. “Cliccabile” e “tabbabile” Non tutto ciò che è cliccabile dev’essere anche “tabbabile”… … ma è più argomento da HTML e JavaScript! Esempi da W3C
37. Media queries
38. Lettura di una pagina
39. Lettura di una pagina #app { display: grid; grid-template-columns: 15% auto 20%; grid-template-area: "head head head" "nav main side" "nav main ads"; } <div id="app"> <header>...</header> <nav>...</nav> <aside>...</aside> <aside class="ads"> ...</aside> <main>...</main> <footer>...</footer> </div>
40. Lettura di una pagina
41. Lettura di una pagina #app { display: flex; flex-direction: column; } @media screen and (min-width: 1025px) { #app { display: grid; grid-template-columns: 15% auto 20%; ... } }
42. Supportare lo zoom Le richieste AA specificano un contenuto fruibile anche con uno zoom fino al 400%. Praticamente lo schermo di uno telefono! 1920px 480px 1366px 341.5px 1280px 320px
43. Media Queries Level 5 Introdotte diverse media query specifiche per l’accessibilità. • prefers-reduced-motion • prefers-color-scheme • prefers-contrast • prefers-reduced-transparency • forced-colors • inverted-colors
44. prefers-reduced-motion reduce no-preference Da applicare a:
45. prefers-color-scheme light dark @media (prefers-color-scheme: dark) { #app { color: #eee; background: #333; ... } } Questo è lo schema per chi preferisce gli sfondi scuri. @media (prefers-color-scheme: light) { #app { color: #333; background: #eee; ... } } Questo dovrebbe essere lo schema di default, quindi non è necessario specificare questa media query.
46. prefers-contrast Casi d’uso: miopia, daltonismo, astigmatismo, dislessia… less more no-preference prefers-reduced-transparency reduce no-preference Precedente illustre: -ms-high-contrast L’obiettivo con reduce è rendere più semplice il riconoscimento di forme.
47. forced-colors Non significa una preferenza per alti contrasti, ma solo una palette imposta dal sistema operativo. active none Si può fare l’override con forced-colors-adjust: none. Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet È buona idea rimuovere elementi decorativi dall’interfaccia.
48. inverted-colors Quali dispositivi hanno colori invertiti? inverted none @media screen and (inverted-colors: inverted) { img { filter: invert(1); } }
49. Come usare le media query? Mobile first: dai casi più limitati a quelli più completi. .barrel-roll { animation: none; } @media (prefers-reduced-motion: no-preference) { .barrel-roll { animation: spin 1s infinite; } } @media (prefers-reduced-motion: reduce) { * { animation-duration: 0.01ms; } } Problema: supporto dei browser matchMedia('all and (foo: bar)') .matches // > false 🚫 matchMedia('not all and (foo: bar)') .matches // > false 🚫 Soluzione: usare le media query per soluzioni specifiche.
50. Colori
51. Parliamo di contrasto 👍 Va bene (AA) 3.0 👏 Va meglio (AAA) 4.5 Lo standard WCAG 2.1 definisce dei rapporti di contrasto minimi per i nostri contenuti … ma come si calcolano?
52. Spazio di colore RGB Componenti fondamentali del colore sui comuni dispositivi: • Rosso • Verde • Blu
53. Da RGB a sRGB Dobbiamo passare allo spazio di colore sRGB. Perché? È quello più usato in ambito informatico, anche se è residuo dell’epoca CRT. Riferimento: w3.org
54. Luminanza Media pesata delle componenti del colore sRGB Rapporto di contrasto
55. Perché ci serve la luminanza? Lo spazio di colore hsl non è adeguato per indicare quanto è chiaro un colore 0.5 La “torta” di sopra con i colori normalizzati sulla luminanza a 0.5
56. Esempi di contrasti #ffffff #ffffff 🚫 2.44 ✅ 8.59 #ffffff #ffffff ✅ 15.3 🚫 1.37 #ffffff #ffffff ✅ 5.25 🚫 4.00 Opportuni caveat: • si tratta comunque di un’approssimazione; • ci sono altri fattori da considerare. Lorem ipsum dolor, sit amet consectetur adipisicing elit. Perspiciatis ratione doloribus consectetur hic repellat. Dolorum, totam dignissimos at incidunt quod, asperiores laborum perferendis. Lorem ipsum dolor, sit amet consectetur adipisicing elit. Perspiciatis ratione doloribus consectetur hic repellat. Dolorum, totam dignissimos at incidunt quod, asperiores laborum perferendis.
57. Contrasti… per cosa? Cosa distingue un testo grande? • dimensione almeno 18pt, oppure • almeno 14pt grassetto. I limiti visti sono per un testo grande. Per un testo piccolo i valori diventano: • AA: 4.5 • AAA: 7.0 Domande: • 18pt = 6.35mm - a che distanza? • grassetto = peso 700 - riferito a che font? Va bene fare delle assunzioni: • 18pt = 24px - come da specifiche W3C • grassetto riferito al font di sistema (Roboto, San Francisco, Segoe UI…)
58. Altre richieste Per altri elementi grafici - come linee divisorie, sfondi di pulsanti, bordi di caselle di immissione, focus outline: • AA/AAA: 3.0 Per testo contenuto in immagini: • se è un testo significativo (es. valori in un grafico, titoli…), si usano gli stessi criteri del testo; • se si tratta di testo puramente decorativo, non ci sono vincoli. test@email.com PROCEDI 🚫 test@email.com PROCEDI ✅
59. Contrasto troppo elevato Non ci sono limiti per il contrasto secondo il WCAG, ma è bene tenersi entro un rapporto di 12 circa. Vale sia per testo scuro su sfondo chiaro, sia viceversa. L’astigmatismo è causa di problemi con contrasti elevati. Come mettere in difficoltà gli astigmatici Come mettere in difficoltà gli astigmatici Come mettere in difficoltà gli astigmatici Come mettere in difficoltà gli astigmatici Tuttavia, c’è chi ha bisogno di un contrasto molto elevato (prefers-contrast, forced-colors).
60. Calcolatrice sempre pronta? Le specifiche CSS Color Level 5 introducono color-contrast. • Strumenti di sviluppo • Tool online (es. contrast-ratio.com) section { color: color-contrast(white vs darkgray, purple, red); } Chiaramente, il vero vantaggio si ha con colori non predefiniti, es.: var(--my-color).
61. Strumenti di sviluppo
62. Chrome e Firefox
63. Lighthouse Accessibility Report
64. Report accessibilità (Firefox)
65. Audit accessibilità (Safari)
66. Visual Deficiencies Emulation (Chrome, FF) Ok Annulla Ok Annulla Deuteranopia
67. Estensioni • WAVE Evaluation Tool (Chrome, Firefox) • Tota11y Toolkit (Chrome, Firefox); • ChromeLens (Chrome) • axe (Chrome, Firefox)
68. Per migliorare il web • Lavorate con utenti delle varie tecnologie assistive; • raccogliete i report sulla pagina; • emulate interazioni differenti; • o almeno con esperti in materia; • usate qualche screen reader.
69. That’s all, folks! 👋