3

私たちのウェブアプリでは★、評価を表すために色付きの星（★別名）を使用しています。したがって、最初の4つの星は単色になり、最後の星は白になり、5つ星のうち4つの評価を表します。

ここに画像の説明を入力してください

  • これは、アクセシビリティとサポートの観点からどのような懸念を引き起こしますか？
  • ユーザーのブラウザのフォントのバージョンがこの文字をサポートしていることを確認できません。これに「グレースフルデグラデーション」を提供する方法は何ですか？それとも、これが問題にならないほどカバレッジは良好ですか？
  • これはスクリーンリーダーによってどのように「レンダリング」されますか？評価をラップすると、<span title="4 out of 5">より多くのアクセシビリティが提供されますか？
4

4 に答える 4

6

見出しの一般的な質問は非常に広いです。簡単に説明すると、主な懸念事項はフォントの問題です。これはかなり深刻な場合があり、実際には適切な劣化はありません。より長い答えについては、HTMLで特殊文字を使用するためのガイドを参照してください。

色付きの星に関する具体的な質問ははるかに単純です。簡単な答えは、それぞれ色付きの星の数が異なる5つの画像を使用する強い理由があるということです。alt次に、のような意味のある属性を使用できalt="four stars"、物事はかなり確実に機能します。img背景画像の代替テキストを指定する方法がないため、これらは（を介して）コンテンツ画像である必要があります。

BLACK STARの「★」文字を使用する可能性を考慮すると、そのフォントのサポートは特に悪くはありませんが、あまり普及していません。それを含むフォントを持っているコンピュータの割合を見つける簡単な方法はありません。さらに、文字がシステム内の一部のフォントに存在する場合、その外観は大きく異なる可能性があります。この特定の文字の場合、グリフはかなり似ていると予想できますが、サイズは異なります。

コンテキストで本当に記号をテキスト文字として使用する必要がある場合は、リスクを冒す必要があるかもしれませんが、ここでは記号が実際にテキストに含まれているのではなくテキストに付随しているため、画像を使用しても問題ありません。

埋め込みフォントを使用する@font-faceことは可能ですが、ここではやり過ぎに聞こえます。

スクリーンリーダーは、特殊文字の扱いが大きく異なります。一般に、一部の人間の言語で通常のテキストを読むように設計されており、特殊文字を意味のある形で話すことができない場合がよくあります。文字の名前を言っただけでも、まったく意味がありません。属性は話されるtitle場合がありますが、通常はオプションとしてのみであり、ユーザーはそのようなオプションの存在に気付かない場合があります。

画像はいくつかのHTTPリクエストを引き起こしますが、これはわずかな影響または無視できる影響です。（CSSスプライトを使用することもできますが、このような単純なケースではほとんど役に立ちません。）通常、画像は適切にキャッシュされます。必要に応じて、img要素の高さをem単位で設定するなどして、テキストサイズに合わせて拡大縮小できます（幅を設定しないため、幅と高さの比率が維持されるように拡大縮小されます）。

于 2012-10-23T21:14:12.950 に答える
0

全体的な互換性を最大限に高めるには、画像を使用してください。あなたはそれがどのように見えるかを知っています、アクセシビリティの懸念は簡単です、そしてあなたは様々な機能のためのブラウザのサポートについて心配する必要はありません。

于 2012-10-23T19:32:38.307 に答える
0

実験したくない場合は、Jukkasのアドバイスに従い、要素を使用する必要があると思いますimg。

何らかの理由でUnicodeスター記号を使用する場合は、アクセス可能にする必要があります。あなたの説明によると、私はあなたが現在このようなことをしていると思います：

<div class="rating">
  <span>★★★★</span>★
</div>

<!-- CSS: .rating span {color:yellow;} -->

この例では、評価のセマンティクスをマークアップしていないため、スクリーンリーダーやその他のユーザーエージェントはその意味を「理解」（発表）できません。評価スコアは色でのみ記述されます→これにはアクセスできません。

考えられる方法はabbr要素の使用ですが、このユースケースでは定義が広すぎる可能性があります（「5つ星は本当に評価スコアの略語ですか？」）：

<div class="rating">
  <abbr title="rating of 4 out of 5"><span>★★★★</span>★&lt;/abbr>
</div>

<!-- CSS: .rating span {color:yellow;} -->
于 2012-10-24T15:44:40.317 に答える
-1

fontsquirrelの@font-faceを使用できます。評価が変わらない場合は、Photoshopなどのプログラムを使用して画像を作成し、背景画像として使用してみてはどうでしょうか。スパンのタイトルは良いものではありません。後で評価を変更した場合はどうなりますか。その後、すべてのタイトル属性を変更する必要があります。「評価」のようなもっと一般的なタイトルを作ります。ページのコンテンツに評価が絶対に必要でない場合は、JavaScriptを使用して評価を表示することを検討してください。そうすれば、実際にHTMLを変更することはないため、セキュリティ上の懸念に対処する必要があります。

于 2012-10-23T19:26:55.403 に答える