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?
- 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.
- A Michael. In Opera, può digitare S per saltare alla successiva intestazione, oppure W per tornare alla precedente.
- 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
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.