Accessibilità

Come costruiamo per gli utenti da tastiera, lettori di schermo, ipovedenti e utenti a bassa tecnologia. Un'istantanea onesta e datata.

Scriviamo questa pagina come il resto del sito: cosa funziona, cosa non funziona, e come verificarlo da soli. È datata perché l'accessibilità è un obiettivo in movimento. Ri-testiamo dopo ogni versione principale.

Dichiarazione formale di accessibilità

Standard di riferimento

WCAG 2.2 AA per tutta l'esperienza. Trattamento AAA sull'aspetto del focus (anelli spessi ad alto contrasto, non oscurati) e sulla etichettatura dei form + recupero degli errori. Tracciato rispetto alla Raccomandazione W3C, non una parafrasi.

Ultimo audit interno

2026-04-19. Passaggio manuale del nostro team sulla homepage, print-size, l'hub /standards/ + 9 pagine di autorità, e le 45 pagine di destinazione degli schemi di pagamento.

Audit esterno

Commissionato, rapporto in attesa. Pubblicazione all'arrivo su /accessibility/audit/ con note di correzione, difetti intatti, nessuna selezione arbitraria.

Cadenza di ri-test

Verifica mensuale + passaggio manuale completo dopo qualsiasi modifica importante all'interfaccia. I controlli automatizzati (linting del contrasto, scansione dei nuovi criteri WCAG 2.2) vengono eseguiti ad ogni deploy.

Contatto + SLA

hello@abundera.ai, confermiamo i rapporti di accessibilità entro 2 giorni lavorativi, li triaggiamo entro 5, e trattiamo i blocchi da tastiera / screen reader / cognitivi come problemi prioritari (spediti prima del lavoro sulle funzionalità).

Conformità WCAG 2.2 AA per criterio di successo

I criteri nuovi nella versione 2.2 che stiamo monitorando attivamente. Lo stato riflette ciò che abbiamo verificato internamente; l'audit esterno avrà la precedenza.

Supporto per il movimento e i colori forzati

• prefers-reduced-motion: reduce, le transizioni di galleggiamento dell'orb ambientale e di dissolvenza vengono soppresse. Le transizioni funzionali rimangono brevi. Verificato con macOS Reduce Motion e Windows "Mostra animazioni" disabilitato.
• forced-colors: active (Modalità Contrasto elevato Windows), gli anelli di focus usano il colore Highlight del sistema; i bordi ereditano il CanvasText del sistema. Verificato in Edge su Windows 11 High Contrast.

Limitazioni note

• JAWS non ancora testato. Il prossimo ciclo AT mira a JAWS su Edge su Windows 11.
• Il Designer di biglietti da visita è progettato con priorità al mouse per l'anteprima di trascinamento della posizione. Ogni controllo ha un'alternativa da tastiera, ma il ciclo di feedback in tempo reale è ancora visivo.
• Il rapporto di audit esterno è in attesa. Lo stato auto-attestato nella tabella sopra verrà sostituito dai risultati dell'auditor all'arrivo del rapporto.
• Alcune tecnologie assistive di terze parti (Dragon NaturallySpeaking, Speech-to-text su Android) non sono nella nostra matrice di regressione; accettiamo segnalazioni dalla comunità e correggiamo per ticket.

Registro delle modifiche di accessibilità

• 2026-04-19 (PM), Risolto il doppio firing della live region di TalkBack: aria-live="polite" rimosso dal wrapper #qr-preview; gli annunci ora provengono solo dal badge di scansionabilità role="status", una volta per generazione. Modale BCD: i selettori di colore hanno ricevuto binding <label for> appropriati; il contenitore della griglia dei preset ha ricevuto role="group" + aria-label. Le tabelle di accessibilità hanno ricevuto <caption> + scope="col"/"row".
• 2026-04-19 (AM), Indicatori di focus migliorati (3 px + backup box-shadow). Supporto forced-colors + prefers-reduced-motion aggiunto. Audit dimensione target: portato .saved-profile-delete, .type-search-clear, .compat-toggle-btn a ≥ 28 px. Salto del livello di intestazione corretto (sottotitoli vCard/MECARD h4 → h3). Dichiarazione formale WCAG 2.2 AA + matrice AT pubblicata.
• 2026-04-18, Passaggio di base manuale WCAG 2.2 AA documentato. Striscia di fiducia a quattro pilastri compressa per una gerarchia più pulita.
• 2026-03-08, Pagina /accessibility/ iniziale pubblicata.

I nostri impegni

• Navigazione completa da tastiera. Ogni controllo del generatore, ogni modale e ogni flusso di esportazione è raggiungibile senza mouse.
• Stati di focus visibili. Gli input, i pulsanti e i link focalizzati mostrano un anello chiaro. Non ci affidiamo solo al colore.
• Etichette su ogni campo. Gli input del form hanno elementi <label> associati o attributi aria-label. Il testo segnaposto non viene mai usato come unica etichetta.
• Regioni ARIA live per l'anteprima QR e i toast. Gli screen reader sentono "QR generato" e i messaggi toast quando si attivano, non solo quando il focus si sposta su di essi.
• Alternative testuali per i pulsanti con solo icona. aria-label su ogni pulsante solo SVG.
• Significato di stato indipendente dal colore. I badge di scansionabilità e i chip di compatibilità abbinano il colore a un glifo e a un'etichetta di testo.
• Nomi di formato di esportazione espliciti. I pulsanti di download dicono "Scarica PNG", "Scarica SVG", ecc., non solo "Scarica".
• Target mobili grandi per il tocco. Gli elementi interattivi sono almeno 44 × 44 pixel CSS su puntatori approssimativi, secondo WCAG 2.5.8.
• Rispetto del movimento ridotto. Le transizioni vengono disabilitate sotto prefers-reduced-motion: reduce.

Dove siamo ancora carenti

• JAWS non ancora testato. Licenza JAWS acquisita, slot di test prenotato per il prossimo ciclo AT. Tutti gli altri principali (VoiceOver macOS + iOS, NVDA, Narrator, TalkBack) hanno superato la regressione più recente.
• Il Designer di biglietti da visita è fortemente basato sul mouse per design (trascina per posizionare, anteprima su canvas). Esistono alternative da tastiera per ogni controllo ma il ciclo di feedback dell'anteprima in tempo reale è ancora visivo. I controlli colore ora usano binding <label for> appropriati + role="group" sul selettore dei preset (2026-04-19).
• Flussi di generatore complessi (CSV batch, wizard multi-step) potrebbero usare una migliore struttura di link di salto. Pianificato.
• Sommari descrittivi delle tabelle. Le tabelle di accessibilità + compatibilità ora hanno attributi <caption> + scope (2026-04-19). Sommari narrativi più lunghi a livello di riga per ogni riga sono ancora pianificati.

Matrice di supporto delle tecnologie assistive

Artefatto ingegneristico, non una dichiarazione PR. Ogni riga è una reale combinazione browser + AT + piattaforma su cui abbiamo messo le mani fisicamente. Lo stato riflette l'ultimo passaggio manuale; le avvertenze registrano tutto ciò che ancora blocca un passaggio completo.

Cadenza di rilascio: la matrice viene rieseguita contro ogni modifica importante dell'interfaccia. "Superato" = nessun blocco; le avvertenze sono regressioni cosmetiche o di portata ridotta in coda per la prossima versione. "Non testato" = non abbiamo ancora eseguito fisicamente la combinazione, lo diciamo invece di omettere.

Mappa tastiera

• Tab / Shift+Tab: spostarsi avanti / indietro tra gli elementi focalizzabili.
• Invio / Spazio: attivare pulsanti e interruttori.
• Tasti freccia: spostarsi tra le opzioni all'interno di un gruppo radio (selettore di tipo, selettore di template, barra delle schede).
• Escape: chiudere i modali (Designer di biglietti da visita, preflight, servizi di stampa, ritaglio immagine).
• Home / Fine all'interno di un menu a overflow per andare al primo / ultimo elemento.

Audit interno, 2026-04-19

Passaggio manuale WCAG 2.2 AA contro la homepage, /print-size/, il nuovo hub /standards/ + 9 pagine di autorità, e le 45 pagine di destinazione degli schemi di pagamento (che ereditano dal template condiviso). Cosa abbiamo verificato, cosa abbiamo corretto e cosa è ancora aperto:

Verificato come superato

• Il target del link di salto esiste, il link di salto (href="#generator") si risolve in un elemento visibile su ogni variante di pagina.
• Stili focus visibili, :focus-visible dichiarato globalmente con un contorno da 2px, più override per input con bordo colorato + ombra. Confermato tramite audit CSS alle righe 34 e 88 di site/css/style.c17bfd85.css.
• Tutti gli input del form hanno etichette, ogni <input> / <select> / <textarea> nel generatore ha un <label for="..."> esplicito o un <label> avvolgente. Il segnaposto come etichetta non viene usato da nessuna parte.
• I pulsanti hanno nomi accessibili, ogni <button> ha contenuto testuale o un aria-label. I pulsanti solo SVG (hamburger, condividi, installa) portano tutti aria-label.
• SVG decorativi contrassegnati come nascosti, aria-hidden="true" su ogni icona decorativa in modo che gli screen reader li saltino invece di annunciarne la geometria.
• Ruoli ARIA corretti, role="radiogroup" sul selettore di tipo con role="radio" + aria-checked su ogni opzione; role="tablist" / role="tab" + aria-selected sulle schede del pannello.
• Contrasto del testo, il testo principale è #f5f5f5 su #08090a (≈ 17:1, WCAG AAA). Il testo attenuato #a3a3a3 sullo stesso sfondo è ≈ 8:1 (sopra AAA 7:1).
• Il selettore di lingua ha aria-label="Language" anche se l'etichetta visibile è implicita.

Corretto in questo passaggio

• Salto del livello di intestazione, tre sottotitoli nelle sezioni dei campi aggiuntivi di vCard / MECARD erano <h4> sotto un <h2> senza un <h3> intermedio. Gli strumenti di struttura dello screen reader lo hanno segnalato come "livello saltato". Cambiato in <h3> in modo che la struttura legga h1 → h2 → h3 → h3 in modo pulito.

Limitazioni note

• Scansione completa Axe / NVDA / VoiceOver richiede un browser + AT che non possiamo eseguire dalla pipeline di build. Passaggio manuale basato su browser programmato mensilmente.
• L'audit indipendente di terze parti è commissionato (vedi segnaposto /accessibility/audit/). Il rapporto verrà pubblicato all'arrivo anche se contiene risultati.
• La scorciatoia da tastiera "/" per la palette dei comandi è un leggero rischio di collisione nelle pagine con campi di ricerca. Usiamo preventDefault() solo quando il focus è fuori da un input; documentato ma non ancora verificato con AT.

Segnalare un problema

Se qualcosa non è raggiungibile da tastiera, etichettato erroneamente o altrimenti inutilizzabile con la tua configurazione, invia un'email a hello@abundera.ai. Includi il tuo browser, OS, AT e il flusso specifico. Trattiamo i bug di accessibilità come problemi prioritari.

Ultima revisione: 2026-04-19. Prossima revisione: dopo la prossima modifica importante all'interfaccia.