Come creare un menu accessibile per un sito web

In pochi passi ti spiego cos’è e come creare un menu accessibile per il tuo sito web. Avere un menu accessibile è importantissimo per gli utenti che decidono di navigare il tuo sito e non hanno la possibilità di usare mouse e/o tastiera.

Cos’è un menu accessibile

Un menu accessibile per un sito web è un menu progettato per essere utilizzato facilmente da utenti con disabilità, come quelli che utilizzano una tastiera invece di un mouse o un lettore di schermo per navigare il sito. Ciò può includere la possibilità di navigare il menu utilizzando i tasti freccia, l’utilizzo di etichette descrittive per gli elementi del menu e la possibilità di passare facilmente dal menu alla pagina principale del sito. In generale, il design di un menu accessibile dovrebbe essere semplice e intuitivo per tutti gli utenti.

Crea un menu accessibile utilizzando le migliori tecniche di accessibilità

Per creare un menu accessibile per un sito web, è importante seguire alcune pratiche di accessibilità standard:

1. Utilizzare l’attributo 'role' con valore 'menu' per indicare che un elemento è un menu.
2. Utilizzare l’attributo 'aria-label' o 'aria-labelledby' per fornire un’etichetta descrittiva del menu.
3. Utilizzare gli elementi <li> per creare gli elementi del menu e gli elementi <a> per creare i link all’interno del menu.
4. Utilizzare l’attributo 'tabindex' con valore '0' per rendere gli elementi del menu selezionabili con il tasto tab.
5. Utilizzare l’attributo aria-current per indicare quale elemento del menu è attualmente selezionato.
6. Utilizzare l’attributo aria-haspopup per indicare che un elemento del menu ha sottomenu.
7. Utilizzare un segnale visivo, come il cambio di colore, per indicare l’elemento corrente del menu.
8. Utilizzare tasti di scelta rapida (ad esempio, accesskey) per navigare tra gli elementi del menu.

Ecco un esempio di un menu di navigazione semplice utilizzando queste pratiche:

<nav role="navigation">
  <h2 id="main-menu-label">Main Menu</h2>
  <ul role="menu" aria-labelledby="main-menu-label">
    <li><a href="#home" tabindex="0" aria-current="page">Home</a></li>
    <li><a href="#about" tabindex="0">About</a></li>
    <li><a href="#services" tabindex="0">Services</a>
      <ul role="menu" aria-haspopup="true">
        <li><a href="#consulting" tabindex="0">Consulting</a></li>
        <li><a href="#training" tabindex="0">Training</a></li>
      </ul>
    </li>
    <li><a href="#contact" tabindex="0">Contact</a></li>
  </ul>
</nav>

Tenere a mente che questo è solo un esempio di base, in un sito vero potrebbero esserci molte variabili differenti, quindi per testare l’accessibilità è sempre meglio utilizzare strumenti di testing automatico o manuale.

Ecco un secondo esempio di un menu di navigazione semplice ed accessibile:

<nav role="navigation">
  <h2 id="main-menu-label">Main Menu</h2>
  <ul role="menu" aria-labelledby="main-menu-label">
    <li><a href="#home" tabindex="0" aria-current="page" accesskey="h">Home</a></li>
    <li><a href="#about" tabindex="0" accesskey="a">About</a></li>
    <li><a href="#services" tabindex="0" accesskey="s">Services</a>
      <ul role="menu" aria-haspopup="true">
        <li><a href="#consulting" tabindex="0" accesskey="c">Consulting</a></li>
        <li><a href="#training" tabindex="0" accesskey="t">Training</a></li>
      </ul>
    </li>
    <li><a href="#contact" tabindex="0" accesskey="k">Contact</a></li>
  </ul>
</nav>

In questo esempio, abbiamo utilizzato l’attributo accesskey per facilitare l’accesso diretto agli elementi del menù. Inoltre, abbiamo utilizzato l’attributo aria-current per indicare l’elemento corrente, in questo caso “Home”. E’ importante testare sempre l’accessibilità del menù utilizzando tool automatici o test manuali, e verificare che gli elementi del menù siano navigabili e descrivibili correttamente per gli utenti con disabilità, in particolare per coloro che utilizzano un lettore di schermo.

L’attributo aria-current

L’attributo aria-current è utilizzato per indicare quale elemento del menu è attualmente selezionato o visualizzato dall’utente. Ci sono diverse modalità di utilizzo di questo attributo a seconda delle esigenze del sito.

Una modalità comune consiste nell’utilizzare l’attributo aria-current su un singolo elemento del menu alla volta, e impostarlo su “page” per l’elemento corrispondente alla pagina attualmente visualizzata dall’utente. Ad esempio:

<nav role="navigation">
  <h2 id="main-menu-label">Main Menu</h2>
  <ul role="menu" aria-labelledby="main-menu-label">
    <li><a href="#home" tabindex="0" aria-current="page">Home</a></li>
    <li><a href="#about" tabindex="0">About</a></li>
    <li><a href="#services" tabindex="0">Services</a>
    <li><a href="#contact" tabindex="0">Contact</a></li>
  </ul>
</nav>

In questo esempio, l’elemento di menu “Home” ha l’attributo aria-current impostato su “page”, indicando che si trova sulla pagina Home.

Otra modalità consiste in utilizzare l’attributo aria-current per indicare la posizione corrente in una serie di elementi, ad esempio in una lista di risultati di ricerca o in una navigazione di tipo paginazione. In questo caso, l’attributo può essere utilizzato per indicare la pagina corrente nella navigazione della pagina e il range di elementi mostrati, ad esempio:

<nav role="navigation" aria-label="Pagination">
    <span aria-current="page" tabindex="0">1</span>
    <a href="#2" tabindex="0">2</a>
    <a href="#3" tabindex="0">3</a>
</nav>

In questo esempio l’attributo aria-current è stato utilizzato per indicare che l’elemento “1” rappresenta la pagina corrente della navigazione

Nota che in entrambi gli esempi aria-current è stato utilizzato solo su un solo elemento alla volta, non su più elementi nello stesso momento. Inoltre, è buona pratica assicurarsi di rimuovere o modificare l’attributo aria-current su un elemento del menu non più attuale.

In generale, per rendere l’esperienza utente più fluida, è importante mantenere sempre aggiornato l’attributo aria-current in relazione alla pagina attualmente visualizzata dall’utente.

Come aggiorno in maniera automatica l’attributo aria-current ?

Ci sono diverse modalità per aggiornare in automatico l’attributo aria-current in relazione alla pagina attualmente visualizzata dall’utente. Una modalità comune consiste nell’utilizzare JavaScript per assegnare dinamicamente l’attributo aria-current all’elemento del menu corrispondente alla pagina attualmente visualizzata.

Ad esempio, si può utilizzare una funzione JavaScript per analizzare l’URL della pagina attuale e confrontarlo con gli URL degli elementi del menu, in modo da individuare l’elemento corrispondente e assegnare l’attributo aria-current="page" a tale elemento.

function updateAriaCurrent() {
  // Get the current URL
  var currentURL = window.location.href;
  
  // Get all of the menu items
  var menuItems = document.querySelectorAll("#main-menu a");

  // Remove aria-current from all menu items
  for (var i = 0; i < menuItems.length; i++) {
    menuItems[i].removeAttribute("aria-current");
  }
  
  // Loop through all of the menu items
  for (var i = 0; i < menuItems.length; i++) {
    // If the menu item's URL matches the current URL, set aria-current
    if (menuItems[i].href === currentURL) {
      menuItems[i].setAttribute("aria-current", "page");
      break;
    }
  }
}

Si può chiamare questa funzione all’evento “onload” o “onready” per inizializzare l’attributo aria-current alla pagina iniziale, e si può chiamare anche all’evento “onhashchange” per aggiornare l’attributo aria-current quando l’utente naviga tra le pagine del sito.

Un’altra opzione consiste in utilizzare un framework di navigazione come React Router o Vue Router, questi frameworks forniscono una soluzione per gestire la navigazione client side (SPA) e gestiscono automaticamente l’attributo aria-current per te.

Indipendentemente dalla soluzione che si utilizza, è importante testare sempre l’acces