Molte persone utilizzano lo sviluppo basato su componenti utilizzando guide di stile dei pattern, librerie di componenti o sistemi di progettazione completi nel processo del flusso di lavoro di sviluppo. Anche se non hai utilizzato formalmente questi strumenti, è probabile che tu utilizzi un processo simile per suddividere un progetto di grandi dimensioni per un sito web, un'app o un altro prodotto digitale in parti gestibili.
Come per la costruzione di una struttura fisica, è importante procedere un pezzo alla volta. Innanzitutto, le fondamenta, la struttura, le pareti, le finestre, il tetto e tutto il resto. Gli strumenti di sviluppo basati su componenti ci consentono di farlo per siti web, app e altri prodotti digitali.
Alcuni vantaggi dello sviluppo basato su componenti includono la suddivisione in parti gestibili, in modo da ridurre i tempi di sviluppo con questi componenti riutilizzabili. Consente a progettisti, sviluppatori frontend e backend e QA di lavorare contemporaneamente. Inoltre, clienti, designer, PM e altri lo apprezzano perché possono visualizzare l'anteprima della procedura di compilazione e utilizzare una guida di stile dinamica come riferimento dopo il lancio del sito web.
Tuttavia, quando esaminiamo pattern, componenti e sistemi di progettazione tenendo presente l'accessibilità, sorgono alcune domande. Come fai a sapere quali pattern sono i migliori in termini di accessibilità? Devi utilizzare un pattern o una libreria consolidati o crearne di nuovi? Come fai a sapere se questi pattern aiuteranno davvero i tuoi utenti?
Con la miriade di scelte disponibili, potresti avere difficoltà a distinguere pattern, componenti e sistemi di progettazione. Questo modulo ha lo scopo di fornirti informazioni generali su come valutare pattern, componenti e sistemi di progettazione per l'accessibilità e ti offre un punto di partenza per aiutarti a fare scelte più accessibili.
Pensare in modo critico
Scegliere un pattern, un componente o un sistema di progettazione accessibile non è un'impresa impossibile, ma richiede tempo e pensiero critico. Infatti, non esiste un "pattern perfetto", ma potrebbero esserci molte opzioni che potrebbero funzionare. Si tratta di imparare a scegliere l'opzione migliore per la tua situazione unica.
Nei moduli di test successivi, scoprirai di più sulle tecniche e sui metodi per valutare l'accessibilità di pattern, componenti e sistemi di progettazione. Prima di arrivare a questo punto, devi porti alcune domande fondamentali, ad esempio:
- Esiste già un pattern, un componente o un sistema di progettazione accessibile consolidato?
- Quali browser e tecnologie per la disabilità (AT) supporta?
- Esistono limitazioni di codice o framework? Esistono altre integrazioni, fattori o esigenze degli utenti da considerare?
A seconda dell'ambiente di sviluppo e delle esigenze degli utenti, potresti avere domande aggiuntive o diverse da queste. Considera queste domande come punto di partenza per la tua valutazione dell'accessibilità.
Risorse consolidate
Prima di creare qualcosa di nuovo, esegui la dovuta diligenza e rivedi ciò che già esiste in termini di pattern, componenti e sistemi di progettazione accessibili. Con un po' di ricerca, potresti trovare una o più soluzioni adatte alle tue esigenze.
Alcune ottime risorse per pattern, componenti e sistemi di progettazione accessibili includono:
- Componenti accessibili
- Libreria ARIA di Deque University
- Gov.UK Design System
- Componenti inclusivi
- MagentaA11y
- U.S. Web Design System (USWDS), creato per il governo federale degli Stati Uniti
- Elenco di pattern accessibili di Smashing Magazine
Per i framework JavaScript, le seguenti risorse sono abbastanza accessibili per impostazione predefinita o personalizzabili per l'accessibilità:
- Quando il CSS non è sufficiente: requisiti JavaScript per i componenti accessibili
- Reagisci
- Angular: libreria Material
- Vue: Vuetensils
Tuttavia, e non possiamo sottolinearlo abbastanza, non devi mai copiare/incollare il codice e presumere che si adatti al tuo ambiente e soddisfi automaticamente le esigenze degli utenti. Questo vale per tutti i pattern, i componenti e i sistemi di progettazione, anche se etichettati come completamente accessibili.
Tutte le risorse devono essere considerate un punto di partenza. Assicurati di testare tutto.
Supporto di browser e tecnologie per la disabilità
Dopo aver esaminato alcuni pattern di base, componenti o un sistema di progettazione completo che potrebbe funzionare per il tuo ambiente di sviluppo, puoi passare al supporto delle tecnologie per la disabilità. Un tipo importante di tecnologia assistiva su cui concentrarti quando valuti pattern, componenti e sistemi di progettazione sono gli screen reader.
Gli screen reader sono stati creati pensando a browser specifici e funzionano meglio se abbinati a questi browser. Approfondiremo questo argomento nel modulo sui test AT, ma ai fini della valutazione dei pattern, è utile comprendere l'esistenza di queste combinazioni, in modo da sapere di cosa hai bisogno in termini di supporto.
| Screen reader | Sistema operativo | Compatibilità del browser | Costo |
|---|---|---|---|
| Job Access with Speech (JAWS) | Windows | Chrome, Firefox, Edge | Licenza richiesta (esiste una versione senza costi di 40 minuti) |
| Non-Visual Desktop Access (NVDA) | Windows | Chrome e Firefox | Senza costi (richiede il download) |
| Narratore | Windows | Edge | Senza costi (integrato nei computer Windows) |
| VoiceOver | macOS | Safari | Senza costi (integrato nei computer macOS) |
| Orca | Linux | Firefox | Senza costi (integrato nelle distribuzioni basate su Gnome) |
| TalkBack | Android | Chrome e Firefox | Senza costi (integrato in alcune versioni del sistema operativo Android) |
| VoiceOver | iOS | Safari | Senza costi (integrato nei dispositivi iOS) |
Il supporto del browser è generalmente complicato e le cose si fanno ancora più difficili quando si aggiungono dispositivi AT e specifiche ARIA.
Ma non sono tutte cattive notizie. Fortunatamente, risorse utili come HTML5 Accessibility, Accessibility Support e la Custom Control Accessible Development Checklist di WCAG ci aiutano a comprendere meglio il supporto attuale di browser e dispositivi AT e persino quando utilizzare ARIA.
Queste risorse descrivono i diversi sottoelementi dei pattern HTML e ARIA disponibili, inclusi i test della community open source. Puoi anche esaminare alcuni esempi di pattern per browser desktop, mobile e dispositivi AT. Pertanto, queste risorse possono aiutarti a prendere una decisione più accessibile in merito a pattern, componenti e sistemi di progettazione che potresti voler utilizzare.
Altre considerazioni
Dopo aver scelto alcuni pattern o componenti di base accessibili e aver preso in considerazione il supporto del browser e del dispositivo AT, puoi passare a domande contestuali più specifiche sul pattern, sul componente, sul sistema di progettazione e sull'ambiente di sviluppo.
Ad esempio, se lavori in un sistema di gestione dei contenuti (CMS) o hai codice legacy, potrebbero esserci alcune limitazioni ai pattern che puoi utilizzare. Dopo la revisione, diverse scelte di pattern potrebbero essere ridotte rapidamente a una o due opzioni.
Molti framework JavaScript consentono agli sviluppatori di utilizzare quasi tutti i pattern che preferiscono. In questi casi, potresti avere meno limitazioni e scegliere l'opzione di pattern più accessibile.
Esistono ulteriori considerazioni da valutare quando si sceglie un pattern, un componente o un sistema di progettazione, ad esempio:
- Rendimento
- Sicurezza
- Ottimizzazione per i motori di ricerca
- Supporto per la traduzione linguistica
- Integrazioni di terze parti
Questi fattori influiranno senza dubbio sulla tua scelta del pattern, ma dovresti anche considerare le persone che creano i contenuti e il codice stesso. Il pattern che scegli deve essere abbastanza solido da gestire eventuali limitazioni relative ai contenuti generati dall'editor o dagli utenti e deve essere creato in modo che possa essere utilizzato da sviluppatori con qualsiasi livello di conoscenza dell'accessibilità.