Ultima modifica: 28 febbraio 2010

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.

catena: icona di link nell'editor

A) Inserire l’attributo title al link con WordPress

  1. Entrare nella finestra di editing dell’articolo
  2. Scrivere il testo e selezionare quello da linkare a un sito esterno
  3. Fare clic sull’icona Inserisci/Modifica link
  4. 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
  5. 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.

Finestra Inserisci/modifica link

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;
}




Link vai su