Link accessibili da tastiera

L’importanza di mantenere l’outline sui link, anche utilizzando dei CSS di reset.

Apple KeyboardUna pratica fin troppo diffusa, spesso derivata dall’uso di CSS di reset, è quella di eliminare l’outline dai link e dagli altri elementi attivi di una pagina per scopi puramente estetici, con poche righe di codice:

:focus {
	outline: none;
}

Potrà sembrare una soluzione elegante, ma ai fini dell’accessibilità di un sito è assolutamente sconsigliato, perchè senza outline diventa impossibile navigare tramite tastiera, o comunque con dispositivi diversi da un mouse.

Non pensate che riguardi solo una minoranza di utenti: sono tanti coloro che scorrono il contenuto di una pagina premendo il tasto tab. In molti ad esempio si spostano tra i campi di un form in questo modo: eliminando l’outline sul focus rendete il vostro sito inaccessibile.

Lo stesso Eric Meyer, autore di uno dei più famosi CSS Reset, pur azzerando questo stile raccomanda di definirne altri per sostituirlo. Il mio consiglio è di lasciarlo inalterato per evitare problemi: perchè complicarsi la vita?

Una soluzione alternativa

A volte potrebbe comunque capitare di essere obbligati a modificare lo stile dei link, ad esempio su richiesta di un cliente particolarmente insistente. Un’alternativa in questi casi è lasciare il focus inalterato ed eliminare l’outline dallo stato active:

a:active {
	outline: none;
}

Così non apparirà il bordo tratteggiato al clic, ma la navigazione da tastiera resterà comunque possibile. Non è una soluzione ottimale, ma in situazioni particolari potrebbe essere un compromesso accettabile.

Foto: Macbook Keyboard by alcomm

CSS3: Flexible Box Layout Module

Analisi della nuova specifica CSS3 per gestire i layout e l’allineamento verticale.

Tra i vari moduli in lavorazione nelle specifiche dei CSS3, ce n’è uno particolarmente interessante: il Flexible Box Layout Module. Con questa specifica (ancora in sviluppo) è possibile infatti rendere flessibili i contenuti di un box, facendo loro occupare lo spazio vuoto a disposizione, sia orizzontalmente che verticalmente.

Il codice CSS

La teoria è semplice: dato un contenitore e degli elementi al suo interno, questi potranno adattarsi allo spazio vuoto. Considerando come html di base:

<div class="container">
    <div class="box"></div>
    <div class="box"></div>
</div>

Il CSS necessario per far adattare verticalmente i due div interni sarà:

.container {
    display: box;
    box-align: stretch;
    box-orient: vertical;
}
.box {
    box-flex: 1;
}

N.B.: Per lo stretch orizzontale, basta usare box-orient: horizontal.

In realtà per effettuare dei test è ancora necessario utilizzare i prefissi -moz- e -webkit-, visto che le proprietà standard non sono ancora supportate.

Esempi pratici

Flexible box layout model

Per capire ancora meglio la dinamica di questo modulo, gli esempi che trovate su css3.info sono meglio di qualsiasi descrizione testuale, a patto che stiate utilizzando le ultime versioni di Firefox, Safari o Chrome. Il W3C infatti sta ancora lavorando sul documento, e per adesso solo i motori di rendering Gecko e Webkit hanno delle istruzioni proprietarie adatte allo scopo.

Da notare che i due motori presentano risultati differenti, pur rendendo chiaramente l’idea dell’utilità della proprietà. A mio parere l’interpretazione corretta è quella di Webkit, ma finchè le specifiche non saranno definitive diventa difficile stabilirlo.

Un altro articolo interessante a riguardo è sul blog di Alex Russel, che ha preparato un foglio di stile su misura per avere già pronte tutte le classi necessarie.

Perchè parlarne?

Se le specifiche per il Flexible Box Layout Module sono ancora così indietro, ha senso parlarne? La risposta è sì, come nel caso di tutte le altre proprietà dei CSS3 che non sono ancora supportate. Pur non potendo utilizzarle nei propri progetti, per un web designer non è mai troppo presto per sperimentare: quando arriverà il momento sarà un grande vantaggio conoscerle.

Purtroppo l’ostacolo è rappresentato dalla lentezza del W3C e dal normale ciclo di vita dei browser: finchè esisteranno sul mercato delle versioni che non supportano queste nuove proprietà, sarà ancora presto per utilizzarle.

I problemi di validazione con i CSS3

Utilizzare i CSS3 significa spesso avere fogli di stile non validi. Come affrontare il problema?

Uno dei problemi principali nell’utilizzo dei CSS3 è la creazione di fogli di stile con codice valido. I CSS2 sono ormai uno standard, ma non è così per le nuove specifiche.

Escludendo qualche rara eccezione, la maggior parte delle proprietà hanno nomi diversi e sono supportate in maniera differente a seconda del browser: questo non semplifica il lavoro degli sviluppatori. Basti pensare ad una proprietà ormai diffusa su tutti i browser (escludendo il solito Internet Explorer): border-radius. Su Firefox è necessario utilizzare il prefisso “moz-“, su Safari e Chrome bisogna anteporre “webkit-“ , ed ognuna di queste forme ovviamente non è riconosciuta dal W3C.

Il risultato è che se si desidera utilizzare i CSS3 per dare ad una parte dei propri utenti una migliore esperienza di navigazione, non sarà possibile validare il foglio di stile.

Come comportarsi in questo caso? L’unica soluzione è trovare un compromesso. Su questo sito ad esempio l’unica proprietà particolare che ho utilizzato è text-shadow, ben supportata nella sua forma standard. Ho invece trascurato proprio border-radius e altre proprietà simili, che però utilizzo su altri progetti come il mio blog personale, dove sono meno rigido per quanto riguarda la validazione dei CSS.

La colpa di questa situazione è da attribuire soprattutto alla lentezza del W3C, perchè i produttori di browser stanno dimostrando una grande attenzione alle novità. Supportare certe funzionalità è comunque motivo di vanto sulla concorrenza. Non è possibile però chiedere ai produttori di utilizzare fin da subito la forma standard delle proprietà: le specifiche potrebbero cambiare prima del raggiungimento della loro forma standard.

Proprio sull’uso dei CSS3 sarei curioso di conoscere anche il vostro punto di vista: li utilizzate? Vi preoccupate della validazione del foglio di stile?

Uno dei migliori suggerimenti sull’argomento, segnalato su CSS3.info, riguarda una possibile modifica al validatore del W3C. La soluzione ideale infatti sarebbe vedere segnalate come “experimental” o “warning” le proprietà dei CSS3 ancora sperimentali, consentendone l’uso senza problemi. Gli errori sparirebbero per la felicità di tutti, ma è una speranza probabilmente troppo ottimista.

Selettori adiacenti con i CSS

E’ il momento di sperimentare nuove proprietà dei fogli di stile.

I selettori adiacenti sono una funzionalità dei CSS spesso ignorata, ma dalle grandi potenzialità. Con una semplice dichiarazione infatti è possibile identificare l’elemento immediatamente vicino (quindi adiacente) ad un altro. Ad esempio con

div + p {
color: #a00;
}

è possibile assegnare delle proprietà al primo paragrafo contenuto in un div, paragrafo che in questo caso diventerà rosso.

Niente classi o id, è possibile gestire tutto tramite CSS senza bisogno di appesantire il codice HTML. L’altra buona notizia è che questo tipo di selettore funziona su tutti i principali browser, escluso ovviamente Internet Explorer 6. Firefox, Explorer 7, Safari, Opera e Chrome la supportano senza problemi.

E’ tempo quindi di sperimentare ed iniziare ad utilizzarli, anche come progressive enhancement, per offrire ai visitatori con un browser recente una migliore esperienza di navigazione.

Se volete vedere un esempio pratico, ho fatto il mio primo esperimento con i selettori adiacenti nel footer di TomStardust Diary:

Il footer di TomStardust Diary

Questo post è nato da una discussione su Friendfeed: una chiara dimostrazione dell’utilità dei social networks. C’è ancora qualcuno che ne dubita?

Nascondere un elemento con i CSS in modo accessibile

I problemi nell’utilizzo del display:none e le alternative possibili.

Nella realizzazione di un sito è ricorrente la necessità di nascondere elementi presenti nel codice HTML: basti pensare agli skip link o alle tecniche di image replacement. Ci sono diversi modi per farlo con i CSS, ma non tutti sono corretti.

Evitare il display:none

Un metodo diffuso, che però è sbagliato, è utilizzare display: none per nascondere totalmente la parte di codice desiderata. Questa tecnica è inaccessibile, perchè elimina l’elemento dalla pagina come se non esistesse. La maggior parte degli screen reader trovando un elemento con display: none lo salterà senza leggerlo.

Pensate all’intestazione di un sito ed ai link per facilitare la navigazione nascosti in questo modo: non facendoli leggere agli screen reader l’accessibilità della pagina viene compromessa.

Trovate anche un approfondimento sul comportamento degli screen reader in questo articolo di Roger Johansson.

La soluzione con position:absolute

La soluzione più semplice è utilizzare position: absolute invece di display: none:

.skip {
position: absolute;
left: -9999px;
}

In questo modo gli screen reader continueranno a leggere l’elemento nascosto. Per migliorare ulteriormente l’accessibilità della pagina con un occhio di riguardo alla navigazione da tastiera, è utile un’aggiunta del tipo:

.skip a:active, .skip a:focus {
position: absolute;
left: 1em;
}

Così usando il tasto tab per spostarsi tra i collegamenti della pagina, gli elementi nascosti appariranno quando selezionati.

L’alternativa: text-indent

Una soluzione alternativa per nascondere un elemento della pagina può essere la proprietà text-indent, con un valore negativo:

.skip {
text-indent: -9999px;
}

Questo metodo a volte viene usato per mantenere l’elemento contenitore nella pagina, facendo sparire solo il suo contenuto testuale. E’ da verificare nei vari casi il supporto dei browser, ma tutti quelli più importanti non dovrebbero avere problemi.

Testo nascosto con JavaScript

Un ultimo aspetto da considerare è la gestione di elementi della pagina che appaiono solo dopo un’azione dell’utente, usando JavaScript. E’ sbagliato nasconderli con i CSS: se questi elementi (ad esempio un menu a tendina) appaiono grazie a JavaScript, devono essere nascosti al caricamento della pagina secondo lo stesso principio.

La tecnica più semplice è usare JavaScript per assegnare una classe all’elemento desiderato e quindi nasconderlo (senza usare display: none!) tramite CSS.

E’ importante comprendere i problemi relativi al display: none descritti in questo articolo. Usandolo con cognizione di causa eviterete dei problemi ai vostri utenti: se conoscete altre soluzioni valide i commenti sono a vostra disposizione.

Spingere gli utenti ad aggiornare Explorer 6

Alcuni consigli pratici per incentivare l’aggiornamento di IE6.

Su questo blog ci sono state numerose discussioni su Internet Explorer 6 e su quanto renda complicata la vita degli sviluppatori. E’ possibile rimanere passivi e aspettare la sua lenta morte, ma non è detto che questo sia l’atteggiamento migliore. Ogni web designer infatti può dare un contributo alla sparizione di questo browser, che esiste dal 2001.

Le soluzioni possibili

Il modo migliore per far capire ad un utente che il suo browser è obsoleto, è presentargli una versione del sito alternativa. Sfruttando i commenti condizionali è possibile fornire ad IE6 un CSS su misura:

<!--[if lte IE 6]>
<link rel="stylesheet" type="text/css" href="http://www.sito.com/css/ie6.css" />
<![endif]-->

In questo modo tutte le versioni di Explorer precedenti alla 7 vedranno il sito in maniera diversa: potrete divertirvi come volete con questo foglio di stile. Un eccellente esempio di personalizzazione è offerto da questo sito, che con IE6 appare interamente in bianco e nero.

Anche su TomStardust.com ho voluto fare qualcosa: adesso navigando con il browser Microsoft l’header appare diverso, e compare anche un avviso che invita il visitatore ad aggiornare. Tutto è collegato ad una nuova pagina creata per l’occasione, con i link per il download dei migliori browser. Come avrete capito non sono comunque a favore delle soluzioni drastiche: è bene che i contenuti siano accessibili in ogni caso.

TomStardust.com: versione per Explorer 6

La soluzione definitiva?

Ovviamente questi interventi non potranno portare in tempi brevi alla sparizione di IE6. Molti utenti continueranno ad utilizzarlo perchè non possono fare altrimenti, magari per obblighi aziendali.

E’ comunque importante dare un segnale: esistono già diverse campagne di sensibilizzazione e siti come Facebook da tempo presentano avvisi agli utenti di Explorer 6. Il 2009 probabilmente non vedrà sparire questo browser, ma potrebbe essere l’anno della svolta.

Usare gli sprite CSS

Cosa sono gli sprite CSS? Una veloce spiegazione ed uno strumento per utilizzarli.

CSS SpritesL’utilizzo degli sprite CSS è una delle tecniche fondamentali da imparare quando si è alle prese con lo sviluppo di un sito. Consiste semplicemente nel riunire più immagini (spesso icone) in una più grande, come è possibile vedere nell’esempio qui a fianco (dove ho utilizzato alcune Silk Icons). Per selezionare quindi una singola immagine sarà sufficiente usare i CSS e la proprietà background-position.

Questa tecnica ha due vantaggi principali:

  1. diminuisce il numero di richieste HTTP al server migliorando le prestazioni del sito
  2. evita ritardi nel caricamento delle immagini usate per lo stato :hover dei link

Per velocizzare il lavoro e creare degli sprite CSS in pochi secondi, vi segnalo un fantastico CSS Sprite Generator che automatizza tutto il processo. Vi basterà caricare un file .zip contentente le immagini, impostare alcuni parametri come la distanza tra gli elementi ed il formato (png, gif o jpg), e lo strumento creerà anche le righe di CSS necessarie.

L’unico limite di questo tool è la dimensione del file da uploadare, che al momento non può superare i 500kb. Utile quindi per piccole immagini, mentre per files più ingombranti è necessario cercare altre alternative.

Animazioni e trasformazioni CSS

Con i CSS sarà possibile trasformare ed animare gli elementi di una pagina web. Cosa succederà a JavaScript?

Qualche tempo fa la Apple ha presentato al CSS Working Group del W3C una proposta riguardante transizioni ed animazioni con i CSS.  Il tutto è stato preso in considerazione ed inserito nel documento che mostra i progressi del gruppo.

Ma di cosa stiamo parlando? Sono novità interessanti e prioritarie o l’introduzione di queste proposte potrebbe aumentare la confusione?

Le novità

Trasformazioni CSS

Pur non essendo incluse nell’ultima proposta, le trasformazioni CSS sono comunque correlate. La proprietà transform consente infatti di spostare, ruotare o ridimensionare un elemento della pagina.

Transizioni CSS

Questo modulo gestisce le transizioni tra pseudo-classi, come potrebbe essere il passaggio allo stato :hover di un link e viceversa. Per la transizione è possibile specificare un determinato periodo di tempo (transition-duration), il passaggio non sarà quindi istantaneo. Ad esempio un link potrebbe cambiare colore sfumando.

Animazioni CSS

Se già con il modulo dedicato alle transizioni è possibile associare ad un oggetto dei brevi movimenti, con questo modulo si possono raggiungere risultati ancora più complessi.

Definendo gli eventi associati ad una determinata animazione, è possibile infatti indicare quali siano le proprietà che cambiano, il loro valore, e per quanto tempo.

Esempi pratici

Mi rendo conto che con queste novità sia facile fare confusione. Per chiarirsi le idee basta avere installato Safari: il browser Apple infatti supporta queste funzioni con dei comandi proprietari (con il prefisso -webkit-).

Per trasformazioni e transizioni questo è uno dei migliori esempi disponibili. Se invece volete vedere un’animazione CSS, la trovate in questa pagina, ma vi servirà una delle ultime nightly build di Safari (anche Safari 4 beta).

Possibili problemi

Siamo sicuri che queste novità siano positive per gli sviluppatori? Fino ad ora la parte interattiva di una pagina era gestibile con JavaScript (lasciamo da parte Flash): introdurre dei nuovi meccanismi di controllo direttamente nei CSS potrebbe generare diversi problemi.

Compatibilità tra i browsers

Inutile dirlo, se già adesso ci sono problemi ad ottenere risultati equivalenti sui vari browser, occupandosi esclusivamente dell’aspetto visivo delle pagine, cosa succederà quando il discorso riguarderà anche l’interazione tra vari elementi? Queste proprietà saranno di fatto inutilizzabili, a meno che non si voglia ricorrere a JavaScript per ottenere risultati simili sui browser che non le supportano. Ma allora perchè non usare direttamente JavaScript?

Interazione con JavaScript

Separando l’aspetto dell’interazione tra CSS e Javascript, si presenta un altro problema: l’interazione tra i due mondi. Non è possibile (al momento) intercettare un oggetto quando è nel mezzo di un’animazione CSS, ma nemmeno sapere se una transizione sia già avvenuta.

Accessibilità

I problemi non mancano nemmeno per quanto riguarda l’accessibilità. Già adesso per uno screen reader non è facile sapere tutto ciò che succede in una pagina, soprattutto se certi script AJAX vengono realizzati senza seguire le specifiche. Introdurre altre complicazioni aumenterà inevitabilmente le difficoltà per alcune categorie di utenti.

Conclusioni

Le possibilità offerte da trasformazioni, transizioni e animazioni CSS potrebbero essere interessanti, ma sarà bene valutarne pro e contro quando sarà il momento di utilizzarle. Il fatto che esista una determinata tecnologia, non significa che debba essere per forza utilizzata.

La tentazione potrebbe essere forte, perchè con poche righe di CSS sarà possibile animare facilmente gli elementi della pagina, ma la cosa migliore sarà continuare a gestire le interazioni esclusivamente con JavaScript, così come HTML e CSS sono riservati rispettivamente a contenuto e presentazione.

L’usabilità dei link testuali

Una guida per la corretta formattazione dei link di testo, evitando soluzioni poco usabili.

I collegamenti testuali di una pagina sono un elemento basilare; capita spesso però che vengano sottovalutati dagli sviluppatori, dando per scontato la loro riconoscibilità.

Per avere dei link usabili in realtà basta seguire alcune semplici convenzioni: implementarle non richiede molto tempo, ma i vantaggi per i vostri utenti saranno evidenti.

Le convenzioni da seguire

In certi casi il rischio di confondere chi visita la pagina è alto: quante volte vi è capitato di provare a cliccare su un testo che in realtà non era un collegamento? Per evitare questi problemi, bisogna tenere presenti alcuni parametri:

  • Colore – Uno dei fattori principali per distinguere un link dal resto della pagina è il suo colore, differente da quello del contenuto. Attenzione però, perchè il colore da solo non è sufficiente: pensate ai problemi che potrebbe incontrare un utente daltonico.
  • Stile – Ci sono numerosi stili a disposizione, dalla sottolineatura al grassetto, passando per il tipo di font utilizzato. L’importante è che venga usato uno stile differente dal resto della pagina: la pratica comune vede i link sottolineati, ed è bene seguire questa convenzione.
  • Contrasto – Un link deve essere in evidenza, e non deve essere difficile da identificare. Cambiare il colore non basta, il contrasto deve essere elevato.
  • Comportamento – Tra le convenzioni più diffuse c’è quella del cambio di cursore al mouseover. Vedere il puntatore trasformarsi in una mano è indispensabile.

Tenendo presenti questi fattori, è possibile ottenere molteplici combinazioni usabili. Sperimentare è lecito, ma ricordate che innervosire i vostri utenti con dei link non riconoscibili, o ancora peggio dei testi normali che sembrano collegamenti, potrebbe causare la loro fuga. Non aspettatevi di ricevere segnalazioni nel caso ci siano problemi di questo tipo, il visitatore medio lascerà il vostro sito innervosito senza concedervi altre possibilità.

Qual è la pratica migliore?

Di default i collegamenti hanno la sottolineatura con text-decoration: underline, ed un colore blu facilmente riconoscibile.

Personalizzando questa impostazione, tenete presente che la sottolineatura è tuttora la pratica migliore e più diffusa. Se però non vi piace il risultato finale, potreste considerare di utilizzare un border-bottom al suo posto, come viene fatto su A List Apart. Il risultato può essere ulteriormente migliorato con 1 pixel di padding-bottom:

Un esempio dei link testuali di A List Apart

Un’altra pratica piuttosto diffusa, che utilizzavo su questo sito qualche tempo fa, sono i link in grassetto, senza sottolineatura. Il problema è che la distinguibilità dei collegamenti in questo caso dipende molto dal colore. Un esempio chiaro si ha su TechCrunch: guardando la pagina in bianco e nero grazie a GrayBit, i link non sono così evidenti come quelli sottolineati:

Un esempio dei collegamenti testuali su TechCrunch

Ovviamente le varianti possibili sono infinite, l’importante è essere sempre consapevoli di quello che si sta facendo.

Ricordate comunque che in certi casi l’originalità può essere messa da parte e riservata ad altri dettagli: dei link usabili e facilmente riconoscibili sono indispensabili per garantire ai vostri utenti la migliore esperienza di navigazione possibile.

Come allineare le immagini dei post di WordPress

Alcune semplici istruzioni per risolvere i problemi delle immagini affiancate al testo su Wordpress.

Ultimamente mi è capitato spesso di trovare persone in difficoltà con l’allineamento delle immagini all’interno dei post di WordPress.

Dalla versione 2.5 infatti è cambiato il modo in cui vengono gestite: se prima erano utilizzati gli orrendi tag HTML come align=”left”, ora il funzionamento è diverso e tutto viene gestito tramite le classi CSS aligncenter, alignleft ed alignright.

Se quindi avete dei problemi simili a questo screenshot nell’allineamento delle immagini accanto al testo, molto probabilmente il tema che utilizzate non è ottimizzato per le ultime versioni di WordPress, dalla 2.5 in poi.

La soluzione

Il rimedio è semplice, e si trova anche sul sito ufficiale di WordPress. Infatti è sufficiente modificare il foglio di stile del tema che utilizzate (di solito style.css), aggiungendo le seguenti righe di codice:
.aligncenter,
div.aligncenter {
display: block;
margin-left: auto;
margin-right: auto;
}
.alignleft {
float: left;
}
.alignright {
float: right;
}
.wp-caption {
border: 1px solid #ddd;
text-align: center;
background-color: #f3f3f3;
padding-top: 4px;
margin: 10px;
/* optional rounded corners for browsers that support it */
-moz-border-radius: 3px;
-khtml-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
}
.wp-caption img {
margin: 0;
padding: 0;
border: 0 none;
}
.wp-caption p.wp-caption-text {
font-size: 11px;
line-height: 17px;
padding: 0 4px 5px;
margin: 0;
}

La parte relativa alla classe wp-caption è per i sottotitoli delle immagini, introdotti dalla versione 2.6 di WordPress. Se non li utilizzate potete evitare di inserire quella parte di codice, ma vi consiglio comunque di copiarla per evitare problemi.

Se volete avere un CSS valido, vi faccio notare inoltre che le definizioni sul border-radius non sono standard, quindi dovrete eliminarle e rinunciare agli angoli arrotondati dei sottotitoli.