Yahoo! User Interface Blog (YUIBlog)

Lo sviluppo di un Widget accessibile stella Valutazioni

In fretta? Vai alla pagina demo .

Molti siti di e-commerce, servizi di social networking e community online includono funzionalità di rating o di valutazione. Sollecitare opinione della gente è addirittura diventato un modello di business, ora ci sono siti dedicati ai prodotti di rating, servizi, imprese, e altro ancora.

L'interfaccia più comune utilizzato per visualizzare i voti è il "sistema di classificazione", in cui viene assegnato un determinato numero di punti (spesso espressa in stelle) a un elemento da ogni revisore. Troviamo questo modello su molti siti, da Amazon a Yelp.

Figura A. esempi txtStarRating da Amazon e Yelp .

Come Figura A mostra, entrambe le interfacce visuali sono simili, ma ciò che rende queste due soluzioni interessanti è la loro base di markup. Uno si basa sulla <map> , l'altro sulla <img> .

Si potrebbe pensare che la maggior parte dei sistemi di rating si baserebbe su alcuni markup dimostrato di essere semantica e "operativa" in molti programmi utente - cioè, che i sistemi di rating sarebbe basata su un insieme specifico di elementi e attributi HTML a cui si applica il comportamento e stile tramite JS e CSS. Questo avrebbe senso, ma è lontano dalla verità. Quando si tratta di markup, autori cercano quasi tutto:

• <a> ,
• <img> ,
• <span> ,
• <li> ,
• <map> ,
• <div> ,
• <input> ,
• e altro ancora ...

Il caso di microformati

Prima di presentare alcune tecniche di image-based per marcare voti, penso che vale la pena menzionare un approccio di base e semplice (da Microformats ) che utilizza i caratteri:

 <abbr class="rating" title="3 stars">***</abbr> 

Pro

E 'semplice e semantica.

Il markup è minima.

Il metodo non fa affidamento su CSS.

Il metodo non fa affidamento sulle immagini.

Non vi è alcuna richiesta HTTP.

Cons

E 'impossibile per rappresentare i valori metà (3,5 stelle)

Essa "funziona" solo con asterischi ("stelle").

Screen reader, per impostazione predefinita, non espandere le abbreviazioni (che non può essere un grosso problema in questo caso).

Nota: Io uso "*", piuttosto che ★ (★) perché screen reader (almeno Jaws e NVDA ) sembrano ignorare entità HTML.

Markup per visualizzare l'immagine a base di valutazioni

Quando si tratta di visualizzare le immagini, gli autori hanno molte opzioni.

Una immagine per voto

Utilizzando una sola immagine:

 <img src="4stars.png" alt="4 out of five"> 

Una stella

Due stelle

Tre stelle

Quattro stelle

Cinque stelle

Pro

Utilizzando una sola immagine per punteggio è semplice e semantica.

Il metodo non fa affidamento su CSS.

Markup Minimal.

Cons

Crea molte richieste HTTP in quanto vi sono molte immagini differenti.

In cima al problema di prestazioni, può essere un incubo di manutenzione come autori hanno a che fare con più asset (immagini per creare, per spingere ad una CDN, da modificare quando cambiano i colori del sito, ecc.)

Selezione del testo non è possibile in Opera (almeno nella versione 9,52) come il testo alternativo viene ignorato

Una immagine per unità

Dal WHATWG 's bozza di lavoro :

 <img alt="4 out of 5" src="one-star.png"> <img alt="" src="one-star.png"> <img alt="" src="one-star.png"> <img alt="" src="one-star.png"> <img alt="" src="no-star.png"> 

Una stella

Due stelle

Tre stelle

Quattro stelle

Cinque stelle

Pro

Utilizzando due img elementi per punteggio diminuisce il numero di richieste HTTP.

Il metodo non fa affidamento su CSS.

Cons

In Opera, quando le immagini sono disabilitate, il testo alternativo non è selezionabile, e (in piccola visualizzazione a schermo), che il testo è reso con un bordo che lo rende meno leggibile.

Si noti che questo è tratto da una bozza di lavoro controverso. A mio parere, questo metodo non è accettabile perché il testo alternativo non descrive l'immagine in modo accurato e conciso. Inoltre, se la base di questo approccio è che queste immagini rappresentano il contenuto, allora perché lasciare alcuni di loro senza alt text?

On Ajaxian , per esempio, l'autore sta usando il testo alternativo ad ogni singola immagine, che fa un sacco di senso, se ritiene che ognuno è contento:

 <img [snip] alt="+" src="star1.png"/> <img [snip] alt="+" src="star1.png"/> <img [snip] alt="+" src="star1.png"/> <img [snip] alt="-" src="star0.png"/> <img [snip] alt="-" src="star0.png"/> 

In ogni caso, usando come immagini quante sono le stelle rispetto all'utilizzo di un singolo elemento (un img o altro) ha il vantaggio principale di agevolare i meccanismi di voto - in cui un utente seleziona una delle stelle di esprimere il suo voto. Quindi dovremmo tenere questo in mente ...

Uno sprite per le immagini di sfondo

La tecnica che segue è un adattamento di una strategia inizialmente attuato con gli sviluppatori di Yahoo! Musica :

Markup

 <span class="rating r1 stars">1 of 5</span> <span class="rating r2 stars">2 of 5</span> <span class="rating r3 stars">3 of 5</span> <span class="rating r4 stars">4 of 5</span> <span class="rating r5 stars">5 of 5</span> 

CSS

 .stars { background: transparent url(img/sprite.png) no-repeat; } .rating { font-size: 0; height: 19px; overflow: hidden; vertical-align: middle; width: 96px; display: block; } .r1 { background-position: -385px 0; } .r2 { background-position: -288px 0; } .r3 { background-position: -192px 0; } .r4 { background-position: -96px 0; } 

Una stella

1 di 5

Due stelle

2 su 5

Tre stelle

3 su 5

Quattro stelle

4 su 5

Cinque stelle

5 su 5

Pro

Questo metodo richiede una singola richiesta HTTP in quanto si basa su una singola immagine sprite.

Minimal "impronta".

Cons

Il contenuto non viene rivelato con immagini fuori.

Nulla indica quando la pagina viene stampata (un foglio di stile di stampa potrebbe prendersi cura di questo problema).

In Opera, il foglio di stile ad alto contrasto fa sparire tutte le stelle, lo stesso vale per l'ottimizzazione High Mode Contrasto .

La selezione del testo è possibile, ma non è ovvio (via evidenziazione).

A sprite nel markup

Questo approccio si basa sul metodo TIP , che utilizza una immagine sprite come <img> elemento piuttosto che una immagine di sfondo:

Markup

 <span title="1 of 5" class="rating r1"><img width="0" height="1" src="sprite.gif" alt=""/>1 out of 5</span> <span title="2 of 5" class="rating r2"><img width="0" height="1" src="sprite.gif" alt=""/>2 out of 5</span> <span title="3 of 5" class="rating r3"><img width="0" height="1" src="sprite.gif" alt=""/>3 out of 5</span> <span title="4 of 5" class="rating r4"><img width="0" height="1" src="sprite.gif" alt=""/>4 out of 5</span> <span title="5 of 5" class="rating r5"><img width="0" height="1" src="sprite.gif" alt=""/>5 out of 5</span> 

CSS

 .rating { position: relative; height: 1.6em; width: 8.1em; overflow: hidden; vertical-align: middle; display: block; } .rating img { position: absolute; width: 40.5em; height: 1.55em; top: 0; border: 1px solid #fff; } .r1 img { right: 0; } .r2 img { left: -24.4em; } .r3 img { left: -16.2em; } .r4 img { left: -8.1em; } 

Una stella

1 su 5

Due stelle

2 su 5

Tre stelle

3 su 5

Quattro stelle

4 su 5

Cinque stelle

5 su 5

Pro

Questo metodo richiede una singola richiesta HTTP.

Questa tecnica è l'unico dei quattro metodi sopra descritti, che rivela i contenuti quando gli utenti di Firefox selezionare "immagini nascondere" o "rendere le immagini invisibili" (dalla barra degli strumenti dello sviluppatore).

Quando le immagini sono disponibili un rosso "x" appare solo il punteggio più alto (ossia 5 su 5) anziché in ognuno come è il caso con altre soluzioni che si basano su img elementi.

Cons

La visualizzazione delle immagini è legata alla CSS.

Vale la pena notare che a differenza di altre tecniche di sostituzione di immagini, questo metodo consente di:

• immagini di scalare a seconda del testo di dimensioni impostazioni.
• immagini da stampare.
• testo alternativo da poter essere facilmente selezionato come l'intera immagine appare evidenziato (Firefox).
• l'immagine non a scomparire in un ambiente ad alto contrasto / foglio di stile.
• selezione di testo alternativo in Opera (quando le immagini sono disattivate).
• bordi testo alternativo in vista piccolo schermo di Opera.

Markup ad esprimere voti

Partendo da un meccanismo nativo

Per votare, abbiamo bisogno di un basso livello meccanismo di voto che permette la selezione utente semplice e sottomissione. Per questo, possiamo contare sull'utilizzo di un form con etichette e controlli:

Markup

 <fieldset> <legend>Rating</legend> <label><input type="radio" name="movie" value="1_5">1/5</label> <label><input type="radio" name="movie" value="2_5">2/5</label> <label><input type="radio" name="movie" value="3_5">3/5</label> <label><input type="radio" name="movie" value="4_5">4/5</label> <label><input type="radio" name="movie" value="5_5">5/5</label> </fieldset> 

Risultato

Aggiunta di pause e spazi

Per una migliore leggibilità, si aggiungono <br> e gli spazi.

Markup

 <fieldset> 
 <legend>Rating</legend> <label><input type="radio" name="movie" value="1_5"> 1/5</label><br> <label><input type="radio" name="movie" value="2_5"> 2/5</label><br> <label><input type="radio" name="movie" value="3_5"> 3/5</label><br> <label><input type="radio" name="movie" value="4_5"> 4/5</label><br> <label><input type="radio" name="movie" value="5_5"> 5/5</label> </fieldset> 

Risultato

Introducendo l'immagine sprite nel markup

Per questa soluzione, si utilizza una sprite più piccolo di quello nell'esempio precedente. Ora è composto da due singole stelle ("on" e "off").

Mettiamo img elementi all'interno delle etichette. Non ci assumiamo avranno alcun valore senza il supporto CSS, così noi "nascondere" questi, impostando dimensioni specifiche attraverso la loro width e height attributi. Si noti che l'utilizzo di 0 con entrambi gli attributi avrebbe mostrato un'immagine spezzata in qualche s UA.

 <form ...> <fieldset> <legend>Rating</legend> <label class="one" title="1 out of 5"><input name="LandOf" value="1" checked="checked" type="radio"> 1/5<img src="star-sprite.gif" alt="" height="0" width="0"></label> <label class="two" title="2 out of 5"><input name="LandOf" value="2" type="radio"> 2/5<img src="star-sprite.gif" alt="" height="0" width="0"></label> <label class="three" title="3 out of 5"><input name="LandOf" value="3" type="radio"> 3/5<img src="star-sprite.gif" alt="" height="0" width="0"></label> <label class="four" title="4 out of 5"><input name="LandOf" value="4" type="radio"> 4/5<img src="star-sprite.gif" alt="" height="0" width="0"></label> <label class="five" title="5 out of 5"><input name="LandOf" value="5" type="radio"> 5/5<img src="star-sprite.gif" alt="" height="0" width="0"></label> </fieldset> </form> 

Si noti che con il markup sopra, possiamo aspettarci (nella maggior parte dei browser) campo di selezione attraverso la selezione etichetta.

Considerando Accessibilità

Purtroppo, come è, questo markup crea problemi in almeno due screen-reader: JAWS e NVDA (vedi banco di prova per questi bug). Il problema è legato all'utilizzo di un title attributo e una stringa vuota per il testo alternativo.

La soluzione per non confondere screen-reader gli utenti è quello di utilizzare "stelle" come testo alternativo ( alt ) e utilizzare JavaScript per inserire title al passaggio del mouse.

Meglio Markup

 <fieldset> 
 <legend>Rating</legend> <label><img src="img/small-sprite.gif" width="0" height="1" alt="stars"><input type="radio" name="movie" value="1_5"> 1/5</label><br> <label><img src="img/small-sprite.gif" width="0" height="1" alt="stars"><input type="radio" name="movie" value="2_5"> 2/5</label><br> <label><img src="img/small-sprite.gif" width="0" height="1" alt="stars"><input type="radio" name="movie" value="3_5"> 3/5</label><br> <label><img src="img/small-sprite.gif" width="0" height="1" alt="stars"><input type="radio" name="movie" value="4_5"> 4/5</label><br> <label><img src="img/small-sprite.gif" width="0" height="1" alt="stars"><input type="radio" name="movie" value="5_5"> 5/5</label> </fieldset> 

Risultato

Valutazione

1/5
2/5
3/5
4/5
5/5

Styling

Dare dimensioni per l'immagine tramite CSS

Usiamo em per consentire l'immagine di crescere o diminuire a seconda del font-size.

Markup

Immutato

CSS

 img { width:2.8em; height:1.4em; } 

Risultato

Valutazione

1/5
2/5
3/5
4/5
5/5

Come si può vedere già, cliccando su un'immagine seleziona il pulsante di opzione corrispondente. Non vi è necessità di scripting come etichettatura implicito produce questo comportamento (eccetto in IE).

Rimuovere l'immagine dal flusso

Styling l' label con position:relative e l'immagine con position:absolute con top / left dei valori è sufficiente per nascondere input e il testo all'interno delle etichette.

Markup

Immutato

CSS

  label { 
    position: relative;
 } 
 img {
   width: 2.8em;
   height: 1.4em;
    position: absolute; 
    top: 0; 
    left: 0; 
 } 

Risultato

Valutazione

1/5
2/5
3/5
4/5
5/5

Visualizzazione di una stella per etichetta

Noi lo stile l'etichetta così le sue dimensioni corrispondono a l'altezza e la larghezza di una singola stella.

Markup

Immutato

CSS

 label { position:relative;   height: 1.4em;
  width: 1.4em;
  overflow: hidden;
  display: block; 
 }
 img {
   width: 2.8em;
   height: 1.4em;
   position: absolute;
   top: 0;
   left: 0;
 } 

Risultato

Valutazione

1/5
2/5
3/5
4/5
5/5

Visualizzazione delle stelle in orizzontale

Togliamo il br s e galleggiare le etichette.

Markup

Immutato

CSS

  {br
  display: none;
 } 
 label {
   position: relative;
   height: 1.4em;
   width: 1.4em;
   overflow: hidden;
    display: block; 
    float: left; 
 }
 img {
   width: 2.8em;
   height: 1.4em;
   position: absolute;
   top: 0;
   left: 0;
 } 

Risultato

Valutazione

1/5
2/5
3/5
4/5
5/5

Visualizza l'immagine sprite in base al calibro

Per impostare un "3 su 5" rating, si applica la stessa classe agli ultimi due etichette. Questa classe sposterà la posizione dell'immagine all'interno dell'etichetta.

Markup

 <fieldset> <legend>Rating</legend> <label><img src="img/small-sprite.gif" width="0" height="1" alt="stars"><input type="radio" name="movie" value="1_5"> 1/5</label><br> <label><img src="img/small-sprite.gif" width="0" height="1" alt="stars"><input type="radio" name="movie" value="2_5"> 2/5</label><br> <label><img src="img/small-sprite.gif" width="0" height="1" alt="stars"><input type="radio" name="movie" value="3_5"> 3/5</label><br> <label   class = "no_star"   > <img Src="img/small-sprite.gif" width="0" height="1" alt="stars"> <input type="radio" name="movie" value="4_5"> 4 / 5 </ label> <br>
 <Label   class = "no_star"   > <img Src="img/small-sprite.gif" width="0" height="1" alt="stars"> <input type="radio" name="movie" value="5_5"> 5 / 5 </ label>
 </ Fieldset> 

CSS

 br { display:none; } label { position:relative; height:1.4em; width:1.4em; overflow:hidden; float:left; } img { width:2.8em; height:1.4em; position:absolute; top:0; left:0; }   . No_star img {
  a sinistra:-1.4em;
 } 

Risultato

Valutazione

1/5
2/5
3/5
4/5
5/5

Non fare affidamento sull'immagine solo per visualizzare le informazioni

E 'importante offrire un'alternativa alla visualizzazione delle stelle nel caso in cui le immagini non sono disponibili. Questo perché le etichette ei pulsanti sono stilizzati per essere uno sopra l'altro. Una soluzione semplice è quella di spostare input e di testo off-screen (cioè usando text-indent:-999em ) e applicare un colore di sfondo alle etichette.

Markup

Nessun cambiamento

CSS

 br { display:none; } label { position:relative; height:1.4em; width:1.4em; overflow:hidden; float:left;   background: Teal;
  margin-right: 1px;
  text-indent:-999em; 
 }
 img {
   width: 2.8em;
   height: 1.4em;
   position: absolute;
   top: 0;
   left: 0;
 }
  . No_star {
  background: # ccc;
 } 
 . No_star img {
   a sinistra:-1.4em;
 } 

Note:

• text-indent fissa anche un salto verso l'alto l'immagine ogni volta che i controlli di prendere il focus.
• il margine destro è quello di assicurarsi i colori di sfondo creare quadrati e rettangoli (il che non accadrebbe con le etichette adiacenti che condividono lo stesso colore di sfondo).

Risultato

Valutazione

1/5
2/5
3/5
4/5
5/5

Tocco finale

• Usiamo la pseudo-classe :hover per creare qualche effetto rollover,
• Abbiamo nascondere il bordo fieldset,
• Abbiamo nascondere la legenda,
• Noi lo stile del cursore.

Markup

Immutato

CSS

 br { display:none; } label { position:relative; height:1.4em; width:1.4em; overflow:hidden; float:left; background:teal; margin-right:1px; text-indent:-999em; } input { position:absolute; left:-999em; top:.5em; } img { width:2.8em; height:1.4em; position:absolute; top:0; left:0;   cursor: pointer; 
 }
 . No_star {
   background: # ccc;
 }
 . No_star img {
   a sinistra:-1.4em;
 }
  label: hover {
  opacità: 0,5;
  filter: alpha (opacity = 50);
 }
 fieldset {
  border: 0;
 }
 {leggenda
  text-indent:-999em;
 } 

Nota: label:hover è ignorato da IE6 e Opera sanguina colorare lo sfondo attraverso le immagini. Nella pagina demo , invece di usare opacity , sto usando un altro sprite che mostra quattro stati.

Risultato

Valutazione

1/5
2/5
3/5
4/5
5/5

Visualizzazione delle valutazioni, senza consentire l'interazione dell'utente

Possiamo fare i rating "read-only" con l'aggiunta di disabled e checked gli attributi, nell'ambito degli adeguati input campi.

Markup

 <fieldset> <legend>Rating</legend> <label><img src="img/small-sprite.gif" width="0" height="1" alt="stars"><input type="radio" name="movie" value="1_5"   disabile   > 1/5 </ label> <br>
   <label> <img src="img/small-sprite.gif" width="0" height="1" alt="stars"> <input type = nome di "radio" value = "movie" = "2_5"   disabile   > 2/5 </ label> <br>
   <label> <img src="img/small-sprite.gif" width="0" height="1" alt="stars"> <input type = nome di "radio" value = "movie" = "3_5" selezionata = "   verificato   "> 3/5 </ label> <br>
   <label class="no_star"> <img src="img/small-sprite.gif" width="0" height="1" alt="stars"> <input type = nome di "radio" = "movie" value = "4_5"   disabile   > 4/5 </ label> <br>
   <label class="no_star"> <img src="img/small-sprite.gif" width="0" height="1" alt="stars"> <input type = nome di "radio" = "movie" value = "5_5"   disabile   > 5/5 </ label>
 </ Fieldset> 

CSS

La regola con :hover è stato rimosso

Valutazione

1/5
2/5
3/5
4/5
5/5

Dare maggiore attenzione al processo di

A questo punto, è possibile votare senza il supporto degli script, ma gli utenti vedenti non hanno alcun indizio circa la loro selezione. Quindi usiamo JavaScript per:

• dare un feedback per l'utente per quanto riguarda la sua scelta,
• dare agli utenti la tastiera di un indizio visivo mentre navigare attraverso i pulsanti di opzione.

Allo stesso tempo, prendiamo vantaggio di utilizzare uno script per inserire il title attributi che creeranno "suggerimenti" al passaggio del mouse sulle etichette / stelle.

A causa della mancanza di selezione per quanto riguarda il feedback senza JavaScript, abbiamo etichette stile e la forma controlla solo se vi è il supporto degli script. Per farlo usiamo JavaScript per impostare una bandiera sul html elemento e poi creare una regola in base a selettori discendenti che contengono quel gancio. Se il flag è mancante, tale regola non si applica e gli elementi non sono in stile.

Questa è la pagina demo , il prodotto finale. Per vedere come si comporta questa soluzione secondo le varie impostazioni, si consiglia di utilizzare gli strumenti di sviluppo preferiti per aumentare la dimensione del testo, rompere percorsi delle immagini, disabilitare JavaScript, CSS girare off, e molto altro ...

Avvolgere

Venendo con una soluzione "accettabile" richiede di identificare i bisogni, gli interpreti degli utenti le peculiarità, le impostazioni di User agent e che sempre più - il che significa test approfonditi.

In questo processo, il feedback degli utenti è essenziale, perché a seguito di buone pratiche non sempre è una cosa sicura. Per esempio, come accennato in precedenza, l'impostazione alcun valore per l' alt attributo delle immagini all'interno delle etichette sembrano essere la cosa sicura da fare, ma si scopre che crea problemi con almeno due screen reader (vedi caso di prova ).

Inoltre, il feedback da parte degli utenti dei dispositivi di assistenza permette di ignorare alcuni messaggi di errore di convalida - come quella che i rapporti di accessibilità Toolbar per Firefox (secondo http://bestpractices.cita.uiuc.edu/html/nav/form/ ).

L'obiettivo qui non è stato quello di risolvere tutto, però. Essere in grado di votare senza un dispositivo di puntamento è stata una delle mie priorità, ma migliorando l'aspetto della soluzione in Opera quando le immagini sono disabilitati non è qualcosa che io considero essenziale.

La parte più interessante di questo "viaggio" è stato quello di rendere la soluzione accessibile a molti utenti in condizioni diverse, affrontando temi quali:

• immagini off,
• javascript off,
• CSS off,
• una combinazione di quanto sopra.

E 'anche bello sapere che questa tecnica si basa su img elementi piuttosto che immagini di sfondo, che permette alle stelle di:

• si ridimensiona in base alle impostazioni dell'utente,
• mostrano in modalità contrasto elevato,
• da stampare di default (a differenza di immagini di sfondo).

Tutto questo avviene senza sacrificare le prestazioni, in quanto questa soluzione si basa su questa singola sprite:

Fine trovare

Recentemente ho scoperto il sistema Amazon ha costruito per la sua pagina di voto. E 'piuttosto interessante, visto che servono una soluzione diversa a seconda del supporto script. Se vi è il supporto script, che usano l'immagine <map> (approccio interessante), se non c'è supporto per gli script che usano i pulsanti di opzione. In entrambi i casi, la soluzione è accessibile agli utenti tastiera, e questo consente di ottimizzare l'accesso a una funzionalità che è un nucleo di differenziazione per la piattaforma Amazon.

Si noti che non usano JavaScript per sostituire i pulsanti di opzione con una immagine <map> , invece, usano noscript elementi in cui tabella di markup contiene pulsanti di opzione.

"Out of the box" soluzioni

Dreamweaver ^®

Valutazione Spry Widget

YUI

Stella Script di valutazione per YUI

Stella script di Potenza con YUI

JQuery

Half-Star Rating Plugin

jQuery Ajax Rater

Semplice Star System Valutazione

5 punteggio star system in PHP, MySQL e jQuery

WordPress

GD Star System Valutazione per WordPress

GD Star Rating

Star Rating per le recensioni

Flash

5 Star rating componente del sistema

Varie.

Come una star rating dovrebbe essere

Starry widget di 2

Un ringraziamento speciale

Un ringraziamento speciale a Victor Tsaran e Kloots Todd per il loro prezioso feedback.

Trova le conversazioni: bloglines | technorati

Condividi ed estendere: Segnalibro con Del.icio.us | Digg it! | reddit!