ヤフーユーザーインターフェイスブログ（YUIBlog）

アクセスホテルランクウィジェットを開発

中| 9:00 2010年8月24日には、ティエリKoblentzによって午前アクセシビリティ 、 開発 | 18コメント

急いで？ ナビゲーションをスキップデモページ 。

多くのeコマースサイト、ソーシャル·ネットワーキング·サービス、オンライン·コミュニティは、評価や評価機能が含まれています。 勧誘の人の意見もビジネスモデルになっており、定格の製品、サービス、企業、それ以上に専用のサイトが存在することになります。

票を表示するために使用される最も一般的なインタフェースがポイント（多くの場合、星のように表される）特定の数は、各校閲者が項目に割り当てられているの "星の評価システム"です。 我々は、AmazonからYelpに、多くのサイトでこのモデルを見つける。

として、 図 、マークアップベースがショーを、両方の視覚的なインタフェースが似ていますが、何がこれら2つのソリューションは、 興味深いものです。 一つは、依存している<map> 、上の他<img> 。

あなたは、ほとんどの評価システムは、多くのユーザエージェント間のセマンティックと "運用"であることが証明され、いくつかのマークアップに基づいていると思うかもしれない - それは評価システムが1つの動作を適用するHTML要素および属性の特定のセットに基づいてされることであり、 JSとCSSを介したスタイル。 それは理にかなっているが、それは真実から遠く離れている。 それがマークアップになると、著者らは、ちょうど約すべてを試してみてください。

• <a> 、
• <img> 、
• <span> 、
• <li> 、
• <map> 、
• <div> 、
• <input> 、
• など...

マイクロフォーマットの場合

評価をマークアップするためにいくつかの画像ベースの手法を提示する前に、私はそれが基本的かつ直接的なアプローチ（から言及する価値があると思うマイクロフォーマット 文字を使用しています ）：

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

プロ

それは簡単とセマンティックです。

マークアップは最小限で済みます。

メソッドは、CSSに依存していません。

方法は、画像に依存していません。

はHTTPリクエストはありません。

短所

（すなわち、3.5つ星）の半分の値を表現することは不可能である

それだけではアスタリスク（ "星評価"）と "作品"。

スクリーンリーダーは、デフォルトでは、（このケースでは大したことないかもしれませんが）略語を展開していない。

注意 ：スクリーンリーダーは、（少なくともので、私はむしろ★（★）より"*"を使用しJAWSとNVDA ）は、HTMLエンティティを無視するように見える。

イメージベースの評価を表示するには、マークアップ

それは画像を表示するとなると、著者は多くのオプションがあります。

評価1枚に1画像

単一のイメージを使用する：

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

一つ星

二つの星

三ツ星

4つ星

五つ星

プロ

評価ごとに1つのイメージを使用するのは簡単とセマンティックです。

メソッドは、CSSに依存していません。

最小限のマークアップ。

短所

多くの異なったイメージがあるので、それは多くのHTTPリクエストを作成します。

著者は多くのアセット（イメージ時にサイトの色の変更変更するには、CDNにプッシュするために、作成する、など）に対処しなければならないとして、パフォーマンスの問題の上に、それはメンテナンスの悪夢にすることができます。

代替テキストは無視されているテキストを選択すると、オペラ（少なくともバージョン9.52で） ことはできません

単位あたり1つの画像

WHATWG 'sからのワーキングドラフト ：

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

一つ星

二つの星

三ツ星

4つ星

五つ星

プロ

2を使用してimg評価ごとの要素は、HTTP要求の数を減少させる。

メソッドは、CSSに依存していません。

短所

オペラでは、画像が無効になっている場合、 代替テキストは選択できません、と（小画面表示）で、そのテキストはそれ以下読みやすくなり境界線が描画されます。

これは物議を醸すのワーキングドラフトから取られることに注意してください。 代替テキストは、 正確かつ簡潔にイメージを説明していませんので、私の考えでは、このメソッドは許容できません。 また、このアプローチの基本は、これらのイメージは、コンテンツを表していることであれば、理由なしでそれらのいくつかを残すaltテキスト？

にAjaxian例えば、著者は、彼はそれぞれがコンテンツであることを考慮すれば理にかなっているすべての単一のイメージ 、で代替テキストを使用しています：

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

いずれにせよ、単一の要素を使用して対星があるように多くの画像として使用する（ imgまたは他の何か）投票機構を容易にする主な利点を持っている-ユーザは自分の投票をキャストするスターの一人を選択する場所。 だから我々はこれを覚えておくべき...

背景画像のスプライト

次のテクニックは、もともとの開発者によって実装された戦略を適応したものですヤフー 音楽 ：

マークアップ

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

一つ星

5の1

二つの星

5の2

三ツ星

5の3

4つ星

5星中の4星

五つ星

5の5

プロ

このメソッドは、単一のスプライトのイメージに依存している単一のHTTPリクエストを必要とします。

最小限の "フットプリント"。

短所

コンテンツは画像をオフにして明らかにされていません。

何もページが（印刷スタイルシートは、この問題の世話をすることができます）印刷するときに表示しません。

オペラでは、コントラストの高いスタイルシートは、すべての星が消えます;同じで真であるハイコントラストモードの最適化 。

（ハイライトを介して）テキストの選択が可能ですが、それは明確ではありません。

マークアップ内のスプライト

このアプローチは基づいているTIP法を使用し、 スプライト画像として<img>要素ではなく、背景画像：

マークアップ

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

一つ星

5のうち1

二つの星

5のうち2

三ツ星

5のうち3

4つ星

4 5のうち

五つ星

5のうち5

プロ

このメソッドは、単一のHTTPリクエストを必要とします。

この手法では、Firefoxユーザーは"非表示の画像"または"画像が見えないように"（開発者のツールバーから）選択したときに内容を明らかに上記の4つの方法のひとつに過ぎません。

それが依存する他のソリューションの場合のようにイメージが使用できない場合、赤い"x"は、それぞれの代わりに、最高評価（5すなわち5位）にのみ表示されますimg要素。

短所

画像の表示は、CSSに依存しています。

それは他の画像置換のテクニックとは異なり、このメソッドは許可されている注目に値する。

• 画像は、テキストサイズの設定に応じて拡張できます。
• 画像が出力されます。
• 簡単に全体像として選択される代替テキストは、（Firefox）の強調表示されます。
• 画像は、高コントラストの設定/スタイルシートで消えないし。
• Operaの代替テキストの選択（画像が無効になっている場合）。
• Operaのスモールスクリーン表示でボーダレス代替テキスト。

票を投じるようにマークアップ

ネイティブメカニズムで始まる

票を投じるために、我々は、単純なユーザーの選択と提出することができ、低レベルの投票メカニズムを必要としています。 このため、我々は、ラベルとコントロールを持つフォームを使用して頼ることができます。

マークアップ

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

結果

評価

1月5日 2月5日 3月5日 4月5日 5月5日

追加改行と空白

優れた読みやすさのために、私たちは追加<br>と空白を。

マークアップ

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

結果

評価

1月5日
2月5日
3月5日
4月5日
5月5日

マークアップでスプライトのイメージを導入

このソリューションでは、我々は上記の例では1より小さいスプライトを使用しています。 それは今で構成されている2つの星 （ "オン"と"オフ"）。

我々は置くimgラベル内の要素を。 我々は、彼らが我々は彼らを介して特定の寸 ​​法を設定することにより、それらを"隠す"ため、CSSのサポートなしで値を持たないと仮定widthとheight属性を指定します。 を使用していることに注意してください0両方の属性を持つことは、いくつかの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> 

上記のマークアップで、我々は（ほとんどのブラウザで）ラベルを選択を介してフィールドの選択を期待できることに注意してください。

アクセシビリティを考慮し

： は残念ながら、このマークアップは、少なくとも2つのスクリーンリーダーで問題を作成し、 JAWSとNVDA （参照テストケースこれらのバグのためにを参照）。 この問題は、の使用に関連しているtitle属性と代替テキストは空の文字列。

スクリーン·リーダー·ユーザーを混乱しないようにこの問題を回避するには、代替テキスト（ "星"を使用することであるalt ）を挿入するにはJavaScriptを使用してtitle マウスで。

優れたマークアップ

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

結果

評価

1月5日
2月5日
3月5日
4月5日
5月5日

スタイリング

CSSを介して画像に寸法を与える

我々は使用emイメージフォントサイズに応じて拡張または縮小できるようにします。

マークアップ

変わらない

CSS

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

結果

評価

1月5日
2月5日
3月5日
4月5日
5月5日

既に見ることができるように、画像をクリックすると、対応するラジオボタンを選択します。 暗黙の標識は、この動作を（IEを除く）を生成し、スクリプティングの必要はありません。

流れからイメージを削除する

スタイリングlabelとposition:relativeとした画像position:absoluteのtop / leftの値は、非表示にするに十分であるinputラベルの内側と、テキストを。

マークアップ

変わらない

CSS

 ラベル{ 
   位置：相対;
 } 
 IMG {
  幅：2.8em;
  高さ：1.4em;
   位置：絶対; 
   トップ：0; 
   左：0; 
 } 

結果

評価

1月5日
2月5日
3月5日
4月5日
5月5日

ラベルごとに1つ星を表示する

私たちはスタイルのラベルを、その寸法は、単一の星の高さと幅を一致させるようにします。

マークアップ

変わらない

CSS

 label { position:relative;  高さ：1.4em;
 幅：1.4em;
 オーバーフロー：隠された;
 表示：ブロック; 
 }
 IMG {
  幅：2.8em;
  高さ：1.4em;
  位置：絶対;
  トップ：0;
  左：0;
 } 

結果

評価

1月5日
2月5日
3月5日
4月5日
5月5日

水平方向の星を表示する

我々は削除br sを、我々は、ラベルをフロートさせます。

マークアップ

変わらない

CSS

  BR {
 ディスプレイ：なし;
 } 
ラベル{
  位置：相対;
  高さ：1.4em;
  幅：1.4em;
  オーバーフロー：隠された;
   表示：ブロック; 
   フロート：左; 
 }
 IMG {
  幅：2.8em;
  高さ：1.4em;
  位置：絶対;
  トップ：0;
  左：0;
 } 

結果

評価

1月5日
2月5日
3月5日
4月5日
5月5日

評価に応じてスプライト画像を表示する

評価 "5のうち3つの"を設定するために、我々は最後の二つのラベルに同じクラスを適用します。 このクラスは、ラベル内の画像の位置をシフトします。

マークアップ

 <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  クラス= "no_star"   > <img src="img/small-sprite.gif" width="0" height="1" alt="stars"> <input type="radio" name="movie" value="4_5"> 4 / 5 </ラベル> <br>
 <ラベル  クラス= "no_star"   > <img src="img/small-sprite.gif" width="0" height="1" alt="stars"> <input type="radio" name="movie" value="5_5"> 5 / 5 </ラベル>
 </ 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 {
 左：-1.4em;
 } 

結果

評価

1月5日
2月5日
3月5日
4月5日
5月5日

情報を表示するだけで画像に依存しない

それは画像が利用できない場合にはすべてのディスプレイへの選択肢を提供することが重要です。 ラベルやラジオボタンが互いの上にあるようにスタイリングされているためです。 簡単な解決方法は、移動することですinput （つまり、使用してテキストをオフスクリーンtext-indent:-999em ）とラベルに背景色を適用します。

マークアップ

変更なし

CSS

 br { display:none; } label { position:relative; height:1.4em; width:1.4em; overflow:hidden; float:left;  背景：ティール。
 マージン右：1pxの。
 テキストインデント： -  999em。 
 }
 IMG {
  幅：2.8em;
  高さ：1.4em;
  位置：絶対;
  トップ：0;
  左：0;
 }
  。no_star {
 背景：＃cccの;
 } 
 。no_star IMG {
  左：-1.4em;
 } 

注 ：

• text-indentも上向きには、イメージのコントロールがフォーカスを取得するたびにジャンプが修正されています。
• 右マージンは背景色が正方形ではなく、矩形を（同じ背景色を共有する隣接したラベルで起こるでしょう）を作成を確認することです。

結果

評価

1月5日
2月5日
3月5日
4月5日
5月5日

タッチ仕上げ

• 我々は、擬似クラスを使用して:hover 、いくつかのロールオーバー効果を作成する
• 我々は、fieldset要素のボーダーを非表示
• 我々は、凡例を非表示
• 我々は、スタイルにカーソルを。

マークアップ

変わらない

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;  カーソル：ポインタ; 
 }
 。no_star {
  背景：＃cccの;
 }
 。no_star IMG {
  左：-1.4em;
 }
 ラベル：ホバー{
 不透明度：0.5;
 フィルタ：アルファ（不透明度= 50）;
 }
 fieldset要素{
 国境：0;
 }
伝説{
 テキストインデント： -  999em。
 } 

注 ： label:hover画像を介してIE6とOperaで背景色の出血では無視されます。 でデモ·ページは、代わりに使用するのではopacity 、私が使用して別のスプライト 4つの状態を示しています。

結果

評価

1月5日
2月5日
3月5日
4月5日
5月5日

ユーザーとの対話を可能にすることなく、評価を表示する

我々は、追加することによって、 "読み取り専用"の評価を行うことができますdisabledしてchecked 、適切に属性をinputフィールド。

マークアップ

 <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日</ラベル> <br>
   <label>は<img src="img/small-sprite.gif" width="0" height="1" alt="stars"> <入力タイプ= "ラジオ"名前= "映画"値= "2_5"  無効にする   > 2月5日</ラベル> <br>
   <label>は<img src="img/small-sprite.gif" width="0" height="1" alt="stars"> <入力タイプ= "ラジオ"名前= "映画"値= "3_5"にチェック= "  チェック   "> 3月5日</ラベル> <br>
   <label class="no_star"> <img src="img/small-sprite.gif" width="0" height="1" alt="stars"> <入力タイプ= "ラジオ"名前= "映画"の値= "4_5"  無効にする   > 4月5日</ラベル> <br>
   <label class="no_star"> <img src="img/small-sprite.gif" width="0" height="1" alt="stars"> <入力タイプ= "ラジオ"名前= "映画"の値= "5_5"  無効にする   > 5月5日</ラベル>
 </ fieldset要素> 

CSS

使用してルール:hover削除されました

H4>結果

評価

1月5日
2月5日
3月5日
4月5日
5月5日

プロセスに多くの思考を与え

この時点では、スクリプトのサポートなしで投票をすることは可能ですが、晴眼者ユーザーは自分の選択についての見当がつかない。 だから我々はにJavaScriptを使用します。

• 、彼の選択に関してユーザーにフィードバックを与える
• 彼らはラジオボタンをナビゲートするときにキーボードのユーザーに視覚的な手掛かりを与える。

同時に、我々は挿入するスクリプトを使用することの利点を取るtitle 、ユーザーがラベル/星にカーソルを合わせると"ツールチップ"を作成する属性を。

JavaScriptをせずに選択に関するフィードバックの不足のため、我々のスタイルのラベルとフォーム·コントロールのスクリプトのサポートがある場合のみ 。 我々はフラグを設定するには、JavaScriptを使用してこれを行うにはhtml要素とし、我々はそのフックを含む子孫セレクタに基づいてルールを作成します。 フラグが指定されていない場合、そのルールは適用されないと要素が表されていない 。

これは、 デモページ 、最終的な製品。 このソリューションは、さまざまな設定に応じてどのように動作するかを確認するには、テキストサイズを増やしてイメージのパスを破るには、JavaScriptを無効にするには、CSSの電源をオフにし、より多くのためにお好みの開発ツールを使用することができます...

包む

"許容できる"ソリューションを考え出すことは、ユーザーのニーズ、ユーザエージェント "の特殊性、ユーザエージェントの設定や詳細情報を識別する必要があります - これは、広範なテストを意味します。

ベストプラクティスに従うことが常に確実なものではないため、このプロセスでは、ユーザのフィードバックが不可欠である。 例えば、のために値を設定しませんが、前述のようにaltラベル内の画像の属性を行うための安全なものになるように見えるが、それは少なくとも2つのスクリーンリーダー（参照の問題を作成することが判明したテストケースを ）。

また、補助デバイスのユーザーからのフィードバックは、いくつかの検証エラーメッセージを無視することができます- 1つとして、Firefoxのアクセシビリティツールバーのレポート（に従ってhttp://bestpractices.cita.uiuc.edu/html/nav/form/ ）。

ここでの目標は、しかし、すべてを修正することはなかった。 ポインティング·デバイスなしで票を投じることができることが私の最優先課題の一つであったが、画像が無効になっているOperaのソリューションのルックアンドフィールを向上させ、私は不可欠と考えるものではありません。

この "旅"の中で最も興味深い部分は、次のような問題に対処する、様々な条件下で多くのユーザーへのソリューションにアクセスできるようにすることでした。

• 画像オフ、
• JavaScriptをオフ、
• CSSオフ、
• 上記の組み合わせ。

それは、この技法が依存しているかを知ることもいいですimgむしろ星が可能になります背景画像よりも要素：

• は、ユーザーの設定に従って、自分自身のサイズを変更する
• ハイコントラストモードでshow、
• デフォルトでは、印刷される（背景画像とは異なります）。

このソリューションは、この単一のスプライトに依存しているとして、このすべてが、パフォーマンスを犠牲にせずに付属しています。

遅く見つける

私は最近、Amazonがその投票ページ用に構築したシステムを発見しました。 彼らはスクリプトのサポートに応じてさまざまなソリューションを提供するとして、それはかなり興味深いものです。 スクリプトのサポートがある場合、それらは画像の使用<map>彼らはラジオボタンを使用しないスクリプトのサポートがない場合は、（興味深いアプローチ）。 両方のケースで、このソリューションは、キーボードのユーザーにアクセス可能で、これはAmazonのプラットフォームの差別化コアである機能へのアクセスを最大化することができます。

彼らは画像とラジオボタンを置き換えるためにJavaScriptを使用しないことに注意してください<map>はなく、彼らが使用noscriptマークアップは、ラジオボタンが含まれているテーブル内の要素を。

"アウトボックス"ソリューション

^{Dreamweaver®の}

Spryの評価ウィジェット

YUI

YUIのためのランクスクリプト

YUIのランクスクリプト

jQueryの

ハーフ星評価プラグイン

アハトのjQueryのAjax

シンプルな星の評価システム

PHP、MySQLとjQueryで5つ星の評価システム

ワードプレス

WordPress用GD星の評価システム

GD星評価

レビューのためのランク

フラッシュ

5つ星評価システムのコンポーネント

その他。

星の評価はどうあるべきか

星空ウィジェット2

特別な感謝

彼らの貴重なフィードバックのためにビクターTsaranとトッドKlootsに感謝します。

会話を検索： Bloglinesの | テクノラティ

共有および拡張： del.icio.usでブックマーク | Diggそれ！ | reddit！