18 KiB

Raw Permalink Blame History

Creare Pagine Web Accessibili

Sketchnote di Tomomi Imura

Quiz Pre-Lezione

La forza del Web sta nella sua universalità. L'accesso per tutti, indipendentemente dalla disabilità, è un aspetto essenziale.

- Sir Timothy Berners-Lee, Direttore del W3C e inventore del World Wide Web

Questa citazione evidenzia perfettamente l'importanza di creare siti web accessibili. Un'applicazione che non può essere utilizzata da tutti è, per definizione, esclusiva. Come sviluppatori web, dovremmo sempre tenere a mente l'accessibilità. Concentrandoci su questo aspetto fin dall'inizio, saremo sulla buona strada per garantire che tutti possano accedere alle pagine che creiamo. In questa lezione, imparerai a conoscere gli strumenti che possono aiutarti a garantire che i tuoi asset web siano accessibili e come costruire con l'accessibilità in mente.

Puoi seguire questa lezione su Microsoft Learn!

Strumenti da utilizzare

Uno degli strumenti di accessibilità più conosciuti sono i screen reader.

I screen reader sono comunemente utilizzati da persone con disabilità visive. Così come ci assicuriamo che un browser trasmetta correttamente le informazioni che vogliamo condividere, dobbiamo anche garantire che un screen reader faccia lo stesso.

Nel modo più semplice, un screen reader leggerà una pagina dall'alto verso il basso in modo udibile. Se la tua pagina è composta solo da testo, il lettore trasmetterà le informazioni in modo simile a un browser. Ovviamente, le pagine web raramente sono solo testo; contengono link, immagini, colori e altri componenti visivi. Bisogna prestare attenzione affinché queste informazioni vengano lette correttamente da un screen reader.

Ogni sviluppatore web dovrebbe familiarizzare con un screen reader. Come evidenziato sopra, è il client che i tuoi utenti utilizzeranno. Allo stesso modo in cui conosci il funzionamento di un browser, dovresti imparare come funziona un screen reader. Fortunatamente, i screen reader sono integrati nella maggior parte dei sistemi operativi.

Alcuni browser hanno anche strumenti integrati ed estensioni che possono leggere il testo ad alta voce o fornire alcune funzionalità di navigazione di base, come questi strumenti di accessibilità del browser Edge. Questi sono strumenti di accessibilità importanti, ma funzionano in modo molto diverso dai screen reader e non dovrebbero essere confusi con strumenti di test per screen reader.

✅ Prova un screen reader e un lettore di testo del browser. Su Windows, Narrator è incluso di default, e JAWS e NVDA possono essere installati. Su macOS e iOS, VoiceOver è installato di default.

Zoom

Un altro strumento comunemente utilizzato da persone con disabilità visive è lo zoom. Il tipo più semplice di zoom è lo zoom statico, controllato tramite Control + segno più (+) o riducendo la risoluzione dello schermo. Questo tipo di zoom ridimensiona l'intera pagina, quindi utilizzare il design responsivo è importante per offrire una buona esperienza utente a livelli di zoom aumentati.

Un altro tipo di zoom si basa su software specializzati per ingrandire un'area dello schermo e spostarsi, un po' come usare una lente d'ingrandimento reale. Su Windows, Magnifier è integrato, e ZoomText è un software di ingrandimento di terze parti con più funzionalità e una base di utenti più ampia. Sia macOS che iOS hanno un software di ingrandimento integrato chiamato Zoom.

Controllo del contrasto

I colori sui siti web devono essere scelti con attenzione per rispondere alle esigenze degli utenti daltonici o di coloro che hanno difficoltà a vedere colori a basso contrasto.

✅ Testa un sito web che ti piace per l'uso dei colori con un'estensione del browser come il controllo del contrasto di WCAG. Cosa scopri?

Lighthouse

Nell'area degli strumenti per sviluppatori del tuo browser, troverai lo strumento Lighthouse. Questo strumento è importante per ottenere una prima analisi dell'accessibilità (oltre ad altre analisi) di un sito web. Sebbene sia importante non fare affidamento esclusivamente su Lighthouse, un punteggio del 100% è molto utile come punto di partenza.

✅ Trova Lighthouse nel pannello degli strumenti per sviluppatori del tuo browser ed esegui un'analisi su qualsiasi sito. Cosa scopri?

Progettare per l'accessibilità

L'accessibilità è un argomento relativamente ampio. Per aiutarti, ci sono numerose risorse disponibili.

Accessible U - University of Minnesota

Sebbene non saremo in grado di coprire ogni aspetto della creazione di siti accessibili, di seguito sono riportati alcuni dei principi fondamentali che vorrai implementare. Progettare una pagina accessibile fin dall'inizio è sempre più facile che tornare su una pagina esistente per renderla accessibile.

Buoni principi di visualizzazione

Palette di colori sicure

Le persone vedono il mondo in modi diversi, e questo include i colori. Quando selezioni uno schema di colori per il tuo sito, dovresti assicurarti che sia accessibile a tutti. Un ottimo strumento per generare palette di colori è Color Safe.

✅ Identifica un sito web che presenta molti problemi nell'uso dei colori. Perché?

Usa l'HTML corretto

Con CSS e JavaScript è possibile far sembrare qualsiasi elemento un qualsiasi tipo di controllo. <span> potrebbe essere usato per creare un <button>, e <b> potrebbe diventare un collegamento ipertestuale. Sebbene questo possa essere considerato più facile da stilizzare, non trasmette nulla a un screen reader. Usa l'HTML appropriato quando crei controlli su una pagina. Se vuoi un collegamento ipertestuale, usa <a>. Usare l'HTML corretto per il controllo corretto si chiama fare uso di HTML semantico.

✅ Vai su qualsiasi sito web e verifica se i designer e gli sviluppatori stanno usando correttamente l'HTML. Riesci a trovare un pulsante che dovrebbe essere un link? Suggerimento: fai clic con il tasto destro e scegli "Visualizza sorgente pagina" nel tuo browser per guardare il codice sottostante.

Crea una gerarchia di intestazioni descrittiva

Gli utenti di screen reader fanno molto affidamento sulle intestazioni per trovare informazioni e navigare attraverso una pagina. Scrivere contenuti descrittivi per le intestazioni e utilizzare tag semantici per le intestazioni è importante per creare un sito facilmente navigabile per gli utenti di screen reader.

Usa buoni indizi visivi

CSS offre un controllo completo sull'aspetto di qualsiasi elemento su una pagina. Puoi creare caselle di testo senza contorno o collegamenti ipertestuali senza sottolineatura. Sfortunatamente, rimuovere questi indizi può rendere più difficile per qualcuno che dipende da essi riconoscere il tipo di controllo.

L'importanza del testo dei link

I collegamenti ipertestuali sono fondamentali per navigare sul web. Di conseguenza, garantire che un screen reader possa leggere correttamente i link consente a tutti gli utenti di navigare nel tuo sito.

Come ci si aspetterebbe, i screen reader leggono il testo dei link nello stesso modo in cui leggerebbero qualsiasi altro testo sulla pagina. Con questo in mente, il testo dimostrato di seguito potrebbe sembrare perfettamente accettabile.

Il pinguino minore, talvolta noto come pinguino delle fate, è il pinguino più piccolo del mondo. Clicca qui per maggiori informazioni.

Il pinguino minore, talvolta noto come pinguino delle fate, è il pinguino più piccolo del mondo. Visita https://en.wikipedia.org/wiki/Little_penguin per maggiori informazioni.

NOTA Come stai per leggere, non dovresti mai creare link che assomigliano a quelli sopra.

Ricorda, i screen reader sono un'interfaccia diversa dai browser con un diverso set di funzionalità.

Il problema con l'uso dell'URL

I screen reader leggono il testo. Se un URL appare nel testo, il screen reader leggerà l'URL. Generalmente parlando, l'URL non trasmette informazioni significative e può risultare fastidioso. Potresti aver sperimentato questo se il tuo telefono ha mai letto ad alta voce un messaggio di testo con un URL.

Il problema con "clicca qui"

I screen reader hanno anche la capacità di leggere solo i collegamenti ipertestuali su una pagina, un po' come una persona vedente scansionerebbe una pagina alla ricerca di link. Se il testo del link è sempre "clicca qui", tutto ciò che l'utente sentirà sarà "clicca qui, clicca qui, clicca qui, clicca qui, clicca qui, ..." Tutti i link ora sono indistinguibili l'uno dall'altro.

Buon testo per i link

Un buon testo per i link descrive brevemente cosa si trova dall'altra parte del link. Nell'esempio sopra che parla del pinguino minore, il link è alla pagina di Wikipedia sulla specie. La frase pinguino minore sarebbe un testo perfetto per il link poiché chiarisce cosa si imparerà cliccando sul link - il pinguino minore.

Il pinguino minore, talvolta noto come pinguino delle fate, è il pinguino più piccolo del mondo.

✅ Naviga sul web per qualche minuto per trovare pagine che utilizzano strategie di collegamento poco chiare. Confrontale con altri siti che utilizzano link migliori. Cosa impari?

Note sui motori di ricerca

Come vantaggio aggiuntivo per garantire che il tuo sito sia accessibile a tutti, aiuterai anche i motori di ricerca a navigare nel tuo sito. I motori di ricerca utilizzano il testo dei link per apprendere gli argomenti delle pagine. Quindi usare un buon testo per i link aiuta tutti!

ARIA

Immagina la seguente pagina:

Prodotto	Descrizione	Ordina
Widget	Descrizione	Ordina
Super widget	Descrizione	Ordina

In questo esempio, duplicare il testo di descrizione e ordina ha senso per qualcuno che utilizza un browser. Tuttavia, qualcuno che utilizza un screen reader sentirebbe solo le parole descrizione e ordina ripetute senza contesto.

Per supportare questi tipi di scenari, l'HTML supporta un set di attributi noti come Accessible Rich Internet Applications (ARIA). Questi attributi ti consentono di fornire informazioni aggiuntive ai screen reader.

NOTA: Come molti aspetti dell'HTML, il supporto da parte dei browser e dei screen reader può variare. Tuttavia, la maggior parte dei client principali supporta gli attributi ARIA.

Puoi utilizzare aria-label per descrivere il link quando il formato della pagina non lo consente. La descrizione per il widget potrebbe essere impostata come

<a href="#" aria-label="Widget description">description</a>

✅ In generale, utilizzare il markup semantico come descritto sopra supera l'uso di ARIA, ma a volte non esiste un equivalente semantico per vari widget HTML. Un buon esempio è un albero. Non esiste un equivalente HTML per un albero, quindi identifichi il generico <div> per questo elemento con un ruolo e valori ARIA appropriati. La documentazione MDN su ARIA contiene ulteriori informazioni utili.

<h2 id="tree-label">File Viewer</h2>
<div role="tree" aria-labelledby="tree-label">
  <div role="treeitem" aria-expanded="false" tabindex="0">Uploads</div>
</div>

Immagini

È ovvio che i screen reader non sono in grado di leggere automaticamente ciò che c'è in un'immagine. Garantire che le immagini siano accessibili non richiede molto lavoro - è proprio per questo che esiste l'attributo alt. Tutte le immagini significative dovrebbero avere un alt per descrivere cosa sono.
Le immagini puramente decorative dovrebbero avere il loro attributo alt impostato su una stringa vuota: alt="". Questo impedisce ai screen reader di annunciare inutilmente l'immagine decorativa.

✅ Come ci si potrebbe aspettare, anche i motori di ricerca non sono in grado di capire cosa c'è in un'immagine. Anche loro utilizzano il testo alternativo. Quindi, ancora una volta, garantire che la tua pagina sia accessibile offre vantaggi aggiuntivi!

La tastiera

Alcuni utenti non sono in grado di utilizzare un mouse o un trackpad, affidandosi invece alle interazioni tramite tastiera per spostarsi da un elemento all'altro. È importante che il tuo sito web presenti i tuoi contenuti in un ordine logico in modo che un utente della tastiera possa accedere a ogni elemento interattivo mentre scorre il documento. Se costruisci le tue pagine web con markup semantico e utilizzi CSS per stilizzare il loro layout visivo, il tuo sito dovrebbe essere navigabile tramite tastiera, ma è importante testare manualmente questo aspetto. Scopri di più sulle strategie di navigazione tramite tastiera.

✅ Vai su qualsiasi sito web e prova a navigare utilizzando solo la tastiera. Cosa funziona, cosa non funziona? Perché?

Riepilogo

Un web accessibile solo ad alcuni non è un vero "world-wide web". Il modo migliore per garantire che i siti che crei siano accessibili è incorporare le migliori pratiche di accessibilità fin dall'inizio. Sebbene ci siano passaggi extra da seguire, incorporare queste competenze nel tuo flusso di lavoro ora significherà che tutte le pagine che crei saranno accessibili.

🚀 Sfida

Prendi questo HTML e riscrivilo per renderlo il più accessibile possibile, utilizzando le strategie che hai imparato.

<!DOCTYPE html>
<html>
  <head>
    <title>
      Example
    </title>
    <link href='../assets/style.css' rel='stylesheet' type='text/css'>
  </head>
  <body>
    <div class="site-header">
      <p class="site-title">Turtle Ipsum</p>
      <p class="site-subtitle">The World's Premier Turtle Fan Club</p>
    </div>
    <div class="main-nav">
      <p class="nav-header">Resources</p>
      <div class="nav-list">
        <p class="nav-item nav-item-bull"><a href="https://www.youtube.com/watch?v=CMNry4PE93Y">"I like turtles"</a></p>
        <p class="nav-item nav-item-bull"><a href="https://en.wikipedia.org/wiki/Turtle">Basic Turtle Info</a></p>
        <p class="nav-item nav-item-bull"><a href="https://en.wikipedia.org/wiki/Turtles_(chocolate)">Chocolate Turtles</a></p>
      </div>
    </div>
    <div class="main-content">
      <div>
        <p class="page-title">Welcome to Turtle Ipsum. 
            <a href="">Click here</a> to learn more.
        </p>
        <p class="article-text">
          Turtle ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum
        </p>
      </div>
    </div>
    <div class="footer">
      <div class="footer-section">
        <span class="button">Sign up for turtle news</span>
      </div><div class="footer-section">
        <p class="nav-header footer-title">
          Internal Pages
        </p>
        <div class="nav-list">
          <p class="nav-item nav-item-bull"><a href="../">Index</a></p>
          <p class="nav-item nav-item-bull"><a href="../semantic">Semantic Example</a></p>
        </div>
      </div>
      <p class="footer-copyright">&copy; 2016 Instrument</p>
    </div>
  </body>
</html>

Quiz Post-Lezione

Quiz post-lezione

Revisione e Studio Autonomo

Molti governi hanno leggi riguardanti i requisiti di accessibilità. Informati sulle leggi di accessibilità del tuo paese. Cosa è coperto e cosa no? Un esempio è questo sito web governativo.

Compito

Analizza un sito web non accessibile

Crediti: Turtle Ipsum di Instrument

Disclaimer:
Questo documento è stato tradotto utilizzando il servizio di traduzione automatica Co-op Translator. Sebbene ci impegniamo per garantire l'accuratezza, si prega di notare che le traduzioni automatiche potrebbero contenere errori o imprecisioni. Il documento originale nella sua lingua nativa dovrebbe essere considerato la fonte autorevole. Per informazioni critiche, si raccomanda una traduzione professionale eseguita da un traduttore umano. Non siamo responsabili per eventuali fraintendimenti o interpretazioni errate derivanti dall'uso di questa traduzione.

18 KiB Raw Permalink Blame History