3 – Gestire link
Problema
Come gestire link ipertestuali all’interno della pagina tenendo conto dei requisiti di accessibilità?
Soluzione
E’ necessario avere cura della leggibilità dei collegamenti ipertestuali e degli eventuali attributi “title”; informare, in caso di link ad allegati, sul formato e il peso; inserire salta menu in modo da consentire di saltare aree ripetitive.
A) Inserire l’attributo title al link con WordPress
- Entrare nella finestra di editing dell’articolo
- Scrivere il testo e selezionare quello da linkare a un sito esterno
- Fare clic sull’icona Inserisci/Modifica link
- Scrivere l’indirizzo web esatto della risorsa (es. http://www.istruzione.it) e, a fianco di Titolo, la descrizione del link (ad esempio “Link al sito esterno del Ministero dell’Istruzione) evitando di inserire pop-up o aperture di finestre indipendenti
- In caso di documenti, ripetere la procedura, caricando prima l’immagine e copiando ed incollando l’indirizzo del link a fianco di Titolo in Inserisci/modifica link. Ricordarsi di aggiungere anche formato e dimensione del file.
B) Inserire salta menu
L’inserimento dei “salta menu” richiede l’inserimento di un menu (nascosto nella navigazione tramite browser visuali grazie ai css) in alto con link a dei punti specifici della pagina. La persona non vedente (che naviga il sito con lo screen reader) potrà così intercettare subito il link e spostarsi direttamente al contenuto che gli interessa, evitando la lettura ripetitiva di contenuti (tipo testata, menu, ecc.).
Da Aspetto – Editor visualizzare il file header.php e scrivere appena sotto <body>:
<div class="nascosto">
<strong> Navigazione veloce </strong><ul><li><a href="#centrecontent">vai al contenuto</a></li>
<li><a href="#leftsidebar">vai alla navigazione principale</a></li>
<li><a href="#rightsidebar">vai alla navigazione contestuale</a></li>
</ul>
</div>
Per nascondere la lista di link ai browser visuali:
Da Aspetto – Editor visualizzare il file style.css e scrivere
.nascosto { display:none; } o, meglio ancora, onde evitare problemi con alcune versioni dello screen reader:
.nascosto {
width:0;position:absolute;
height:0;
overflow:hidden;
top:-200em;
}