Cos’è il Burger Button?
Il Burger Button è il bottone che apre un menu ed è usato soprattutto per i menu di un sito web in versione mobile. Per convenzione è rappresentato con l’icona formata da 3 linee. L’idea per questo post viene dal libro “Inclusive Design Patterns” di Heydon Pickering.
Perché sono importanti le convenzioni?
Perché se le persone conoscono già le regole del gioco, imparano a navigare su internet più velocemente. Le convenzioni fanno risparmiare tempo e riducono lo stress durante una ricerca sui siti web. Riducono il tempo necessario al nostro cervello per elaborare i dati. È un po’ come andare in autostrada e impostare la velocità massima a 130km/h.
Convenzioni VS Creatività
Ok, ma sono una persona creativa, non posso inventare qualcosa anch’io? In merito posso citare una frase di Mark Boulton: “Leave creativity to the bad designers. This is not the place to do something different. If a convention exists, use it.”
Burger Button: 3 varianti per migliorare l’accessibilità
- Solo icona: si potrebbe aggiungere un’indicazione leggibile solo con Screen Reader, ma si può fare meglio;
- Icona + Label: basta aggiungere l’etichetta “MENU” per rendere più riconoscibile il Burger Button;
- Icona + Label + Bordo: aggiungendo anche un bordo, il Burger Button sembra proprio un bottone. In generale, tutti i bottoni dovrebbero sembrare bottoni, altrimenti si perde la loro affordance. Migliora l’accessibilità e anche l’usabilità in generale.
Extra: altre versioni di Burger Button accessibile
Ci sono poi altre versioni più complete come:
- Menu espandibile con label “More ↓” (NHS)
- Menu desktop con Label “↓ Topics” (GOV.UK)
- Menu mobile con Label “↓ Menu” (GOV.UK)
Quando è importante usare i tag ARIA
I tag ARIA sono utili proprio per migliorare l’accessibilità nel momento in cui mancano alcuni elementi a livello di codice HTML. Ad esempio, nella versione 1 del Burger Button con l’icona e basta, manca un testo che descrive l’azione del bottone. Senza alcun suggerimento, il bottone non sarebbe riconoscibile dagli Screen Reader. In questo caso basta aggiungere un tag aria-label.
Non esistono regole ufficiali, dipende da progetto a progetto
Paradossalmente potrebbe andare bene la versione 1. Credo che dipenda anche dal target e dalla posizione del Burger Button. In generale, credo che la cosa importante sia fare in modo che il Burger Button sia riconosciuto come un bottone che apre un menu. Se possibile, sarebbe importante fare un po’ di ricerca UX.