ワンランク上【謎】のアクセシビリティを確保するための18【嘘】のポイント

代替テキストは基本中の基本ながら「適切な代替テキストとは」を突き詰めるとW3Cの文書がひとつできてしまうくらいには奥の深いものです。とくにHTML5では限定的ながらimg要素のalt属性が省略できるケースがあるなど[1]、文法的な変化も見られます。

ですが、従来のHTML仕様書ではalt属性についてほんの一文でしか説明されていなかったのに比べて、HTML5では専用の節を設けて様々なケースごとに詳細な説明がなされています。代替テキストをどう書くか迷ったらまずはHTML5の仕様書を読んでみるとよいでしょう。

日本語訳はこちら。

• 4.8.2.1 イメージの代替として作用するテキストを提供するための要件(www.html5.jp)（HTML5 の翻訳）
• 4.8.1.1 画像に対して代替として動作するテキストを提供に対する要件(momdo.s35.xrea.com)（HTML 5.1 の翻訳）
• HTML5: 有用な代替テキストを提供するためのテクニック(momdo.s35.xrea.com)（Techniques for providing useful text alternatives の翻訳）

この他、以下のような解説文書も参考になると思います。

• altはつけるだけじゃなくて(yuugop.com)
• ASCII.jp：サンプルで学ぶHTML5の仕様変更要素・中編 (1/3)｜浜 俊太朗のHTML5マークアップ移行ガイド(ascii.jp)

この話はすでに1日目にneotagさんが書かれている(d.hatena.ne.jp)ので、負の属性値について簡単に。

HTML5におけるtabindex属性について、 HTML 4.01 からはこんな変更がなされています。

• 従来は a や input など一部の要素にしか付けられなかったのに対して、グローバル属性となった
• 従来は 0〜32767 という制約があったが、負の整数も可能になった

例えば <div id="box1" tabindex="-1"></div> とすると、ユーザーのTabキー操作では無視されますが、JavaScriptから document.getElementById("box1").focus(); でフォーカスさせることは可能となります。

HTML 4.01ではtable要素にsummary属性があり、スクリーンリーダーなどの非視覚メディアへ表の要約を提供できるようになっていました。

HTML5にも当初summary属性は存在はしていたのですが、要約が必要なほど複雑な表であるならば、それは支援技術を必要とするユーザーだけでなくすべての人にとって有用であるといった理由から、caption要素やfigcaption要素を使った例が示されており、結局この属性は2011年5月25日版で廃止されました。

WAI-ARIAって何よ、といった概念的な話や基本的な使い方については省略させていただきます。去年と今年の Advent Calendar でもいくつか記事があるのでそちらを参照ください。

• role属性とaria-*属性（WAI-ARIA）について【HTML5 Advent Calendar 2012 Day 9】 - E-riverstyle Vanguard(blog.e-riverstyle.com)
• I am mitsuruog: HTML5のセマンティックとWAI-ARIAでWebの未来がおもしろい件(blog.mitsuruog.info)

さて、WAI-ARIAのロールとステートにはHTMLに定義されている要素・属性と同じ意味合いを持つものがあります。例えばlinkロールはhref属性のあるa要素と同じなので、わざわざ <a href="hoge" role="link"> と書く必要はありません。

HTML5の仕様書では、WAI-ARIAの章にHTMLの要素・属性とARIAセマンティックの関係性を記した一覧表があるので、それを参照するとよいでしょう。

一方、HTML5で登場した新しい要素や属性の場合、ブラウザや支援技術の対応状況からあえて明記したほうが良いケースもあります。Using WAI-ARIA in HTML にはRecommended ARIA usage by HTML language featureという表があり、明示的にデフォルトのARIAのセマンティクスを定義する必要があるか否かの情報が掲載されています。

一例として、HTML5の仕様では「articleまたはsection要素の子孫ではないheader要素は banner role である」と定義されていますが、この表では「Should authors explicitly define default ARIA semantics?」の列が "YES" となっているので、ページヘッダーをheader要素でマークアップする場合も <header role="banner"> と書いたほうが（現時点では）より望ましいということになります。

最後に、代替テキストについて思っていることを2つ書かせていただきたいと思います。あくまで私の個人的な意見なので、「こうすべきだ」と主張するつもりはありません。

過度に丁寧な言い回しをする意味はあるのか

§

よく別窓などのちょっとしたアイコンで過度に丁寧な代替テキストが設定されているケースを見かけます。

<li><a href="http://example.com/">○○社<img src="newwin.png" alt="（別ウィンドウで開きます）"/></a></li>
<li><a href="foo.pdf">××について<img src="pdf.png" alt="（PDFファイルです）"/></a></li>

これらは「（別窓）」「（PDF）」だけで意味は充分伝わるのではないでしょうか。とくにリンクアイコンはページ内に頻出することも多いので、なるべく簡素にしたほうが良いと思っています。

text-transform: uppercase を活用したいけど

§

例えばAdobeが配布しているAdobe Readerのダウンロードアイコン(www.adobe.com)の画像は、「Get ADOBE READER」と製品名がすべて大文字（アッパーケース）で書かれています。

しかし、これをimg要素で埋め込む際の代替テキストは alt="Get Adobe Reader" とすべきだと考えています。そもそも製品名は「Adobe Reader」なので、バナー画像のテキストがアッパーケースとなっているのはあくまで装飾の意味合いと思われ、そのような見た目の制御はスタイルシートで行うのが自然かと。

すなわち、.adobe-icon { text-transform: uppercase } のような指定をしたいところですが[2]、残念なことに多くのブラウザはimg要素に対して text-transform が効かないようです。CSS 2.1 の仕様では、text-transformの適用対象は「all elements」なのでimg要素に対しても効くのが正しいと思うのですが、IEのtext-transform(msdn.microsoft.com)にはimg要素やobject要素は含まれていません。Chrome や Opera も同様で、メジャーなブラウザでは Firefox しか効かないようです。

とはいえ代替テキストの視覚的な表示まで気にするユーザーはほとんどいないでしょうし、たいていの場合は見た目の再現にはこだわらず正しい表記で問題ないと思います。

• これは本来、正しい表記とはなにかという話で、アクセシビリティの問題ではないのですが、代替テキストでこういうケースをよく見かけるのであえて書かせていただいた次第です。