Disponibilità e interfacce UX per tutti

1) Perché è importante

Legalmente ed eticamente, l'interfaccia non deve escludere le persone con disturbi visivi, uditivi, motorie, cognitivi.
Impatto aziendale: più utenti, maggiore conversione e ritenzione, migliore SEO e qualità del codice.
Operativamente, la disponibilità è un processo, non una fix casuale.

2) Basi e principi (PUR)

Perceivable - Contrasto, testo alternativo, sottotitoli.
Operabile - Tutto disponibile dalla tastiera, attivazione visibile, interruzione/stop delle animazioni.
Understandable - Navigazione prevedibile, errori chiari, formulazioni semplici.
Robust è una semantica HTML/ARIA corretta, compatibile con la tecnologia assistita.

3) Semantica, intestazione e ARIA

Etichettatura semantica prima di ARIA: '<button>', '<nav>', '<form>', '<table>', 'destinazione'.
Gerarchia di intestazione: uno "<h1>" per pagina, seguito dalla struttura logica "<h2>" è <h3> ".
Landmarks: «<header>», «<main>», «<aside>», «<footer>», «<nav>», aiutano gli screener.
ARIA solo se necessario: «rolle», «aria-label», «aria-describedy», «aria-expanded», «aria-live».
Stati/errori tramite «aria-invalid», «aria-errormessage».

4) Tastiera e focus management

Controllo completo della tastiera: 'Tav/Shift + Tab' - Ordine,' Invio/Space '- Attivare,' Esc '-' Uscita '.
Il trucco visibile è sempre; non disattivare l'outline.
Trappole del trucco: i modali sono un trucco ciclico, ripristinando il fuoco sulla sorgente dopo la chiusura.
Gli elementi nascosti non devono essere inseriti nell'ordine di display ('display: none', 'aria-hidden =' true ').
Collegamenti skip: Vai al contenuto principale all'inizio della pagina.

5) Colore, contrasto e tipografia

Contrasto del testo: almeno 4. 5:1 per il testo normale e 3:1 per quello grande.
Non fare affidamento solo sul colore, doppiare con icone/pattern/firma.
Dimensioni degli obiettivi cliccabili: minimo 40-48 px, campi sufficienti intorno.
Caratteri: auricolari leggibili, interstream 1. 4–1. 6, lunghezza della riga 45-90 caratteri.

6) Movimento, animazioni e flash epilettogeno

Rispettare il flag prefered-reduced-motion di sistema - Aggiungere animazioni semplificate o disattivare il parallax.
Evitare misurazioni> 3 volte al secondo.
Tutti i movimenti auto devono avere Pausa/Stop/Hide.

7) Moduli, errori e convalida

Collegare esplicitamente etichette e campi a «<label for =» id «>».
Il playsholder non è un marchio.
Messaggi di errore accanto al campo e nel riepilogo degli errori nella parte superiore. Collegare attraverso «aria-describedby».
Spiegare il formato di input, l'esempio, la maschera; indicare unità e valuta.
Non ripristinare i campi completati in caso di errore; mantenete il focus sul campo problematico.

html
<label for="email">Эл. почта</label>
<input id="email" name="email" type="email" aria-describedby="email-hint email-err">
<div id="email-hint" class="hint">Мы не рассылаем спам</div>
<div id="email-err" class="error" role="alert">Укажите адрес в формате name@example.com</div>

8) Componenti e : pattern

Pulsanti vs link: azione = '<button>', transizione = '<a>'.
Taba/accordeoni: frecce di navigazione, «aria-controlls», «aria-selected».
Modalks/interazioni: «role =» dialogog «,» aria-modal = «true», la trappola del trucco, «Esc» chiude.
Tooltip/Popover - Disponibilità tastiera, timeout non interferisce con la lettura.
Drag & Drop: alternative - pulsanti «spostare su/giù», frecce di tastiera; gli eventi non sono solo un mouse.

9) Media: video/audio/grafica

Video - Sottotitoli, trascript, traccia audio alternativa (AD).
Decifrazione di testo audio.
Grafici/grafici: riepilogo di testo («cosa importante»), tabella dati, etichette descrittive degli assi.
Aree viventi: "aria-live =" polite "/" assistenziale "- attenzione a non" urlare "troppo spesso.

10) Tabelle e elenchi

11) i18n, locali e RTL

Attributo «lang» alla radice html; formati locali di numeri/date/valute.
Supporto RTL (arabo/ebraico): mirroring delle icone, ordine di navigazione, puntatori.
Evitare le icone (il testo deve essere tradotto).
Semplice formulazione, evitare gergo; glossario di termini.

12) Tempo, sessioni, gocce e alternative

Timeout - con avvertimento e possibilità di prolungamento.
CAPTCHA: preferisci alternative (domande, analizzatori di bot invisibili, conferma per posta/telefono); se si utilizza un'alternativa di testo e non solo visiva.
Autenticazione: supporto per gestori password, «mostra password», WebAuthn.

13) Disponibilità per disturbi sensoriali e motori

I gesti devono avere gli equivalenti click/tastiera.
Non richiedere lunghe trattenute o doppie tappe senza alternative.
Punto cancellazione - L'azione deve essere eseguita sul rilascio, non premendo per dare la possibilità di annullare.

14) Stati, notifiche e alert

Usa "role =" status "/" alert "per i messaggi dinamici.
Non sovrapponete a striscioni appiccicosi.
Notifiche toast - interruzioni/hover e accesso dalla tastiera.

15) Piano di prova (manuale e automatico)

• Passare tutti gli script chiave solo con la tastiera.
• Controlla la visibilità del focus su ogni elemento.
• Ingrandisci fino al 200% - l'interfaccia rimane funzionale senza screen orizzontale.
• Attiva la modalità di sistema per ridurre il movimento - Le animazioni non interferiscono.
• Passare lo script con lo screener (NVDA/VoiceOver), assicurarsi che i ruoli/etichette/ordinamento siano corretti.

• Lenti di disponibilità a livello di componenti.
• Controllare il contrasto, i testi alternativi, l'ordine dei titoli, la validità di ARIA.
• Snapshot semantici (role tree) per schermi critici.

16) Metriche di qualità della disponibilità

A11y Coverage - Quota di componenti con fogli di assegno superati.
Keyboard-only Pass Rate è la percentuale di script che passa dalla tastiera.
Contrast Violations/1k elementi.
Tempo di percorrenza dello script con lo screener SR Flow Time.
User-feedback - Richieste di disponibilità, tempi di risposta e correzioni.

17) Assegno foglio componente

• Corretta semantica/ruolo senza ARIA in eccesso
• Etichette firmate, 'aria'corrette
• Gestione completa della tastiera, attivazione visibile
• Contrasto testo/icone/limiti nella norma
• Gli errori e gli stati vengono comunicati dallo screening
• Rispetto prefers-reduced-motion
• Dimensioni dell'area cliccabile 40-48 px
• Localizzazione e RTL non rompono il layout

18) Anti-pattern

Pulsanti Dilettanti senza ruolo/tastiera.
Nascondi «outline: none» senza alternative.
Playsholder invece di label.
Errori solo di colore.
Modalka senza trucco e senza «Esc».
Drag-only senza tastiera.
Lunghe scorciatoie/parallax senza l'opzione di disattivare.

19) Ruoli e processi

A11y proprietario nel comando (Product/Design/Dave).
Definish-of-Dan (DoD) include la disponibilità.
Il design-review controlla il contrasto, il trucco, le etichette.
Codice-ringhiera: semantica/ARIA, test tastiera.
Verifiche regolari e piano di miglioramento.

20) Implementazione per iterazioni

• Semantica/intestazione, contrasto, fuoco e tastiera, moduli di base e errori.

• Modalke, tab/accordeons, tabelle/grafici con curriculum testuale, video-sottotitoli, animazioni ridotte.

• Autoveicoli in CI, RTL/i18n, metriche, verifiche regolari, addestramento del team.

21) Modelli e snippet

html
<div role="dialog" aria-modal="true" aria-labelledby="dlg-title" aria-describedby="dlg-desc">
<h2 id="dlg-title">Подтвердите действие</h2>
<p id="dlg-desc">Эта операция необратима.</p>
<button>Отмена</button>
<button>Подтвердить</button>
</div>

html
<a class="skip-link" href="#main">Перейти к основному содержимому</a>
<main id="main">...</main>

css
@media (prefers-reduced-motion: reduce) {
{ animation-duration: 0.01ms!important; animation-iteration-count: 1!important; transition: none!important; }
}

22) Mini FAQ

C'è bisogno di una versione separata per i disabili visivi?
No, no. Una versione adattiva e disponibile per tutte le impostazioni.

È sufficiente controllare solo il contrasto?
No, no. Il contrasto è solo una parte. Servono tastiera, attivazione, semantica, errori di forma, media, ecc.

L'ARIA risolverà tutto?
ARIA non correggerà la semantica sbagliata. Prima i tag corretti, poi le precisazioni ARIA.

Totale

La disponibilità è una disciplina di sistema: semantica, tastiera/fuoco, contrasto/colore della forma/errore dei media/grafici i18n/RTL, test-piano e metriche. Rendete l'accessibilità parte del team e della cultura - e il vostro prodotto diventerà davvero versatile, affidabile e conveniente per tutti.