グラフなど一文で表せないような図表画像の代替テキストはどう表現すべきか、仕様とブラウザ実装を見つつ考えてみました。

1. 複雑な図表の代替テキスト
富永 冴樹

2. 複雑な図表の代替テキスト、
どうしていますか?

3. 最近リニューアルされた
サイトを調べてみた

4. NTTデータ
<img src="img/organization_pic_01.png" alt="【図】" />

5. 株式会社レオパレス21
<div class="section">
<div class="boxLeadTxt"><h2>「新しい価値の創造」</h2>
<p class="cld1">1. 時代のニーズをしっかりと見据えながら、柔軟な発想と活力のある全員参画のチームワークで当社にしかできない
新しい価値を創造します。</p>
<p class="cld2">2. お客さまの喜びを、自らの喜びとし、常に商品、サービス、技術を進化させ企業として成長し続けます。</p>
<p class="cld3">3. 業界のリーディングカンパニーとして、より快適な暮らしと豊かな社会づくりに貢献し、社会全体に新しい価値をもた
らします。</p></div>
</div>

6. 株式会社ミツエーリンクス
<div class="lyt_image_3"><img src="img/structure/structure.png" alt="株主総会、取締役会、代表取締役および経営監査室の
下に、管理本部、プロジェクト推進室、R＆D本部、アートディレクション、第一本部（インテグレーションマーケティング）、第二本
部（ウェブインテグレーション）、第三本部（モバイル）、第四本部（ビジネスインテグレーション・ビジネスコミュニケーション）、第
五本部（コンテンツインテグレーション）、第六本部（システム）、第七本部（UX）、第八本部（ウェブインテグレーション）、第九本
部（ソーシャルメディアマーケティング・データアナリシス）、第十本部（ウェブインテグレーション・パートナー）を設置しています。
"></div>

7. 仕様を確認してみよう

8. HTML5

9. altに関する専用の仕様が策定中(WD)
• HTML5: Techniques for providing useful text
alternatives
• HTML5: 有用な代替テキストを提供するため
のテクニック
（時間の関係で）詳細は省略

10. WCAG 2.0

11. WCAG 2.0 ガイドライン 1.1
• 1.1.1 非テキストコンテンツ: 利用者に提示さ
れるすべての非テキストコンテンツには、同
等の目的を果たす代替テキストを提供する。
ただし、次の場合は除く： (レベルA)
WAICによる日本語訳より

12. Understanding WCAG 2.0
達成基準 1.1.1 を理解する
達成基準 1.1.1 を理解する | WCAG 2.0解説書より

13. Understanding WCAG 2.0
達成基準 1.1.1 を理解する
達成基準 1.1.1 を理解する | WCAG 2.0解説書より

14. H53: object要素のボディに代替テキストを記述する
H53: object要素のボディに代替テキストを記述する｜WCAG 2.0 実装方法集より

15. H53は使えないのか!?
IE 6～9 ×
Firefox 9.0 ○
Safari 5.0.3 △
JAWS for Windows 9.0 ×
PC‐Talker XP 3.06 ×
FocusTalk V3 ×
NVDA 2011.1 ×
アクセシビリティ・サポーテッド（AS）情報：H053‐3より

16. 視覚環境ではあまり問題ないのでは
• object要素に高さと幅を指定すると、IEでも画像表示される
– なお、私の環境では高さと幅の指定なしでもIE8, 9では画像表示された
• IE7以下ではスクロールバーが表示されてしまう
– 画像のみの事象で、動画などは問題ない
– IE7以下に対しては、JavaScriptでimg要素に変換しよう
• Chrome23とWindows版Safari5.1では、画像表示オフにしたとき代替テキ
ストが表示されない
– img要素のalt属性値も表示されないので、制作側ではどうしようもないのでは
• ただしChromeでは、img要素に高さと幅を指定している場合のみ、alt属性値が表示される
– 画像表示オンの設定で、画像が読み込めない場合は表示される
– Mac版Safariはどうなのでしょうか? （Mac持っていないので未検証）
• スクリーンリーダーのサポートは悪い
– 最新のNVDAでも読み上げられず
– その他の有料リーダーの最新版はどうでしょうか?
• SVGを使ってみるのは?

17. ありがとうございました