Yahoo! User Interface Blog (YUIBlog)

Die Entwicklung von behindertengerechten Sterne-Bewertungen Widget

24. August 2010 um 9:00 Uhr von Thierry Koblentz | In Barrierefreiheit , Entwicklung | 18 Kommentare

Haben Sie es eilig? Skip to the Demo-Seite .

Viele E-Commerce-Sites, Social-Networking-Dienste und Online-Communities beinhalten Bewertung oder Beurteilung Funktionen. Soliciting die Meinung der Leute hat sich auch zu einem Geschäftsmodell, es gibt jetzt auch Websites gewidmet Rating Produkte, Dienstleistungen, Geschäfte und vieles mehr.

Die häufigste Schnittstelle verwendet, um anzuzeigen Stimmen ist das "Sterne-System", in denen eine bestimmte Anzahl von Punkten (oft als Sterne ausgedrückt) auf einen Posten von jedem Gutachter zugewiesen wird. Wir finden dieses Modell an vielen Standorten, von Amazon zu Yelp.

Wie Abbildung A zeigt, sind beide visuelle Schnittstellen ähnlich, aber was macht diese beiden Lösungen interessant ist ihre Basis-Markup. Man verlässt sich auf <map> , die andere auf <img> .

Man könnte denken, dass die meisten Rating-Systeme würden auf irgendeiner Markup bewiesen, dass semantische und "operational" über viele Anwenderprogramme gestützt werden - das heißt, dass Rating-Systeme zu einem bestimmten Satz von HTML-Elemente und Attribute, die man trifft Verhalten beruhen würde und Stil über JS und CSS. Das würde Sinn machen, aber es ist weit von der Wahrheit. Wenn es um die Markup kommt, versuchen Autoren so ziemlich alles:

• <a> ,
• <img> ,
• <span> ,
• <li> ,
• <map> ,
• <div> ,
• <input> ,
• und mehr ...

Der Fall von Microformats

Vor der Vorstellung ein paar Image-basierte Techniken zur Markierung Bewertungen, ich denke es ist erwähnenswert, eine grundlegende und einfache Ansatz (von Microformats ), die Zeichen setzt:

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

Pros

Es ist unkompliziert und semantischen.

Das Markup ist minimal.

Die Methode ist nicht abhängig von CSS.

Die Methode ist nicht angewiesen auf die Bilder.

Es gibt keine HTTP-Anforderung.

Cons

Es ist unmöglich, halbe Werte (dh 3,5 Sternen) repräsentieren

Es "funktioniert" nur mit Sternchen ("Sterne").

Screen-Reader, die standardmäßig Abkürzungen nicht (was nicht eine große Sache in diesem Fall sein).

Hinweis: Ich verwende "*" statt ★ (★), da Screen-Reader (mindestens JAWS und NVDA ) in HTML-Entitäten zu ignorieren scheinen.

Markup für die Anzeige bildbasierte Bewertungen

Wenn es um die Darstellung von Bildern geht, haben Autoren viele Möglichkeiten.

Ein Bild pro Rating

Mit einem einzigen Bild:

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

Ein Stern

Zwei Sterne

Drei Sterne

Vier Sterne

Fünf Sterne

Pros

Mit einem Bild pro Rating ist unkompliziert und semantische.

Die Methode ist nicht abhängig von CSS.

Minimal-Markup.

Cons

Es schafft viele HTTP-Anforderungen, da es viele verschiedene Bilder sind.

Auf der Oberseite des Performance-Problem, kann es ein Albtraum sein, wie Autoren mit mehr Vermögen umzugehen (Bilder zu erstellen, um zu einem EUR zu drücken, zu modifizieren, wenn vor Ort Farben ändern, etc.) haben.

Textauswahl ist nicht in Opera (zumindest in der Version 9.52) möglich, da der alternative Text wird ignoriert

Ein Bild pro Einheit

Von der WHATWG 's Working Draft :

 <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"> 

Ein Stern

Zwei Sterne

Drei Sterne

Vier Sterne

Fünf Sterne

Pros

Mit Hilfe von zwei img -Elemente pro Rating verringert die Anzahl der HTTP-Requests.

Die Methode ist nicht abhängig von CSS.

Cons

In Opera, wenn Bilder deaktiviert sind, ist alternativen Text nicht wählbar, und (in kleinen Bildschirm-Ansicht) wird dieser Text mit einer Grenze, die es weniger gut lesbar macht gerendert.

Beachten Sie, dass diese aus einem umstrittenen Arbeitsentwurf genommen wird. Meiner Meinung nach, ist dieses Verfahren nicht akzeptabel, da der alternative Text nicht beschreibt das Bild genau und prägnant. Außerdem, wenn die Grundlage dieses Ansatzes ist, dass diese Bilder Inhalt darstellen, warum dann verlassen einige von ihnen ohne alt -Text?

Auf Ajaxian , zum Beispiel, wird der Autor mit alternativen Text mit jedem einzelnen Bild, das sehr viel Sinn macht, wenn er, dass jeder Inhalt ist der Auffassung:

 <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 jedem Fall, egal wie viele Bilder, wie es Sterne im Vergleich mit einem einzigen Element (eine gibt img oder etwas anderes) hat den Hauptvorteil der Erleichterung Abstimmungsmechanismen - wo ein Benutzer wählt einen der Sterne, um seine Stimme abzugeben. Also sollten wir dies im Auge behalten ...

Ein Sprite für Hintergrundbilder

Die folgende Technik ist eine Anpassung der Strategie umgesetzt ursprünglich von den Entwicklern bei Yahoo! Musik :

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; } 

Ein Stern

1 von 5

Zwei Sterne

2 von 5

Drei Sterne

3 von 5

Vier Sterne

4 von 5

Fünf Sterne

5 von 5

Pros

Diese Methode erfordert einen einzelnen HTTP-Anfrage, wie es auf einem einzelnen Sprite Bild setzt.

Minimal "Fußabdruck".

Cons

Der Inhalt wird nicht mit Bildern aus offenbart.

Nichts zeigt, wenn die Seite gedruckt wird (ein Druck-Stylesheet könnte Pflege dieser Frage).

In Opera, macht der hohe Kontrast Stylesheet alle Sterne verschwinden, das gleiche gilt in wahre High Contrast Modus Optimierung .

Textauswahl ist möglich, aber es ist nicht offensichtlich (via Hervorhebung).

Ein Sprite im Markup

Dieser Ansatz basiert auf der TIP-Methode , die eine nutzt Sprites Bild als <img> Element anstelle eines Hintergrundbildes:

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; } 

Ein Stern

1 von 5

Zwei Sterne

2 von 5

Drei Sterne

3 von 5

Vier Sterne

4 von 5

Fünf Sterne

5 von 5

Pros

Diese Methode erfordert einen einzelnen HTTP-Anforderung.

Diese Technik ist die einzige der vier oben genannten Methoden, die Inhalte enthüllt, wenn Firefox-Nutzer "Bilder ausblenden" oder "Bilder machen unsichtbar" (aus der Entwickler-Toolbar) zu wählen.

Wenn Bilder nicht verfügbar sind, ein rotes "X" erscheint nur in der höchsten Bewertung (dh 5 von 5) statt in einem jeden, wie es der Fall mit anderen Lösungen, die sich verlassen ist img -Elemente.

Cons

Die Anzeige der Bilder ist abhängig CSS.

Es ist erwähnenswert, dass im Gegensatz zu anderen Image Replacement Techniken erlaubt diese Methode:

• Bilder zu skalieren, je nach Text-Format-Einstellungen.
• Bilder gedruckt werden.
• alternativen Text auf einfache Weise gewählt werden, wie das gesamte Bild erscheint hervorgehoben (Firefox).
• das Bild nicht in einem High-Kontrast-Einstellung / Stylesheet verschwinden.
• Alternativtext Auswahl in Opera (wenn Bilder deaktiviert sind).
• randlose alternativen Text in kleinen Bildschirm Opera Sicht.

Markup, um Stimmen

Beginnend mit einer nativen Mechanismus

Um Stimmen, brauchen wir eine Low-Level-Voting-Mechanismus, die einfache Benutzeroberfläche ermöglicht die Auswahl und Unterwerfung. Dazu können wir auf über ein Formular mit Etiketten und Kontrollen verlassen:

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> 

Folge

Bewertung

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

Hinzufügen von Pausen und Leerzeichen

Zur besseren Lesbarkeit, fügen wir <br> und Leerzeichen.

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> 

Folge

Bewertung

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

Einführung in das Sprite-Bild im Markup

Bei dieser Lösung werden wir die Verwendung einer kleineren Sprite als die in dem obigen Beispiel. Es wird jetzt zusammen aus zwei einzelnen Sterne ("on" und "off").

Wir legen img -Elemente innerhalb der Etiketten. Wir nehmen an, sie werden keinen Wert ohne CSS-Unterstützung haben, damit wir "verstecken" sie, indem sie spezifische Dimensionen über ihre width und height Attributen. Beachten Sie, dass mit 0 mit beiden Attributen würde ein fehlerhaftes Bild in einigen UA s zeigen.

 <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> 

Beachten Sie, dass mit dem oben Markup, wir erwarten können (in den meisten Browsern) Feldauswahl via Etikett Auswahl.

Angesichts Barrierefreiheit

Leider, wie ist, schafft dies Markup Probleme in mindestens zwei Screen-Reader: JAWS und NVDA (siehe Testfall für diese Fehler). Das Problem ist auf die Verwendung eines verwandten title -Attribut und einer leeren Zeichenfolge für alternativen Text.

Der Workaround, um nicht zu verwirren die Nutzer von Screenreadern ist es, "Stars" als alternativen Text (mit alt ) und verwenden JavaScript, um einfügen title beim Mouseover.

Besser 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> 

Folge

Bewertung

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

Styling

Giving Dimensionen des Bildes via CSS

Wir verwenden em , um das Bild zu wachsen oder je nach font-size schrumpfen.

Markup

Unverändert

CSS

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

Folge

Bewertung

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

Wie Sie bereits sehen können, klicken Sie auf ein Bild, wählt den entsprechenden Radio-Button. Es besteht keine Notwendigkeit für Skriptsprachen wie implizite Kennzeichnung produziert dieses Verhalten (außer im IE).

Entfernen des Bildes von der Strömung

Styling das label mit position:relative und das Bild mit position:absolute mit top / left Werte ist genug, um zu verbergen input und Text innerhalb der Etiketten.

Markup

Unverändert

CSS

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

Folge

Bewertung

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

Angezeigte einem Stern pro Etikett

Wir Stil das Label so seinen Abmessungen entsprechen der Höhe und Breite eines einzelnen Sterns.

Markup

Unverändert

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;
 } 

Folge

Bewertung

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

Zeige die Sterne horizontal

Wir entfernen die br s, und wir schweben die Etiketten.

Markup

Unverändert

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;
 } 

Folge

Bewertung

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

Anzeigen der Sprite Bild je nach Bewertung

Um eine "3 von 5" gesetzt Rating, wenden wir die gleiche Klasse auf die letzten beiden Labels. Diese Klasse wird verlegen die Position des Bildes innerhalb des Etiketts.

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>
 <Etikett   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 {
  links:-1.4em;
 } 

Folge

Bewertung

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

Nicht allein unter Berufung auf Bild, um Informationen anzuzeigen

Es ist wichtig, eine Alternative zur Anzeige von Sternen bieten bei Bilder nicht verfügbar sind. Dies liegt daran, Labels und Radio-Buttons gestaltet werden, um auf der jeweils anderen zu sein. Eine einfache Lösung ist sich zu bewegen input und Text-off-screen (dh unter Verwendung von text-indent:-999em ) und tragen Sie eine Hintergrundfarbe auf den Etiketten.

Markup

Keine Änderung

CSS

 br { display:none; } label { position:relative; height:1.4em; width:1.4em; overflow:hidden; float:left;   Hintergrund: 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 {
   links:-1.4em;
 } 

Hinweis:

• text-indent behebt auch ein nach oben im Bild zu springen jedes Mal, wenn die Steuerelemente den Fokus erhalten.
• der rechte Rand ist, um sicherzustellen, Hintergrundfarben erstellen Quadrate und Rechtecke nicht (das wäre mit benachbarten Etiketten die sich im selben Hintergrundfarbe passieren).

Folge

Bewertung

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

Schliff

• Wir verwenden die Pseudo-Klasse :hover , einige Rollover-Effekt erstellen,
• Wir verstecken das fieldset Grenze,
• Wir verstecken die Legende,
• Wir Stil des Cursors.

Markup

Unverändert

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 {
   links:-1.4em;
 }
  Label: hover {
  Opazität: 0,5;
  filter: alpha (opacity = 50);
 }
 fieldset {
  border: 0;
 }
 Legende {
  text-indent:-999em;
 } 

Hinweis: label:hover wird von IE6 und Opera in der Hintergrundfarbe blutet durch die Bilder ignoriert. In der Demo-Seite , anstatt opacity , bin ich mit einem unterschiedlichen Sprite , die vier Staaten zeigt.

Folge

Bewertung

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

Anzeige der Bewertungen, ohne dass Benutzer-Interaktion

Wir können die Ratings "read-only", indem disabled und checked Attribute in den entsprechenden input Felder.

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"   deaktiviert   > 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"   deaktiviert   > 5.2 </ label> <br>
   <label> <img src="img/small-sprite.gif" width="0" height="1" alt="stars"> <input type = "radio" name = "movie" value = "3_5" überprüft = "   geprüft   "> 5.3 </ 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"   deaktiviert   > 5.4 </ 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"   deaktiviert   > 5.5 </ label>
 </ Fieldset> 

CSS

Die Regel mit :hover wurde entfernt

h4> Ergebnis

Bewertung

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

Eine bessere Berücksichtigung des Prozesses

An dieser Stelle ist es möglich, Stimmen ohne Script-Unterstützung gegossen, sondern sehende Benutzer haben keine Ahnung über ihre Auswahl. Also haben wir JavaScript verwenden, um:

• Feedback an den Benutzer über seine Auswahl,
• Tastatur geben Benutzern einen visuellen Hinweis, während sie durch die Radio-Buttons navigieren.

Zur gleichen Zeit, nutzen wir mithilfe eines Skripts einfügen title Attribute, die "Tooltips" schaffen wird, wenn Benutzer über die Aufkleber / Sterne schweben.

Wegen des Mangels an Feedback bezüglich Auswahl, ohne JavaScript, steuert man Stil Beschriftung und Formular nur, wenn es Skript-Unterstützung. Um das zu tun, damit wir Sie JavaScript, um eine Flagge auf dem Set zu verwenden html -Element und dann haben wir eine Regel erstellen, auf der untergeordneten Selektoren mit diesem Haken basiert. Wenn die Fahne fehlt, ist diese Regel keine Anwendung, und Elemente sind nicht gestylt.

Dies ist die Demo-Seite , das Endprodukt. Um zu sehen, wie diese Lösung nach diversen Einstellungen verhält, können Sie Ihre Lieblings-Entwickler-Tools verwenden, um Text-Größe zu erhöhen, brechen Bildpfade, deaktivieren Sie JavaScript, CSS-off schalten und vieles mehr ...

Einpacken

Coming up mit einem "akzeptablen" Lösung erfordert, um die Bedürfnisse der Nutzer, User Agents 'Eigenheiten, Anwenderprogramme' Einstellungen und vieles mehr zu identifizieren - was bedeutet, umfangreiche Tests.

In diesem Prozess ist der Nutzer Feedback wichtig, weil nach besten Praktiken ist nicht immer eine sichere Sache. Zum Beispiel, wie bereits erwähnt, setzen keinen Wert für die alt Attribut der Bilder innerhalb der Etiketten scheinen das sichere Sache zu tun, aber es stellt sich heraus, dass es Probleme mit mindestens zwei Screenreader (siehe schafft Testfall ).

Darüber hinaus lässt die Rückmeldungen von Hilfsgeräten 'Benutzer einige Validierung Fehlermeldungen ignorieren - wie die, dass die Firefox Accessibility Toolbar Berichte (nach http://bestpractices.cita.uiuc.edu/html/nav/form/ ).

Ziel war es hier nicht, um alles zu fixieren, though. Die Möglichkeit, Stimmen ohne ein Zeigegerät werfen war eine meiner Prioritäten, sondern die Verbesserung der Optik und der Lösung in Opera, wenn Bilder deaktiviert werden fühlen, ist nicht etwas, was ich für wesentlich halte.

Der interessanteste Teil dieser "Reise" war es, die Lösung zugänglich zu viele Nutzer unter verschiedenen Bedingungen zu machen, auf Fragen wie:

• Bilder aus,
• Javascript ausgeschaltet,
• CSS aus,
• eine Kombination der obigen.

Es ist auch schön zu wissen, dass diese Technik verlässt sich auf img -Elemente statt Hintergrund-Bilder, die die Sterne zu können:

• Größe sich nach den Einstellungen des Benutzers,
• zeigen in kontrastreichen Modus,
• standardmäßig gedruckt werden (im Gegensatz zu Hintergrund-Bilder).

All dies geschieht ohne Performance-Einbußen, da diese Lösung stützt sich auf diese einzelnen Sprite:

Späte Suche nach

Ich habe kürzlich entdeckt das System Amazon für seine Stimmabgabe Seite aufgebaut hat. Es ist recht interessant, da sie eine andere Lösung in Abhängigkeit von Skript-Unterstützung dienen. Wenn es Script-Unterstützung, verwenden sie ein Bild <map> (interessanter Ansatz), wenn es kein Skript Unterstützung, die sie verwenden, Radio-Buttons. In beiden Fällen ist die Lösung zugänglich Tastatur Benutzer, und dies hilft, den Zugriff auf eine Funktion, die einen Kern Unterscheidungsmerkmal für die Amazon-Plattform ist zu maximieren.

Beachten Sie, dass sie nicht verwenden JavaScript, um die Radio-Buttons mit einem Bild ersetzen <map> , sondern verwenden sie noscript Elemente, in denen Tabellen-Markup enthält Optionsfelder.

"Out of the box"-Lösungen

Dreamweaver ^®

Spry-Widget Rating

YUI

Star Rating Script für YUI

Star Rating Script mit YUI

JQuery

Half-Star Rating Plugin

jQuery Ajax Rater

Simple Star Rating System

5-Sterne-Rating-System in PHP, MySQL und jQuery

WordPress

GD Star Rating System für WordPress

GD Star Rating

Star Rating für Bewertungen

Blitz

5-Sterne-Rating-System-Komponente

Misc.

Wie ein Sterne sein sollte

Starry Widget 2

Ein besonderer Dank

Besonderer Dank geht an Victor Tsaran und Todd Kloots für ihr wertvolles Feedback.

Finden Gespräche: Bloglines | technorati

Teilen und zu erweitern: Lesezeichen mit del.icio.us | Digg it! | reddit!