Un markup accessibile non significa solo dare la possibilità a tutti di poter accedere agevolmente ai contenuti del nostro sito, significa anche aiutare i motori di ricerca nel processo di indicizzazione.

Prendete ad esempio il tag <IMG>, molti inseriscono le immagini in un sito direttamente come escono dalla macchina fotografica

Ecco la mia ultima foto
<img src="DSC00213.JPEG" />

Non ci vuole molto a capire che un motore di ricerca non potrà mai indicizzare correttamente un’immagine inserita in questo modo, è un po meno ovvio dedurre che un tasto per la navigazione risulterebbe inutile ad un non vedente senza l’attributo alt.

<img src="paginaSuccessiva.jpeg" alt="pagina successiva" />

Un tag inserito come qua sopra visualizza la scritta inserita come attributo alt quando non può essere visualizzata l’immagine, lo stesso attributo viene utilizzato dai motori di ricerca per dedurre informazioni sull’immagine.

Quanto sto per presentarvi è una lista di regole che non solo faciliteranno la navigazione del vostro sito ma vi permetteranno di avere un punteggio più alto nei motori di ricerca. Non conosco nessun editor visuale (wysiwyg) che rispetta queste regole alla lettera e per questo motivo ritengo che l’unico modo di creare un buon sito sia conoscere a menadito i linguaggi (x)html e css, non significa comunque che bisogna utilizzare editor come il notepad, ide come netbeans permettono uno sviluppo coerente e rapido allo stesso tempo.

Prima regola:
Ogni volta che lo scrivo mi vien da scrivere “you do not talk about fight club”, comunque, il markup serve per contenere il testo e i css servono per dargli un’aspetto.

Seconda regola:
Il markup serve per contenere il testo e i css servono per dargli un’aspetto. Usare una tabella per fare il layout, utilizzare il tag <CENTER> o addirittura utilizzare il tag <FONT> sono causa di dito puntato e risata di compassione, se fate cose del genere a lavoro verrete assegnati a mansioni più adatte alle vostre competenze.

Tabelle
Come spero sia chiaro non devono essere utilizzate per il layout ma per le tabelle, per questo si chiamano tabelle e non “tag generico per fare un po di tutto quando non ho idea di come si utilizzino i css”.
Descrivete il contenuto delle tabelle con il tag caption o con l’attributo title della tabella.
Se necessario raggruppate il contenuto della tabella con thead, tfoot e tbody per le righe e colgroup per le colonne.
Utilizzate il tag TH per i titoli.
Descrivete il contenuto della tabella utilizzando l’attributo abbr del tag td e l’attributo summary del tag table.
Se non potete inserire un &nbsp; nelle celle vuote utilizzate la proprietà empty-cells.

Spaziatua e posizionamento
Mai, mai e poi mai riempire la pagina di <br/>  o <p><p/> quando dovete inserire delle spaziature.
I CSS forniscono una vasta gamma di proprietà per regolare a piacimento e con una maggiore precisione gli spazi, i margini, l’altezza delle righe e quanto vi può saltare in mente.
Impostate l’allineamento del testo con la proprietà text-align.
Non utilizzate il tag BR, al suo posto utilizzate un bordo, sarete forzati a racchiudere il testo che volete separare in un tag.
Utilizzate le proprietà position e float per posizionare gli elementi, il documento deve essere scritto con un ordine logico e non derivato dal posizionamento (i contenuti principali in alto).

Immagini
Se le immagini del vostro sito possono essere trovate dai motori di ricerca per immagini porterete più visite al vostro sito, non state favorendo che esse vengano trafugate.
Impostate sempre l’attributo alt con una descrizione precisa dell’immagine, il nome del file deve essere rilevante, se nella pagina avete una descrizione dell’immagine deve essere tutto racchiuso nello stesso tag.

... <li>Un'altra foto delle mie vacanze
<img src="gita_al_mare1.jpeg" alt="io e il mio cane che facciamo un giro col gommone"/>
</li> ...

Non inserite parole chiave a caso nell’attributo alt, il motore di ricerca non è fesso e la considererà come spam.

Possibilmente collegate l’immagine alla versione a dimensione originale.
Non inserite anteprime troppo piccole o troppo grandi.

Se avete paura che le immagini vengano prese da qualcuno inserite dei dettagli relativi al copyright (creative commons ad esempio), aggiungete un codice di embed che contiene un link al vostro sito in modo che se qualcuno le utilizza possa attribuirla in modo appropriato.
Non esistono modi per proteggere in modo assoluto un’immagine, disattivare il tasto destro o inserire altri javascript o spaceball fa perdere più tempo a voi che a chi riuscirà comunque a salvare l’immagine.
Il modo più sicuro per far valere la vostra proprietà è utilizzare un watermark e mantenere per voi l’immagine alla massima dimensione.

Titoli, nomi e URL
Il tag title della pagina deve essere sempre rilevante.
Prediligete l’utilizzo di percorsi relativi, vi tornerà utile se dovete spostare il sito.
Utilizzate solo catatteri minuscoli, numeri, _ e – per i nomi dei files, se utilizzate lettere maiuscole tenete presente che nei sistemi unix A e a non sono la stessa lettera (case sensitive). Evitate quanto possibile l’utilizzo di lettere accentate, punteggiatura e spazi per i nomi dei file.

Liste
Che sia un menu, una lista di immagini o una lista della spesa le liste vanno fatte con il tag per le liste.
Con i CSS potete personalizzare in qualsiasi modo l’aspetto dei tag <ul> e <li>.

Form
Attribuite un id univoco ad ogni campo.
Descrivete i campi con il tag legend, utilizzate l’attributo for e accesskey.
Se dovete raggruppare le opzioni di una select utilizzate optgroup.
Racchiudete le varie parti di un form in un fieldset, utilizzate il tag legend per descrivere il fieldset, evitate di utilizzare una tabella per organizzare un form.

Inserite i vari campi del form in un P, legend e input nello stesso P, non utilizzate BR per la spaziatura dei form (IE potrebbe impazzire e pensare di essere lui al comando).

Collegamenti
Inserite se necessario l’attributo title.

Se, ad esempio, in un pannello di controllo avete un’immagine con una x rossa per cancellare un articolo dovreste specificare una descrizione “cancella articolo” nell’attributo title del collegamento o come alt dell’immagine.

Specificate se necessario la relazione tra il documento e quello collegato con l’attributo rel, inserire collegamenti esterni al vostro sito con rel=”nofollow external” non farà considerare quel collegamento per il pagerank di google.

Contenuti della pagina
Inserite titoli con i tag da H1 a H6 in ordine di importanza, il titolo di una storia avrà h1 mentre i titoli dei paragrafi h2.
Utilizzate i DIV per il layout, P per i paragrafi, SPAN per porzioni di testo, non utilizzate i tag I e U.

<div>
...
<p>
<h2>titolo</h2>
Lorem ipsum dolor <span class="redText">sit amet</span> ...
</p>
...

Una cosa come <span>bla bla<br/>bla bla</span> non dovrebbe esistere.

Ricordate che potete assegnare più di una classe ad un elemento quindi potete creare varie classi standard da attribuire in combinazioni.
Varie e conclusioni
Date un’occhiata alla lista dei tag e utilizzateli per il motivo per il quale sono stati creati.
Ad esempio utilizzate ADDRESS per gli indirizzi e ABBR per descrivere un’abbreviazione.
Evitate l’utilizzo dei tag html che definiscono un aspetto, il tag b rende il testo in grassetto ma perchè questo testo deve essere in grassetto? Se un giorno dovrà essere in corsivo? Definite delle classi con i css che descrivono lo scopo del testo in modo indipendente dall’aspetto che deve avere in quel momento o contesto.
Non utilizzate tag non standard, se alla microsoft fanno di testa loro e creano dei tag che capisce solo internet explorer non dovete utilizzarli.

Approfondimenti
Quanto appena scritto non è neanche la punta dell’iceberg di quello che dovrebbe conoscere un buon webmaster, se volete approfondire l’argomento potete trovare del materiale interessante a questi indirizzi:

WAI Guidelines and Techniques, HTML Techniques for Web Content Accessibility Guidelines, Google webmaster guidelines.