Blog Interface utilisateur Yahoo! (YUIBlog)

Développer une étoile Accessible Widget Notes

Vous êtes pressé? Passer à la page de démonstration .

De nombreux sites e-commerce, les services de réseaux sociaux, et des communautés en ligne incluent des fonctionnalités de notation ou d'évaluation. Solliciter l'opinion des gens est même devenu un modèle d'affaires, il ya maintenant des sites dédiés à la notation des produits, des services, des entreprises, et plus encore.

L'interface la plus courante utilisée pour afficher votes est le "système d'étoiles", dans lequel un nombre particulier de points (souvent exprimée en étoiles) est assignée à un élément par chaque évaluateur. Nous trouvons ce modèle sur de nombreux sites, d'Amazon à Yelp.

Figure exemples A. étoiles par Amazon et Yelp .

Comme la figure A montre, les deux interfaces visuelles sont similaires, mais ce qui rend ces deux solutions est intéressant, c'est de leur base de balisage. Un repose sur <map> , l'autre sur <img> .

Vous pourriez penser que la plupart des systèmes de notation serait basée sur des balises avéré sémantique et «opérationnelle» à travers de nombreux agents utilisateurs - qui est, que les systèmes de notation serait basée sur un ensemble spécifique d'éléments et attributs HTML à laquelle on applique le comportement et style via JS et CSS. Ce serait logique, mais il est loin de la vérité. Quand il s'agit de balisage, les auteurs tentent à peu près tout:

• <a> ,
• <img> ,
• <span> ,
• <li> ,
• <map> ,
• <div> ,
• <input> ,
• et plus encore ...

Le cas des Microformats

Avant de présenter quelques images des techniques basées sur de marquer votes, je pense qu'il est utile de mentionner une approche de base et simple (à partir de microformats ) qui utilise des caractères:

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

Avantages

Il est simple et sémantique.

Le balisage est minime.

La méthode n'est pas tributaire de CSS.

La méthode n'est pas tributaire des images.

Il n'ya pas de requête HTTP.

Contre

Il est impossible de représenter les valeurs de la moitié (soit 3,5 étoiles)

Il "fonctionne" seulement avec des astérisques ("étoiles").

Les lecteurs d'écran, par défaut, ne pas développer les abréviations (qui peut ne pas être un gros problème dans ce cas).

Remarque: j'utilise "*" plutôt que ★ (★) parce les lecteurs d'écran (au moins JAWS et NVDA ) semblent ignorer les entités html.

Markup pour afficher l'image à base de votes

Quand il s'agit d'afficher des images, les auteurs ont beaucoup d'options.

Une image par note

En utilisant une seule image:

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

Une étoile

Deux étoiles

Trois étoiles

Quatre étoiles

Cinq étoiles

Avantages

Utiliser une image par notation est simple et sémantique.

La méthode n'est pas tributaire de CSS.

Balisage minimal.

Contre

Il crée de nombreuses requêtes HTTP car il ya beaucoup de différentes images.

En plus du problème de performances, il peut être un cauchemar de maintenance que les auteurs doivent faire face à davantage d'actifs (des images pour créer, pour pousser à un CDN, de modifier les couleurs du site lors du changement, etc.)

La sélection de texte n'est pas possible dans l'Opéra (au moins dans la version 9.52) que le texte de remplacement est ignorée

Une image par unité de

De la whatwg l ' ébauche de travail :

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

Une étoile

Deux étoiles

Trois étoiles

Quatre étoiles

Cinq étoiles

Avantages

L'utilisation de deux img éléments par note diminue le nombre de requêtes HTTP.

La méthode n'est pas tributaire de CSS.

Contre

Dans Opera, lorsque les images sont désactivées, le texte de remplacement n'est pas sélectionnable, et (dans une petite écran) que le texte est rendu avec une frontière qui le rend moins lisible.

Notez que cela est pris à partir d'un projet de travail controversée. À mon avis, cette méthode n'est pas acceptable parce que le texte de remplacement ne décrit pas l'image exacte et succincte. D'ailleurs, si la base de cette approche est que ces images représentent le contenu, alors pourquoi laisser certains d'entre eux sans alt texte?

Sur Ajaxian , par exemple, l'auteur utilise un texte de remplacement pour chaque image unique, ce qui fait beaucoup de sens s'il estime que chacun est contenu:

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

En tout cas, en utilisant autant d'images qu'il ya d'étoiles par rapport à l'aide d'un seul élément (un img ou autre chose) a pour principal avantage de faciliter les mécanismes de vote -, où l'utilisateur sélectionne l'une des étoiles pour exercer son vote. Donc, nous devons garder cela à l'esprit ...

Un sprite pour les images d'arrière-plan

La technique suivante est une adaptation d'une stratégie de mise en œuvre à l'origine par les développeurs de Yahoo! Musique :

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

Une étoile

1 5

Deux étoiles

2 5

Trois étoiles

3 5

Quatre étoiles

4 5

Cinq étoiles

5 5

Avantages

Cette méthode nécessite une seule requête HTTP car il repose sur une image sprite unique.

Minimal "empreinte".

Contre

Le contenu n'est pas révélé au large avec des images.

Rien ne montre lorsque la page est imprimée (une feuille de style d'impression pourrait prendre soin de cette question).

Dans Opera, la feuille de style à contraste élevé rend toutes les étoiles disparaissent; la même chose est vraie dans l'optimisation du contraste en mode haute .

La sélection de texte est possible, mais il n'est pas évident (par l'intermédiaire surbrillance).

Un sprite dans le balisage

Cette approche est basée sur la méthode de la pointe , qui utilise une image du sprite comme un <img> élément plutôt que d'une image d'arrière-plan:

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

Une étoile

1 sur 5

Deux étoiles

2 sur 5

Trois étoiles

3 à 5

Quatre étoiles

4 sur 5

Cinq étoiles

5 sur 5

Avantages

Cette méthode nécessite une seule requête HTTP.

Cette technique est la seule des quatre méthodes ci-dessus qui révèle le contenu lorsque les utilisateurs Firefox, sélectionnez "cacher les images" ou "make images invisibles" (à partir de la barre d'outils du développeur).

Lorsque les images ne sont pas disponibles d'un rouge "x" n'apparaît que dans la plus haute cote (soit 5 sur 5) au lieu de chacun d'eux comme c'est le cas avec d'autres solutions qui reposent sur img éléments.

Contre

L'affichage des images est tributaire de CSS.

Il est à noter que, contrairement à d'autres techniques de remplacement d'image, cette méthode permet:

• images à l'échelle en fonction de paramètres de taille de texte.
• images à imprimer.
• un texte de remplacement pour être facilement sélectionné comme l'image entière apparaît en surbrillance (Firefox).
• l'image de ne pas disparaître dans un cadre à haut contraste / feuille de style.
• la sélection de texte de remplacement dans Opera (lorsque les images sont désactivées).
• frontières texte alternatif en vue d'Opera petit écran.

Markup de voter

À partir d'un mécanisme natif

Pour voter, il nous faut un mécanisme de vote de bas niveau qui permet la sélection utilisateur simple et la soumission. Pour cela, nous pouvons compter sur l'aide d'un formulaire avec des étiquettes et des contrôles:

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> 

Résulter

Ajout de pauses et les espaces

Pour une meilleure lisibilité, nous ajoutons <br> et les espaces.

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> 

Résulter

Présentation de l'image du sprite dans le balisage

Pour cette solution, nous utilisons un petit sprite que celle dans l'exemple ci-dessus. Il est maintenant composé de deux étoiles simples ("on" et "off").

Nous mettons img éléments à l'intérieur des étiquettes. Nous supposons qu'ils n'auront pas de valeur sans soutien CSS suffisant, ce qui nous «cacher» leur mise en dimensions spécifiques par l'intermédiaire de leur width et height des attributs. Notez que l'utilisation 0 avec les deux attributs qui montrent une image brisée dans certains 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> 

Notez que le balisage ci-dessus, nous pouvons nous attendre (dans la plupart des navigateurs) de sélection de champ via la sélection étiquette.

Considérant l'accessibilité

Malheureusement, comme c'est, ce balisage crée des problèmes dans au moins deux lecteurs d'écran: JAWS et NVDA (voir cas de test pour ces bogues). Le problème est lié à l'utilisation d'un title d'attribut et une chaîne vide pour le texte de remplacement.

La solution de contournement à ne pas confondre lecteur d'écran des utilisateurs est d'utiliser "stars" comme texte alternatif ( alt ) et d'utiliser JavaScript pour insérer title sur mouseover.

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

Résulter

Classement

Un cinquième
2/5
3/5
4/5
5/5

Coiffant

Donner les dimensions de l'image via CSS

Nous utilisons em pour permettre à l'image pour agrandir ou rétrécir en fonction de la taille des caractères.

Markup

Inchangé

CSS

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

Résulter

Classement

Un cinquième
2/5
3/5
4/5
5/5

Comme vous pouvez le voir déjà, en cliquant sur une image sélectionne le bouton radio correspondant. Il n'est pas nécessaire pour les scripts que l'étiquetage implicite produit ce comportement (sauf dans IE).

Enlever l'image à partir de l'écoulement

Styling l' label avec position:relative et l'image avec position:absolute avec top / left des valeurs est assez pour cacher input et le texte à l'intérieur des étiquettes.

Markup

Inchangé

CSS

  label { 
    position: relative;
 } 
 img {
   Largeur: 2.8em;
   hauteur: 1.4em;
    position: absolute; 
    top: 0; 
    left: 0; 
 } 

Résulter

Classement

Un cinquième
2/5
3/5
4/5
5/5

Affichage d'une étoile par étiquette

Nous le style de l'étiquette de sorte que ses dimensions correspondent à la hauteur et la largeur d'une seule étoile.

Markup

Inchangé

CSS

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

Résulter

Classement

Un cinquième
2/5
3/5
4/5
5/5

Affichage des étoiles horizontalement

Nous enlevons le br s et nous faire flotter les étiquettes.

Markup

Inchangé

CSS

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

Résulter

Classement

Un cinquième
2/5
3/5
4/5
5/5

Affichage de l'image sprite en fonction de la cote

Pour définir un "3 sur 5" Note, nous appliquons la même classe au cours des deux dernières étiquettes. Cette classe sera décaler la position de l'image à l'intérieur de l'étiquette.

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 {
  à gauche:-1.4em;
 } 

Résulter

Classement

Un cinquième
2/5
3/5
4/5
5/5

Ne pas se fier sur l'image seule pour afficher des informations

Il est important d'offrir une alternative à l'affichage d'étoiles dans le cas des images ne sont pas disponibles. C'est parce que les étiquettes et les boutons radio sont de style pour être au top de l'autre. Une solution simple consiste à déplacer input et le texte hors de l'écran (à l'aide text-indent:-999em ) et d'appliquer une couleur de fond sur les étiquettes.

Markup

Pas de changement

CSS

 br { display:none; } label { position:relative; height:1.4em; width:1.4em; overflow:hidden; float:left;   arrière-plan: sarcelle;
  margin-right: 1px;
  text-indent:-999em; 
 }
 img {
   Largeur: 2.8em;
   hauteur: 1.4em;
   position: absolute;
   top: 0;
   left: 0;
 }
  . No_star {
  background: # ccc;
 } 
 . No_star img {
   à gauche:-1.4em;
 } 

Note:

• text-indent fixe également un haut saut de l'image à chaque fois que les contrôles obtiennent le focus.
• la marge de droite est de s'assurer que les couleurs de fond et non pas créer des carrés des rectangles (qui se passerait avec des étiquettes adjacentes partageant la même couleur de fond).

Résulter

Classement

Un cinquième
2/5
3/5
4/5
5/5

Finition

• Nous utilisons la pseudo-classe :hover pour créer un effet de survol,
• Nous nous cachons la frontière fieldset,
• Nous nous cachons la légende,
• Nous le style du curseur.

Markup

Inchangé

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 {
   à gauche:-1.4em;
 }
  label: hover {
  opacité: 0,5;
  filter: alpha (opacity = 50);
 }
 fieldset {
  marge: 0;
 }
 la légende {
  text-indent:-999em;
 } 

Remarque: label:hover est ignoré par IE6 et Opera les saignements de couleur de fond à travers les images. Dans la page de démonstration , au lieu d'utiliser opacity , je me sers d'un sprite différent qui montre quatre états.

Résulter

Classement

Un cinquième
2/5
3/5
4/5
5/5

Affichage des notes sans interaction de l'utilisateur permettant

Nous pouvons faire les évaluations "lecture seule" en ajoutant disabled et checked dans les attributs appropriés input des champs.

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"   handicapé   > 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"   handicapé   > 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" cochée = "   vérifié   "> 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"   handicapé   > 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"   handicapé   > 5/5 </ label>
 </ Fieldset> 

CSS

La règle à l'aide :hover a été supprimé

Classement

Un cinquième
2/5
3/5
4/5
5/5

Donner plus de pensée dans le processus

À ce stade, il est possible de voter sans le soutien de script, mais les utilisateurs voyants n'ont aucune idée au sujet de leur sélection. Nous avons donc utiliser JavaScript pour:

• améliorer les informations à l'utilisateur au sujet de son choix,
• donner aux utilisateurs une indication visuelle du clavier pendant qu'ils naviguer à travers les boutons radio.

Dans le même temps, nous profitons de l'aide d'un script à insérer title des attributs qui vont créer une "info-bulles" lorsque les utilisateurs pointent sur ​​les étiquettes ou les étoiles.

En raison de l'absence de sélection des commentaires concernant sans JavaScript, nous étiquettes style et la forme ne contrôle que s'il ya un soutien script. Pour ce faire, nous utilisons JavaScript afin de définir un indicateur sur le html élément, puis nous créons une règle basée sur les sélecteurs descendants contenant que le crochet. Si le drapeau est absent, cette règle ne s'applique pas et les éléments ne sont pas coiffés.

Il s'agit de la page de démonstration , le produit final. Pour voir comment cette solution se comporte selon divers paramètres, vous pouvez utiliser vos outils de développement préférés pour augmenter la taille du texte, casser les chemins d'image, désactiver JavaScript, CSS tourner hors, et plus encore ...

Envelopper

Venir avec un "acceptable" solution nécessite d'identifier les besoins, les agents utilisateurs des utilisateurs particularités, les paramètres utilisateur et les agents plus - ce qui signifie des tests approfondis.

Dans ce processus, la rétroaction des utilisateurs est essentielle, car suivant les meilleures pratiques n'est pas toujours une chose sûre. Par exemple, comme mentionné précédemment, la mise en aucune valeur pour le alt attribut des images dans les étiquettes semblent être la chose sûre à faire, mais il s'avère que cela crée des problèmes avec au moins deux lecteurs d'écran (voir cas de test ).

En outre, la rétroaction des utilisateurs des appareils et accessoires fonctionnels permet d'ignorer certains messages d'erreur de validation - que celui que les rapports de Firefox la barre d'outils d'accessibilité (en fonction de http://bestpractices.cita.uiuc.edu/html/nav/form/ ).

Le but ici n'était pas de tout réparer, si. Être en mesure de voter sans un dispositif de pointage est une de mes priorités, mais l'amélioration de l'apparence et la sensation de la solution dans l'Opéra où les images sont désactivées n'est pas quelque chose que je considère essentiel.

La partie la plus intéressante de ce «voyage» était de rendre la solution accessible à de nombreux utilisateurs dans des conditions différentes, abordant des questions telles que:

• images de congé,
• javascript off,
• CSS hors tension,
• une combinaison de ce qui précède.

Il est également bon de savoir que cette technique repose sur img éléments plutôt que des images de fond, ce qui permet aux étoiles de:

• se redimensionnent en fonction des paramètres de l'utilisateur,
• montrent en mode de contraste élevé,
• être imprimé par défaut (contrairement aux images d'arrière-plan).

Tout cela vient sans sacrifier les performances, comme cette solution repose sur ce sprite unique:

Fin trouver

J'ai récemment découvert le système Amazon a construit pour sa page de vote. Il est assez intéressant car ils servent une solution différente en fonction de support de script. S'il ya un appui script, ils utilisent une image <map> (approche intéressante), s'il n'ya pas de support de script qu'ils utilisent des boutons radio. Dans les deux cas, la solution est accessible aux utilisateurs du clavier, ce qui contribue à maximiser l'accès à une fonctionnalité qui est un noyau de différenciation pour la plateforme Amazon.

Notez qu'ils ne sont pas utiliser JavaScript pour remplacer les boutons radio avec une image <map> ; au lieu, ils utilisent noscript éléments dans la table qui contient le balisage des boutons radio.

"Out of the box" des solutions

Dreamweaver ^®

Spry Note Widget

YUI

Script étoiles pour YUI

Script de Star Rating avec YUI

JQuery

Plugin Note demi-étoile

jQuery évaluateur Ajax

Simple système d'étoiles

5 Système étoiles en PHP, MySQL et jQuery

WordPress

Système GD Star Rating pour WordPress

GD Star Rating

Star Rating pour avis

Flash

5 composant du système d 'étoiles

Divers.

Comment un classement par étoiles doit être

Starry widget 2

Des remerciements spéciaux

Un merci spécial à Victor Tsaran et Kloots Todd pour leurs précieux commentaires.

Trouver des conversations: bloglines | technorati

Partagez et étendre: Créer un signet avec del.icio.us | digg it! | reddit!