web-dev-qa-db-ja.com

text-as-graphicsにalt属性を使用しても大丈夫ですか？

デザイナーが決めたフォントでWebページにテキストを表示する方法はいくつかあります。画像、フラッシュハック、一部のJavaScriptハック、ダイナミックフォント。しかし、今日に至るまで、すべてのプラットフォームで一見機能しているのは古いグラフィックスとしてのテキストソリューションだけです。もちろん、これはkludgeですが、アクセシビリティの目的で、テキストを含む画像を代替属性として使用しても問題ないと考えていますか？視覚障害のあるユーザーは、検索エンジンと同様にテキストを取得します。それとも何か不足していますか？

website-designfontaccessibility
9
Zano

いくつかの注意点があります。

  • 将来的にイメージを変更する場合、altattributeも維持する必要があります。
  • 検索エンジン より高い値を割り当てる は、alt属性のある画像よりも実際のテキストに見えるようです。
  • IMO、これをナビゲーションに使用している場合は、@ font-faceまたはJavaScriptを使用して、最初から画像に置き換えるのではなく、テキストメニューを拡張したほうがよいでしょう。
7
Virtuosi Media

スクリーンリーダーとロボットにとって、それは代替手段です

9
Sruly

If HTMLに（imgを介して）画像を含め、alwaysalt属性を使用します（sometimeswith空の値）。

If画像にテキストが含まれており、このテキストが伝えたい関連コンテンツ（の一部）である場合、このテキストをalt値に含めます。

しかし、アクセシビリティの目的で、テキストを含む画像を代替属性として使用しても問題ないと考えられますか？

いいえ。ブラインドユーザーやテキストブラウザーユーザーのバリアにはなりませんが、失読症または視覚障害のあるユーザー（画像が有効になっているユーザー）は、テキスト画像に問題がある可能性があります。

  • ユーザーは、フォントサイズ、行の高さ、文字の間隔を調整できません。
  • ユーザーはフォントファミリーを変更できません。
  • ユーザーは色やコントラストを変更できません。
  • ユーザーはテキストを選択できません（コピーアンドペーストなど）。 （ noted byKit Grose）

おそらく短いテキスト（単一のWord、非常に短い見出し、行動を促すフレーズのボタンなど）の場合はそれほど問題にはなりませんが、長いテキストに使用するとアクセシビリティの障壁になる可能性があります。

5
unor

グラフィックスとしてのテキストの最大の欠点の1つは、テキストサイズで拡大縮小できないことです（注：ズームではなくテキストサイズ）。 emsで画像のサイズを変更すると、これを軽減できる場合があります。

また、イメージを動的に生成しない限り、イメージを使用する場合は保守性が大幅に低下することに注意してください。

また、カスタムフォントだけが必要な場合に画像を提供するのはかなり非効率的です。画像のファイルサイズは、同等のテキストよりもLOT大きくなります。

4
Bobby Jack

問題ありません。それが悪い考えだと誰かが言うのを聞いたことがありません。 しかし回避するか、以下を実行してください：

  • ページのコンテンツ全体を画像にする（何をしているのかを知らない人が犯す一般的な間違い）-これにより、検索エンジンを含め、ほとんどすべての解析が困難になります
  • できるだけ避けるようにしてください。イメージするものにテキストを使用するほうがいいです。すべてのことを簡単にするだけです（テキストのチャンク、SEOなどのコピー）
  • altプロパティとtitleプロパティの両方を追加します。これにより、ユーザーが画像にカーソルを合わせると、ツールチップが表示されます（ブラウザーによってブラウザーが異なるため）。私はほとんどがリンクである画像でこれを行います
1
Darryl Hein

他の人が言ったように、このアプローチを使用する場合、代替テキストを提供する必要がありますが、使用しないことを強くお勧めします。

  • ズームが壊れます-ラスターイメージは大きなサイズに拡張できません。

  • 画像はテキストよりも多くのスペースを取るため、ページの読み込み時間が大幅に増加します。

  • ブラウザの色を変更するビューア。読みやすさのために、暗い場所でハイコントラストライトに変更すると、画像が正しく表示されず、ALTが表示されません。

  • コピーと貼り付けの機能は無効になります（ユーザーはテキストをコピーしてテキストとしてドキュメントに貼り付けることができなくなります）。

  • レイアウトと応答性-モバイルデバイスでの可読性が損なわれる可能性があります-テキストがテキストでない場合、ブラウザーは、小さなディスプレイに合わせるために、テキストを別の行に分割できない場合があります。

  • 各単語または文を独自の画像に配置すると、レイアウトが改善される可能性がありますが、テキスト分析（SEO）が壊れる可能性があります。

  • CSSとフォントファイルを使用して表示フォントを適用する一般的にサポートされている方法があります。いくつかの古いブラウザがこれをサポートしていない場合、最新のブラウザのすべてのユーザーに彼らのために苦労させるべきではありません。

0
Danny Varod

代替テキストの値はSEOの観点から減少しているため、アクセシビリティに焦点を当て、スクリーンリーダーの代替テキストを最適化できるようです。

私の知る限り、それはあなたのSERPランキングに影響を与えるのは数パーセントだけです

0
Roland Pokornyik