uga.dev - A Front-end Engineer's shed

../１つ上のページへ戻る

原文：https://pauljadam.com/demos/accessiblenameimg.html

※このページは動作確認用ページです。一部アクセシビリティに配慮していないコンテンツが含まれます。

DEMO一覧に戻るPaulJAdam.comでさらに詳しく（外部サイト）

img要素のアクセシブルネームの計算

HTML to Platform Accessibility APIs Implementation Guide によると、WAI-ARIA属性はimg要素のアクセシブルネームの計算に含まれます。ただし、常に最も堅牢な属性を利用して実装することが最善です。

アクセシブルネームの計算順序は次の通りです。

  1. aria-labelledby属性を利用する
  2. それがなければaria-label属性値を参照する
  3. それがなければalt属性値を参照する
  4. それがなければtitle属性値を参照する
  5. いずれも使用可能なテキストが得られない場合、このimg要素にアクセシブルネームはありません。

OS・UA・ATのサポート状況

  • OS X 10.9.2 + Safari + VoiceOver
  • iOS 7 + Mobile Safari + VoiceOver
  • Windows 7 + Firefox 28 + NVDA 2013.1
  • Windows 7 + Internet Explorer 8 + JAWS 14.0.1832
  • Android 4.4.2 + Chrome 34.01847.114 + TalkBack 3.5.1
  • Android 4.4.2 + Firefox 29.0.1 + TalkBack 3.5.1

Support Notes

iOSおよびOS X用のVoiceOverでは、オプションの「イメージをナビゲート」で「常にする」「説明付き」「しない」の３項目を選ぶことができます。「説明付き」とはアクセシブルネームを持つ画像のことです。

VoiceOverは、デフォルトだとアクセシブルネームを持たないimg要素の場合、画像のファイル名を読み上げます。NVDA及びJAWSは、画像のファイル名を読み上げることはありません。故に、アクセシブルネームを持たない画像がページに存在することをユーザは知ることができません。AndroidのChromeではアクセシブルネームのない画像は無視され、Firefoxでは「graphic」として読み込まれます。

aria-labelledby属性を利用した例

ペニーバッカー橋（aria-labelledby属性経由）

aria-label属性を利用した例

alt属性を利用した例

ペニーバッカー橋（alt属性指定）

title属性を利用した例

アクセシブルネームを持たない例

Android版FirefoxとTalkBackを使用してスクリーンリータが出力した様子のスクリーンショット

TalkBack reads "Pennybacker Bridge via title attribute graphic"