Programmiamo l’Accessibilità: tabindex e accesskey con Php
Tutti sappiamo che dotare i collegamenti web di attributi come accesskey e tabindex è importante per l’accessibilità delle pagine. Spesso, in modo errato, si usano queste attenzioni solo sui link del menu principale, senza rendersi conto che non c’è alcuna differenza tra un link principale e uno secondario (magari piazzato nel footer e in fondo alla pagina).
Per risolvere il problema, basterebbe inserire in tutti i link questi attributi, facendo attenzione ed evitando di generare doppioni. Due link con la stessa accesskey, per esempio, creerebbero un problema di identificazione dei link.
Inoltre, un lavoro del genere, fatto in ogni pagina del sito è costoso in termini di tempo e pazienza. Pertanto quello che adesso mostrerò è una funzione php che cerca di automatizzare il lavoro tenendo traccia , volta per volta, delle lettere e dei numeri usati nei due attributi. Quello che dovrà fare poi il programmatore è semplicemente richiamare la funzione ogni volta che si scrive un link nel codice.
Nella mia semplice implementazione ho tenuto conto di alcuni aspetti tecnici (invariabili) e di scelte “implementative e di stile” (modificabili a piacimento).
Ecco le regole che ho seguito :
- I numeri usabili in tabindex possono crescere all’infinito
- Le lettere usabili in accesskey sono limitate. Ho ristretto il dominio di caratteri usabili in : cifre decimali {0..9} e lettere dell’alfabeto inglese. Pertanto, nella funzione, si deve aggiungere un controllo per evitare di aggiungere in ogni pagina più di 27 accesskey con carattere alfabetico.
- Generalmente il numero di link del menu principale sono limitati, e spesso i menu, per mantenere la compatibilità con le altre pagine del sito, vengono inseriti nelle pagine php con delle require o require_once. Pertanto la mia scelta implementativa è stata quella di supporre che i link del menu principale possano essere scritti per intero, e senza automazione (compresi accesskey e tabindex) direttamente dal programmatore e usare in entrambi gli attributi le cifre decimali.
Per esempio immaginiamo di avere un menu principale con 5 link:
<div id="menu">
<a href="link1.php" tabindex="1" accesskey="1"> pagina1 </a>
<a href="link2.php" tabindex="2" accesskey="2"> pagina2 </a>
<a href="link3.php" tabindex="3" accesskey="3"> pagina3 </a>
<a href="link4.php" tabindex="4" accesskey="4"> pagina4 </a>
<a href="link5.php" tabindex="5" accesskey="5"> pagina5 </a>
</div>
Con questo schema, abbiamo dato enfasi ai link del menu principale che ovviamente avranno i primi numeri interi e quindi verranno individuati prima nell’ordine delle tabindex, ma non solo…abbiamo creato una netta distinzione tra i link del menu principale (individuabili con gli accesskey numerici) e gli altri link secondari della pagina (individuabili con gli accesskey alfabetici).
Passiamo a questo punto all’implementazione della funzione.
<?
$num_link_secondario = 1;
function accessibility()
{
$link_menu_principale=5; // perchè abbiamo ipotizzato 5 link nel menu principale
global $num_link_secondario;
$stringa_tabindex = $link_menu_principale + $num_link_secondario;
if($num_link_secondario < 27)
{
$stringa_accesskey = chr($num_link_secondario + 96);
echo " accesskey=\"" . $stringa_accesskey . "\" tabindex=\"" . $stringa_tabindex . "\" ";
}
else
echo " tabindex=\"" . $stringa_tabindex . "\" ";
$num_link_secondario++;
}
?>
A questo punto, al programmatore, non resterà altro che richiamare la funzione ogni volta che si scrive il link con la certezza di non commettere errori e di rendere più completa, accessibile e ben strutturata la pagina:
<a href="link.php" <? accessibility() ?> > link secondario</a>
Ovviamente dobbiamo ricordarci di mettere un require o require_once con il collegamento al file che contine l’implementazione della funzione.
Immaginando che il link secondario indicato nell’esempio è il primo link che l’interprete php legge , il codice html che ne verrà fuori sarà :
<a href="link.php" accesskey="a" tabindex="6" > link secondario</a>
Il secondo link sarà del tipo :
<a href="altro_link.php" accesskey="b" tabindex="7" > bla bla bla.. </a>
E così via….a questo punto non resta che augurarvi BUONA PROGRAMMAZIONE!
Add to Google
10 Commenti
un ottimo articolo, grazie giancarlo
Sono sempre stato dubbioso sull’utilizzo di accesskey e tabindex, a volte creano più problemi che altro. Ci sono diverse teorie a riguardo, tempo fa ne parlò anche Roger Johansson.
a mio parere sono utili solo i tabindex. gli accesskey difficilmente vengono usati se non per siti complessi, altrimenti ogni nuovo sito sarebbe un nuovo alfabeto da imparare. invece di renderlo accessibile lo renderebbe complicato.
Oltre a condividere quanto scritto da Lauryn e Tommaso, riguardo ai tabindex aggiungerei che alcune volte può esser utile dare una priorità ad un link diversa dall’ordine sequenziale identificato dallo script all’interno della pagina (ad esempio una serie di collegamenti utili nel footer, o l’aggregazione del motore di ricerca al gruppo di collegamenti dedicati alla navigazione/strumenti…).
In ogni caso un bella soluzione
bell’articolo, le accesskey cerco di usarle quasi sempre, le tabindex onestamente un pò meno…
ciao koris! sono un po’ più utili le seconde stando alle statistiche di navigazione dei non vedenti ma anche di chi ha problemi con il mouse
In realtà le accesskey non le si usa praticamente più, i motivi sono dovuti a due questioni principali, prima di tutto i non vedenti preferiscono navigare un sito premendo il tasto tab, quindi un solo tasto. Koris mi spiace ma dovresti dare più risalto ai tabindex e meno agli accesskey; l’altra questione è che è troppo difficile gestirne il nome.
Faccio un esempio: usare il nome come è stato fatto nell’esempio, cioè ponendo una lettera in sequenza alfanumerica rende difficile gestire le differenze tra lettera dell’accesskey e il nome del menù, in pratica si perde il concetto menemonico del nome del link, ovvero non ha senso per Home mettere come accesskey (a).
D’altronde per un motivo simile non è possibile prendere il primo carattere del nome del link: Accessibile e Anatomia avrebbero lo stesso accesskey e ciò è impossibile averlo.
L’uso migliore sarebbe quello di suddividere le sezioni di un menù multiplo ma con numeri, i numeri sono univoci e si ricordano pure facilmente, ma solo dieci numeri si possono usare (dallo 0 al 9) più la punteggiatura che però tenderei ad escludere per motivi di “rimembranza”
Per quanto dice Carlo invece io lo eviterei dato che questi ausili vengono usati solo da chi non vede o da chi ha difficoltà di coordinazione nell’uso delle mani, vedersi saltare da un punto ad un altro rende il tutto molto confuso, inoltre chi vede non ha bisogno di questi ausili per trovare un punto nella pagina.
L’unico salto che abbia un senso è quello dal manù al testo che si usa per saltare tutta una sezione che non serve leggere, codificando il link come nascosto.
Ultimamente avevo letto, ma non ricordo più dove perciò prendetela per buona così com’è che anche la codificazione del tabultarore ha perso senso dato che i browser già la fanno di default.
M.
PS scusate la prolissità, l’argomento è troppo complesso per trattarlo brevemente.
Volevo segnalare che ho trovato una copia di questo articolo (fino all’augurio di “BUONA PROGRAMMAZIONE”) qui, senza nemmeno citare la fonte.
grazie Anna! ora lo cazziamo!
Oh…grazie ad entrambe per il vostro intervento !!! Comunque è un buon risultato…significa che qualcuno legge i miei articoli…quasi quasi scrivo un libro anch’io
