Giorno 27: Usate intestazioni vere

Pensate al vostro sito come ad uno schema a livelli. Il livello principale è intestato con il nome del sito. Sulla vostra pagina principale, vi sono elementi da parecchi giorni. Così’ il secondo livello riporta la data: “Marted’ 16 luglio 2002″, o qualcosa di simile. Ogni giorno, inserite più articoli, che hanno, ognuno, un proprio titolo. Se è così, avete anche un terzo livello, rappresentato dai titoli degli articoli.

Ora applicate questo schema utilizzano i tag <h1>, <h2>, <h3> . I lettori di schermo si affidano a questi tag per interpretare la struttura delle vostre pagine. Sì, le vostre pagine hanno una struttura, ma senza gli appropriati tag per le intestazioni, i lettori di schermo non la ritrovano. Tra un minuto, mostrerò come usare i CSS per far apparire, sempre allo stesso modo, le intestazione nei browser visuali, indipendentemente dal mostruoso tipo di <font> utilizzato.

A chi serve?

1. A Jackie. Appena Jackie raggiunge la vostra pagina, JAWS annuncia che la pagina ha un certo numero di link ed un certo numero di intestazioni. Jackie può digitare INSERT+F6 per ascoltare tutte le intestazioni della pagina, oppure CTRL+INSERT+ENTER per navigare velocemente nella pagina, saltando alla successiva intestazione.
2. A Michael. In Opera, può digitare S per saltare alla successiva intestazione, oppure W per tornare alla precedente.
3. A Google. Google apprezza la pagina ben strutturata, e valuta di più le parole chiave che appaiono tra i tag delle intestazioni. (Dunque un’altra buona ragione per scrivere al meglio i titoli degli articoli)

Come fare: Movable Type

• Definite gli stili per il logo del sito. Nel modello Stylesheet (styles-sites.css), aggiungete le seguenti linee:

h1, h2, h3 {

margin: 0;

padding: 0;

}

h1 {

font-size: 20px;

font-weight: normal;

}

/*/*/a{}

h1 {font-size: 100%}

/* */

• Definite lo stile del logo con il tag <h1>. Nei 4 modelli principali (Main Index, Category Archive, Date-Based Archive, Individual Entry Archive), cercate questo:

<div id="banner">

<$MTBlogName$><br />

E sostituitelo con questo:

<div id="banner">

<h1><$MTBlogName$></h1>

• Definite le date con i tag <h2>. Abbiamo già una classe definita per questa date, quindi non è necessario cambiare nulla; cambiamo solo il tag. Nei 4 principali modelli, cercate questo:

<div class="date">

<$MTEntryDate format="%B %d, %Y"$>

</div>

E sostituitelo con questo:

<h2class="date">

<$MTEntryDate format="%B %d, %Y"$>

</h2>

• Definite i titoli degli articoli con il tag <h3>. Di nuovo, cambieremo solo il tag, non il foglio di stile. Nei 4 principali modelli, cercate questo:

  <span class="title"><$MTEntryTitle$></span>

  E sostituitelo con questo:

  <h3class="title"><$MTEntryTitle$></h3>

Come fare: Radio

1. h2 {“ nel modello di Home Page. Se trovate questa regola, rimuovetela; non viene utilizzata da nessuna parte, e ci servirà a nostro modo:

h2 {
font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 24px; font-weight: bold
}

• Bene, ora aggiungete questi stili, non importa dove,  nella sezione <style> del modello di Home Page:

h1, h2 {

margin: 0;

padding: 0;

}

h1 {font-size: 24px}

h2 {font-size: 13px}

/*/*/a{}

h1 {

font-size: large;

voice-family: "\"}\"";

voice-family: inherit;

font-size: x-large;

}

html>body h1 {

font-size: x-large;

}

h2 {

font-size: x-small;

voice-family: "\"}\"";

voice-family: inherit;

font-size: small;

}

html>body h2 {

font-size: small;

}

/* */

Notate che stiamo usando dimensioni di font relative nelle intestazioni per i browser che interpretano il dimensionamento relativo, e la dimensione assoluta per Netscape 4. Questa tecnica dovrebbe esservi familiare; l’abbiamo utilizzata infatti ieri.

• Definite l’intestazione per il nome del sito. Nel modello di Home Page, cercate “<%siteName%>” ed individuate questa linea:

<font size="+2"><b><a href="<%radio.macros.weblogUrl ()%>" style="color:Black; text-decoration:none"><%siteName%></a></b></font>

Cambiatela così:

<h1><a href="<%radio.macros.weblogUrl ()%>" style="color:Black; text-decoration:none"><%siteName%></a></h1>

• Definite l’intestazione per le date. Nel modello Day , cercate “<%longDate%>” ed individuate questa linea:

<b><%longDate%></b>

Cambiatela così:

<h2><%longDate%></h2>

Approfondimenti

• Shirley Kaiser: Don’t Fake Your Markup: Aspetti di accessibilità nei CSS.

Questo post è stato pubblicato il giorno: giovedì 29 maggio 2003 alle ore: 10:17 ed è stato collocato in: Affrontare l'accessibilità.
È possibile seguire le risposte a questo post attraverso il feed RSS 2.0.
Le risposte sono attualmente sospese, ma puoi fare un trackback dal tuo sito.