Accessibilità ​

L'accessibilità web (conosciuta anche come a11y) si riferisce alla pratica di creare siti web che possono essere utilizzati da chiunque: persone con disabilità, connessioni lente, hardware obsoleto o danneggiato o semplicemente persone in ambienti sfavorevoli. Ad esempio, aggiungere sottotitoli a un video aiuta sia gli utenti sordi che quelli con problemi di udito, sia gli utenti in ambienti rumorosi che non possono sentire il loro telefono. Allo stesso modo, assicurarsi che il testo non abbia un contrasto troppo basso aiuta sia gli utenti con bassa visione che gli utenti che cercano di utilizzare il loro telefono alla luce del sole.

Pronto a iniziare ma non sei sicuro da dove cominciare?

Consulta la Guida alla pianificazione e gestione dell'accessibilità web fornita dal World Wide Web Consortium (W3C)

Skip link ​

Dovresti aggiungere un link nella parte superiore di ogni pagina che vada direttamente all'area principale del contenuto in modo che gli utenti possano saltare il contenuto che si ripete su più pagine web.

Di solito questo viene fatto nella parte superiore di App.vue, poiché sarà il primo elemento selezionabile su tutte le tue pagine:

<ul class="skip-links">
  <li>
    <a href="#main" ref="skipLink" class="skip-link">Vai al contenuto principale</a>
  </li>
</ul>

Per nascondere il link a meno che non sia focalizzato, puoi aggiungere lo stile seguente:

.skip-link {
  white-space: nowrap;
  margin: 1em auto;
  top: 0;
  position: fixed;
  left: 50%;
  margin-left: -72px;
  opacity: 0;
}
.skip-link:focus {
  opacity: 1;
  background-color: white;
  padding: 0.5em;
  border: 1px solid black;
}

Una volta che un utente cambia percorso, riporta il focus al link di salto. Puoi farlo chiamando il focus sul riferimento del template del link di salto (ipotizzando l'uso di 'vue-router'):

<script>
export default {
  watch: {
    $route() {
      this.$refs.skipLink.focus()
    }
  }
}
</script>

<script setup>
import { ref, watch } from 'vue'
import { useRoute } from 'vue-router'

const route = useRoute()
const skipLink = ref()

watch(
  () => route.path,
  () => {
    skipLink.value.focus()
  }
)
</script>

Leggi la documentazione sul link di salto al contenuto principale

Struttura del contenuto ​

Uno dei fattori più importanti dell'accessibilità è assicurarsi che il design possa supportare un'implementazione accessibile. Il design dovrebbe considerare non solo il contrasto dei colori, la scelta del font, le dimensioni del testo e la lingua, ma anche come il contenuto è strutturato nell'applicazione.

Headings ​

Gli utenti possono navigare in un'applicazione attraverso le intestazioni. Avere intestazioni descrittive per ogni sezione della tua applicazione rende più facile per gli utenti prevedere il contenuto di ogni sezione. Per quanto riguarda le intestazioni, ci sono un paio di pratiche consigliate per l'accessibilità:

• Annida le intestazioni secondo il loro ordine gerarchico: <h1> - <h6>
• Non saltare le intestazioni all'interno di una sezione
• Usa tag di intestazione effettivi invece di stilizzare il testo per dare l'aspetto visivo delle intestazioni

Leggi di più sulle intestazioni

<main role="main" aria-labelledby="main-title">
  <h1 id="main-title">Main title</h1>
  <section aria-labelledby="section-title-1">
    <h2 id="section-title-1"> Section Title </h2>
    <h3>Section Subtitle</h3>
    <!-- Content -->
  </section>
  <section aria-labelledby="section-title-2">
    <h2 id="section-title-2"> Section Title </h2>
    <h3>Section Subtitle</h3>
    <!-- Content -->
    <h3>Section Subtitle</h3>
    <!-- Content -->
  </section>
</main>

Punti di riferimento ​

I Punti di riferimento forniscono accesso programmabile alle sezioni all'interno di un'applicazione. Gli utenti che si affidano a tecnologie assistive possono navigare in ogni sezione dell'applicazione e saltare il contenuto. Puoi utilizzare ARIA roles to help you achieve this.

Leggi di più sui landmark

Moduli Semantici ​

Nella creazione di un modulo, è possibile utilizzare gli elementi seguenti: <form>, <label>, <input>, <textarea>, e <button>

Di solito, le etichette vengono posizionate sopra o a sinistra dei campi del modulo:

<form action="/dataCollectionLocation" method="post" autocomplete="on">
  <div v-for="item in formItems" :key="item.id" class="form-item">
    <label :for="item.id">{{ item.label }}: </label>
    <input
      :type="item.type"
      :id="item.id"
      :name="item.id"
      v-model="item.value"
    />
  </div>
  <button type="submit">Submit</button>
</form>

Nota come è possibile includere autocomplete='on' sull'elemento del modulo e si applicherà a tutti gli input nel tuo modulo. Puoi anche impostare valori diversi per l'attributo di autocomplete per ogni input.

Label ​

Fornire etichette per descrivere lo scopo di tutti i controlli del modulo; collegare for e id:

<label for="name">Name</label>
<input type="text" name="name" id="name" v-model="name" />

Se ispezioni questo elemento nei Chrome Developer Tools e apri la scheda Accessibilità all'interno della scheda Elementi, vedrai come l'input ottiene il suo nome dall'etichetta:

<label>
  Name:
  <input type="text" name="name" id="name" v-model="name" />
</label>

aria-label ​

È possibile dare all'input un nome accessibile con aria-label.

<label for="name">Name</label>
<input
  type="text"
  name="name"
  id="name"
  v-model="name"
  :aria-label="nameLabel"
/>

Sentiti libero di ispezionare questo elemento in Chrome DevTools per vedere come il nome accessibile è cambiato:

aria-labelledby ​

L'utilizzo di aria-labelledby è simile a aria-label ranne che viene utilizzato se il testo dell'etichetta è visibile sullo schermo. È abbinato ad altri elementi dai loro id e puoi collegare più id:

<form
  class="demo"
  action="/dataCollectionLocation"
  method="post"
  autocomplete="on"
>
  <h1 id="billing">Billing</h1>
  <div class="form-item">
    <label for="name">Name:</label>
    <input
      type="text"
      name="name"
      id="name"
      v-model="name"
      aria-labelledby="billing name"
    />
  </div>
  <button type="submit">Submit</button>
</form>

aria-describedby ​

aria-describedby è utilizzato allo stesso modo di aria-labelledby tranne che fornisce una descrizione con informazioni aggiuntive che l'utente potrebbe aver bisogno. Questo può essere utilizzato per descrivere i criteri per qualsiasi input:

<form
  class="demo"
  action="/dataCollectionLocation"
  method="post"
  autocomplete="on"
>
  <h1 id="billing">Billing</h1>
  <div class="form-item">
    <label for="name">Full Name:</label>
    <input
      type="text"
      name="name"
      id="name"
      v-model="name"
      aria-labelledby="billing name"
      aria-describedby="nameDescription"
    />
    <p id="nameDescription">Please provide first and last name.</p>
  </div>
  <button type="submit">Submit</button>
</form>

Puoi vedere la descrizione ispezionando Chrome DevTools:

Placeholder ​

Evita di utilizzare i placeholder poiché possono confondere molti utenti.

Uno dei problemi con i placeholder è che di default non soddisfano i criteri di contrasto dei colori; correggendo il contrasto dei colori, il segnaposto sembra essere dati preimpostati nei campi di input. Guardando l'esempio seguente, puoi vedere che il segnaposto "Cognome" che soddisfa i criteri di contrasto dei colori sembra essere dati preimpostati:

<form
  class="demo"
  action="/dataCollectionLocation"
  method="post"
  autocomplete="on"
>
  <div v-for="item in formItems" :key="item.id" class="form-item">
    <label :for="item.id">{{ item.label }}: </label>
    <input
      type="text"
      :id="item.id"
      :name="item.id"
      v-model="item.value"
      :placeholder="item.placeholder"
    />
  </div>
  <button type="submit">Submit</button>
</form>

/* https://www.w3schools.com/howto/howto_css_placeholder.asp */

#lastName::placeholder {
  /* Chrome, Firefox, Opera, Safari 10.1+ */
  color: black;
  opacity: 1; /* Firefox */
}

#lastName:-ms-input-placeholder {
  /* Internet Explorer 10-11 */
  color: black;
}

#lastName::-ms-input-placeholder {
  /* Microsoft Edge */
  color: black;
}

È meglio fornire tutte le informazioni necessarie per riempire i moduli al di fuori di eventuali input.

Istruzioni ​

Quando si aggiungono istruzioni per i campi di input, assicurarsi di collegarle correttamente all'input. È possibile fornire istruzioni aggiuntive e collegare più id all'interno di un aria-labelledby. Questo consente un design più flessibile.

<fieldset>
  <legend>Using aria-labelledby</legend>
  <label id="date-label" for="date">Current Date:</label>
  <input
    type="date"
    name="date"
    id="date"
    aria-labelledby="date-label date-instructions"
  />
  <p id="date-instructions">MM/DD/YYYY</p>
</fieldset>

In alternativa, è possibile allegare le istruzioni all'input con aria-describedby:

<fieldset>
  <legend>Using aria-describedby</legend>
  <label id="dob" for="dob">Date of Birth:</label>
  <input type="date" name="dob" id="dob" aria-describedby="dob-instructions" />
  <p id="dob-instructions">MM/DD/YYYY</p>
</fieldset>

Contenuti nascosti ​

Di solito non è consigliabile nascondere visualmente le etichette, anche se l'input ha un nome accessibile. Tuttavia, se la funzionalità dell'input può essere compresa con il contenuto circostante, è possibile nascondere l'etichetta visiva.

Guardiamo questo campo di ricerca:

<form role="search">
  <label for="search" class="hidden-visually">Search: </label>
  <input type="text" name="search" id="search" v-model="search" />
  <button type="submit">Search</button>
</form>

Possiamo farlo perché il pulsante di ricerca aiuterà gli utenti a identificare lo scopo del campo di input.

Possiamo utilizzare CSS per nascondere visualmente gli elementi ma mantenerli disponibili per la tecnologia assistiva:

.hidden-visually {
  position: absolute;
  overflow: hidden;
  white-space: nowrap;
  margin: 0;
  padding: 0;
  height: 1px;
  width: 1px;
  clip: rect(0 0 0 0);
  clip-path: inset(100%);
}

aria-hidden="true" ​

L'aggiunta di aria-hidden="true" nasconderà l'elemento dalla tecnologia assistiva ma lo lascerà visibile per gli altri utenti. Non utilizzarlo su elementi focalizzabili, solo su contenuti decorativi, duplicati o fuori schermo.

<p>This is not hidden from screen readers.</p>
<p aria-hidden="true">This is hidden from screen readers.</p>

Bottoni ​

Quando si utilizzano pulsanti all'interno di un modulo, è necessario impostare il tipo per impedire l'invio del modulo. È anche possibile utilizzare un input per creare pulsanti:

<form action="/dataCollectionLocation" method="post" autocomplete="on">
  <!-- Buttons -->
  <button type="button">Cancel</button>
  <button type="submit">Submit</button>

  <!-- Input buttons -->
  <input type="button" value="Cancel" />
  <input type="submit" value="Submit" />
</form>

Immagini funzionali ​

È possibile utilizzare questa tecnica per creare immagini funzionali.

• Campi di input

• Queste immagini fungeranno da pulsante di invio nei moduli

<form role="search">
  <label for="search" class="hidden-visually">Search: </label>
  <input type="text" name="search" id="search" v-model="search" />
  <input
    type="image"
    class="btnImg"
    src="https://img.icons8.com/search"
    alt="Search"
  />
</form>

• Icone

<form role="search">
  <label for="searchIcon" class="hidden-visually">Search: </label>
  <input type="text" name="searchIcon" id="searchIcon" v-model="searchIcon" />
  <button type="submit">
    <i class="fas fa-search" aria-hidden="true"></i>
    <span class="hidden-visually">Search</span>
  </button>
</form>

Standards ​

Il World Wide Web Consortium (W3C) Web Accessibility Initiative (WAI) sviluppa gli standard di accessibilità Web per i diversi componenti:

• User Agent Accessibility Guidelines (UAAG)
  • browser web e lettori multimediali, compresi alcuni aspetti delle tecnologie assistive
• Authoring Tool Accessibility Guidelines (ATAG)
  • strumenti di autore per lo sviluppo di contenuti web
• Web Content Accessibility Guidelines (WCAG)
  • contenuto web - utilizzato da sviluppatori, strumenti di autore e strumenti di valutazione dell'accessibilità

Web Content Accessibility Guidelines (WCAG) ​

WCAG 2.1 estende WCAG 2.0 e consente l'implementazione di nuove tecnologie affrontando i cambiamenti nel web. Il W3C incoraggia l'uso della versione più recente di WCAG durante lo sviluppo o l'aggiornamento delle politiche di accessibilità Web.

Quattro Principi Guida Principali di WCAG 2.1 (abbreviati come POUR): ​

• Percepibile
  • Gli utenti devono essere in grado di percepire le informazioni presentate.
• Operabile
  • Le forme dell'interfaccia, i controlli e la navigazione devono essere operabili.
• Comprensibile
  • Le informazioni e il funzionamento dell'interfaccia utente devono essere comprensibili per tutti gli utenti.
• Robusto
  • Gli utenti devono essere in grado di accedere al contenuto mentre le tecnologie avanzano.

Web Accessibility Initiative – Accessible Rich Internet Applications (WAI-ARIA): ​

Il WAI-ARIA del W3C fornisce indicazioni su come costruire contenuti dinamici e controlli avanzati dell'interfaccia utente.

• Accessible Rich Internet Applications (WAI-ARIA) 1.2
• WAI-ARIA Authoring Practices 1.2

Risorse: ​

Documentazione: ​

• WCAG 2.0
• WCAG 2.1
• Accessible Rich Internet Applications (WAI-ARIA) 1.2
• WAI-ARIA Authoring Practices 1.2

Tecnologie Assistive: ​

• Lettori di Schermo
  • NVDA
  • VoiceOver
  • JAWS
  • ChromeVox
• Strumenti di Ingrandimento
  • MAGic
  • ZoomText
  • Magnifier

Test: ​

• Strumenti Automatizzati
  • Lighthouse
  • WAVE
  • ARC Toolkit
• Strumenti per il Contrasto dei Colori
  • WebAim Color Contrast
  • WebAim Link Color Contrast
• Altri Strumenti Utili
  • HeadingMap
  • Color Oracle
  • Focus Indicator
  • NerdeFocus
  • Visual Aria
  • Simulatore di Accessibilità del Sito Web Silktide

Utenti: ​

L'Organizzazione Mondiale della Sanità stima che il 15% della popolazione mondiale abbia una qualche forma di disabilità, di cui il 2-4% in modo grave. Questo corrisponde a circa 1 miliardo di persone in tutto il mondo, rendendo le persone con disabilità il più grande gruppo di minoranza al mondo.

Esistono una vasta gamma di disabilità, che possono essere divise approssimativamente in quattro categorie:

• Visive: questi utenti possono beneficiare dell'uso di lettori di schermo, ingrandimento dello schermo, controllo del contrasto dello schermo o display in braille.
• Uditiva: questi utenti possono beneficiare di sottotitoli, trascrizioni o video in lingua dei segni.
• Motorie: questi utenti possono beneficiare di una serie di tecnologie assistive per le disabilità motorie: software di riconoscimento vocale, tracciamento degli occhi, accesso a un solo pulsante, wand per la testa, interruttore sip e puff, mouse trackball oversize, tastiera adattiva o altre tecnologie assistive.
• Cognitive: questi utenti possono beneficiare di supporti multimediali supplementari, organizzazione strutturale del contenuto, scrittura chiara e semplice.

Controlla i seguenti link di WebAim per comprendere meglio le esigenze degli utenti:

• Prospettive sull'Accessibilità Web: Esplora l'Impatto e i Benefici per Tutti
• Storie degli Utenti Web