Requisiti di accessibilità

  • 15 minuti

È essenziale conoscere i principi e i requisiti chiave che assicurano che i prodotti digitali siano accessibili a tutti gli utenti, inclusi quelli con disabilità. Le linee guida per l'accessibilità dei contenuti Web (WCAG) offrono un framework completo per la creazione di componenti accessibili di contenuto Web e interfaccia utente. Questa sezione descrive i principi e i requisiti di accessibilità principali correlati al ridimensionamento e al reflow.

Panoramica delle linee guida per l'accessibilità

Gli standard WCAG forniscono linee guida specifiche per garantire che i siti Web e le app siano adattabili (linee guida 1.3),distinguibili (linee guida 1.4), navigabili (linee guida 2.4)e compatibili (linee guida 4.1). Questi criteri di successo sono incentrati sulla facilità di spostamento, prevedibilità e coerenza dei contenuti Web e delle app e sulla compatibilità con le tecnologie di assistive. Per soddisfare queste linee guida, i progettisti e gli sviluppatori devono prendere in considerazione quanto segue:

Adattabile

Questa linea guida è incentrata sulla necessità di garantire che le informazioni siano strutturate in modo da poterle presentare in formati diversi senza perdere significato o funzionalità. È necessario garantire che il contenuto rimanga accessibile quando gli utenti modificano le dimensioni del testo o il layout si adattano a diverse dimensioni e orientamenti dello schermo (SC 1.3.4). Richiede anche la presentazione del contenuto in un ordine significativo che mantiene il significato e le relazioni desiderate (SC 1.3.1) quando il formato della presentazione cambia. Inoltre, l'ordine di lettura e spostamento del contenuto deve rimanere logico e significativo (SC 1.3.2), indipendentemente dalle modifiche di layout dovute al ridimensionamento o al reflow.

Distinguibile

Questa linea guida è incentrata su come rendere il contenuto percepibile assicurandosi che sia distinguibile e accessibile a tutti gli utenti. Include diversi requisiti chiave, ad esempio garantire che:

  • Il testo può essere ridimensionato fino a 200% senza perdita di contenuto o funzionalità (SC 1.4.4).
  • Il testo può essere ridimensionato fino a 200% senza assistive technology, consentendo agli utenti di leggere una riga di testo completa in una finestra a schermo intero senza dover scorrere orizzontalmente (SC 1.4.8).
  • Il testo viene presentato come testo effettivo anziché come immagini di testo, consentendo il ridimensionamento e lo stile senza perdita di chiarezza (SC 1.4.5). Quando il testo si trova in un'immagine, le sue dimensioni, la spaziatura e il colore non possono essere regolati, né può essere letto ad alta voce o reimpaginato.
  • Il contenuto può riscorrere all'interno di un riquadro di visualizzazione quando viene eseguito lo zoom fino a 400% senza perdita di informazioni o funzionalità e senza la necessità di scorrimento orizzontale (SC 1.4.10). Lo scorrimento verticale delle app deve scorrere verso il basso fino a una larghezza di 320 pixel CSS, ovvero la dimensione del contenuto prima dell'applicazione dello zoom. Analogamente, le app che scorrono orizzontalmente devono scorrere verso il basso fino a un'altezza di 256 pixel CSS. Quando si testa il reflow, spesso vengono applicati sia i criteri di 320 pixel CSS di larghezza che i criteri di 256 pixel CSS di altezza.

    Screenshot del ridimensionamento e dell'adattamento dinamico del contenuto dei requisiti di scorrimento verticale e orizzontale.

  • Gli utenti possono regolare la spaziatura del testo, l'altezza della riga e la spaziatura delle lettere, che consente di mantenere la leggibilità quando il testo viene ridimensionato (SC 1.4.8; vedere esempi). L'immagine mostra esempi di paragrafi con spaziatura singola, spaziatura di uno e mezzo e doppia spaziatura.
  • Gli utenti possono modificare la spaziatura tra lettere, parole e righe senza perdere contenuto o funzionalità (SC 1.4.12). Testo troncato orizzontalmente, testo troncato verticalmente e testo sovrapposto sono tutti esempi di errori per soddisfare questo criterio.
  • Il contenuto che appare quando si passa con il mouse sopra o si mette a fuoco rimane accessibile quando il contenuto viene ridimensionato o riorganizzato (SC 1.4.13).

Questa linea guida è incentrata sulla fornitura di meccanismi di spostamento chiari nei siti Web e nelle app. Include diversi requisiti chiave:

  • Fornire agli utenti un modo per ignorare il contenuto ripetitivo e passare direttamente al contenuto principale della pagina. Man mano che il contenuto passa a viewport più piccoli o dopo lo zoom, gli utenti devono comunque essere in grado di ignorare i blocchi in modo efficiente senza dover scorrere inutilmente le sezioni ripetute (SC 2.4.1).
  • Assicurarsi che le pagine abbiano titoli descrittivi e informativi che consentono agli utenti di comprendere l'argomento o lo scopo della pagina. Quando il contenuto della pagina viene ridimensionato o riorganizzato, questo titolo rimane essenziale per gli utenti per comprendere lo scopo della pagina. Gli utenti che si basano sullo zoom o su un layout riformattato devono identificare rapidamente la pagina anche quando cambia il design visivo (SC 2.4.2).
  • Assicurarsi che lo scopo di ogni collegamento sia chiaro dal testo del collegamento da solo o dal testo del collegamento insieme al contesto circostante. Quando il contenuto viene ridimensionato e riordinato, è essenziale assicurarsi che il testo rimanga leggibile e i collegamenti rimangano facilmente riconoscibili senza che vengano tagliati o alterati visivamente (SC 2.4.4, SC 2.4.9).
  • Fornire più modi per consentire agli utenti di individuare una pagina all'interno di un set di pagine, ad esempio una funzione di ricerca, una mappa del sito o un sommario. Quando si ridimensiona e si riorganizza il contenuto, è essenziale assicurarsi che queste opzioni di navigazione alternative rimangano accessibili e funzionali, anche se il contenuto si adatta a schermi più piccoli o con livelli di zoom maggiori (SC 2.4.5).
  • Usare intestazioni ed etichette chiare e descrittive per aiutare gli utenti a comprendere la struttura e lo scopo del contenuto. Man mano che il testo viene ridimensionato o riformattato, le intestazioni e le etichette devono rimanere chiare e mantenere la loro gerarchia per consentire agli utenti di navigare facilmente nel contenuto. Se le intestazioni vengono distorte, disallineate o oscurate visivamente durante l'adattamento dinamico del contenuto, possono confondere gli utenti e interrompere la navigazione (SC 2.4.6, SC 2.4.10).
  • Assicurarsi che l'indicatore di stato attivo della tastiera sia visibile in modo che gli utenti comprendano quale elemento ha attualmente lo stato attivo, anche quando il layout cambia (SC 2.4.7).
  • Assicurarsi che l'ordine di spostamento degli elementi interattivi sia logico e intuitivo.

Compatibile

Questa linea guida mira a ottimizzare la compatibilità con gli agenti utente attuali e futuri, incluse le tecnologie di assistive technology. Indica che il contenuto creato con linguaggi di markup deve avere elementi con tag di inizio e fine completi, elementi annidati correttamente, senza attributi duplicati e ID univoci. Ciò garantisce che gli agenti utente possano interpretare e analizzare accuratamente il contenuto. Inoltre, tutti i componenti dell'interfaccia utente devono avere nomi e ruoli che possono essere determinati a livello di codice e tutti gli stati, le proprietà o i valori che gli utenti possono modificare devono essere regolabili a livello di codice.

Le modifiche apportate a stati, proprietà o valori devono essere comunicate agli agenti utente, consentendo alle tecnologie di assistive technology di interagire e fornire informazioni su questi componenti. Infine, questa linea guida richiede che i messaggi di stato vengano determinati a livello di codice tramite ruoli o proprietà in modo che possano essere presentati all'utente con soluzioni di assistive technology senza ricevere lo stato attivo. Ciò garantisce che gli utenti che si affidano alle utilità per la lettura dello schermo o ad altre tecnologie di assistive technology siano informati di importanti cambiamenti nel contenuto senza interromperli.