こんにちは！2015年12月23日（水）にAccSellメール・マガジン第80号を発行しました！
- ［連載］中根雅文の「全盲のコンピューター利用に関する四方山話」
- 第77回: 文書作成におけるセマンティクス／コンテンツとプレゼンテーションの分離
- ［連載］植木 真の「こんなブログ記事見つけました！」
- 第38回: 2016年はアクセシビリティの年！ 注目するべき3つのポイント
［連載］植木 真の「こんなブログ記事見つけました！」
第38回: 2016年はアクセシビリティの年！ 注目するべき3つのポイントWebアクセシビリティは機会損失を防ぐ
今回は、2016年はアクセシビリティの年！注目するべき3つのポイントというタイトルの記事を一緒に読んでいきたいと思います。
この記事は、名刺に「アクセシビリティアナリスト」という肩書きも入っているというフロントエンドエンジニアの方が書かれたものです。
Webアクセシビリティは「障害者・高齢者対応」だと思っていませんか？確かにそのような側面が強くありますが、本質は「状況・環境に依存せず、誰もが情報にアクセスしやすくすること」です。
W3Cでアクセシビリティを担当しているWAI（Web Accessibility Initiative）のIntroduction to Web Accessibilityでは、次のように述べています。
Web accessibility means that people with disabilities can use the Web.
「Webアクセシビリティは、障害のある人がWebを使えるようにすることである。」ということで、WebコンテンツのアクセシビリティガイドラインであるW3C勧告の「WCAG 2.0」も、障害のある人が使用できるようにWebコンテンツをこういうふうに作りましょう、という内容です。
ただ、実際にガイドラインに書いてあることは、障害のある人だけに限らず、Webを利用する全ての人にとって、より使いやすく、より分かりやすくなることも少なくありません。デバイスが多様化したり、音声による入力や操作が普及し始めたりしている中、そういった共通点がさらに増えてきているように思います。
そういう意味で、筆者が「状況・環境に依存せず、誰もが情報にアクセスしやすくすること」が本質であると書いているように、「木を見て、森を見ず」にならないことも重要でしょう。
そして、この記事では「まずは意識して対応できるところから対応していくことが大事」ということで、この記事では次の三つのポイントについて紹介しています。
- 代替テキストが必要な箇所は、img 要素を使用して必ず alt を設定する
- 仕様に沿ったセマンティクスな HTML コーディングを心がける
- キーボード操作を意識する
では、順番に見ていきましょう。
代替テキストが必要な箇所は、img 要素を使用して必ず alt を設定する
画像が情報を提供しているにもかかわらず、alt 属性で代替テキストを設定していなかったり、CSS で背景画像で置いてしまっていたりすると、画像を見ることのできないユーザーはその情報を得ることができません。
Webコンテンツは、ブラウザで画面に表示されるだけでなく、スクリーンリーダーで合成音声に変換されたり、点字ディスプレイで点字に変換されたりもします。また、Windowsのハイコントラスト表示という機能を使用して色を反転させたり、OSの画面拡大機能を使用して表示を拡大したりしているユーザーもいます。
そういったいろいろな利用環境を考えたとき、最もアクセシブルでフレキシブルなのはテキストです。ソースコードにテキストがあれば、検索クローラーにも情報を提供できたりします。そこで、テキストではない画像などを使用するときには、代替テキストを提供することが不可欠になってきます。
ここ数年気になるのは、やはりCSSの背景画像を用いている画像でしょうか。装飾でしかないデコレーションの画像ならばよいのですが、中にはナビゲーションバーを全部CSSの背景画像にしているケースも見かけます。
CSSの背景画像は、Windowsのハイコントラスト表示では表示されなくなるという問題があります。これは主にロービジョンや弱視と呼ばれる視覚障害のある人が使っている機能ですが、CSSの背景画像で情報やリンクやボタンなどを提供していると、その存在にすら気づいてもらえません。
また、装飾の画像については、img要素を用いてalt属性値を空にするという方法もあります。img要素を使用している場合は、Windowsのハイコントラスト表示でもそのまま表示されます。同じ装飾であっても、どんな利用環境でも表示させたいものであれば、img要素を使ったほうがよいでしょう。
記事では「代替テキストが必要でない例」として、グラフ画像の事例を挙げています。この事例のように本文のテキストで説明する以外にも、データテーブルを併用して同じデータを提供するという方法もありますね。
また、その場合、グラフの画像には代替テキストを何も書かなくてはいいのか？という疑問も出てきます。いろいろな考え方があると思いますが、少なくとも「グラフ」とか、あるいは「グラフ：タイトル」と書いたほうがいいように思います。例えば、HTML5の仕様書では「4.8.4.1.4 Graphical Representations: Charts, diagrams, graphs, maps, illustrations」で、グラフの前に同じ内容を説明しているパラグラフがあって、グラフ画像の代替テキストには「前のパラグラフで提示しているデータの円グラフ」というように記述した例が挙げられていますね。
つづきはメルマガで……。