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

Web Accessibility Advent Calendar 2013(www.adventar.org)の8日目の記事です。

ウェブ制作におけるアクセシビリティについて、マークアップでのありがちなことなどを取り留めもなく書いていきたいと思います。

記事タイトルは釣りなので18もありません。あと、どこかで似たようなタイトルを見たことがあってもたぶん気のせいです。ゆるしてヒヤシンス。

代替テキストを書く

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

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

日本語訳はこちら。

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

複雑な図表の代替テキスト

個人的にいつも悩むのが図表などで長々とした説明が必要なケースです。alt属性はあくまで属性なので、あまり長い文章をだらだら書くのは良くないと思います。では「長い」とはどれくらいのものを指すのかというと、先に挙げた Techniques for providing useful text alternatives にこんな説明があります。

the general consensus is that if the text alternative is longer than 75-100 characters (1 to 2 sentences), it should not be considered a short text alternative and should not be presented using the alt attribute or the figcaption element (in the case where it provides a text alternative for an image).

4.1.3 How long should a text alternative be?(www.w3.org)

75~100文字を超える場合は(この数値はあくまで目安ですが)、構造化マークアップを使用して(tableやul等で)代替テキストを提供する方法も検討すると良いでしょう。

画像が表示できる環境では代替テキストを表示したくない場合はimg要素ではなくobject要素を使うことができます。

ただ、この方法にも以下のような欠点があります。悩ましいですね。

キーボード操作に対応する

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

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

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

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

表の要約

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

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

WAI-ARIAを設定する

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

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

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

一方、HTML5で登場した新しい要素や属性の場合、ブラウザや支援技術の対応状況からあえて明記したほうが良いケースもあります。Using WAI-ARIA in HTML にはRecommended ARIA usage by HTML language feature(www.w3.org)という表があり、明示的にデフォルトの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」と製品名がすべて大文字(アッパーケース)で書かれています。

オリジナル画像
図1Adobe Readerのダウンロードアイコン

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

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

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

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

  • [1]HTML 5.1 の 4.8.1.1.15(www.w3.org)では、ユーザーが画像をアップロードする写真共有サイトなど、著者が適切な代替テキストを提供できない場合においてalt属性を省略する例が示されています。
  • [2]それだと「Get」までアッパーケースになってしまいますが、今回はあくまで例として出しただけなので細かいことは気にしない方向で…。