【PR】この記事にはアフィリエイト広告が使用されています。

コーディング

Webアクセシビリティの学校 in 京都に参加しました

  /

2017年9月23日、京都にて株式会社インフォアクシアさま主催のWebアクセシビリティの学校 in 京都がおこなわれました。

Webアクセシビリティについて考えることが多いタイミングだったので、ちょうど良い機会！と思い参加してまいりました。

この記事の目次
  1. アクセシビリティの定義
  2. 日本のWebアクセシビリティを取り巻く状況
  3. Webアクセシビリティの対策
  4. まとめ

アクセシビリティの定義

アクセシビリティとは、特にWebサイト上における情報やサービスへのアクセスのしやすさのことを指します。

具体例をあげると…

  • キーボード操作だけでサイト内のリンクを移動し、目的の情報にたどり着ける
  • テキストの色と背景色のコントラストが適切で読みやすい
  • スクリーンリーダー（視覚障害をお持ちの方が使用する、画面上の情報を認識して音声を発するソフト）で情報が正しく読み上げられる

セミナーを受けるまでは、『アクセシビリティ』＝身体に何らかの障害のある人が情報にアクセスしやすいよう配慮するもの、という認識がありました。

身体に障害を持たない人は、視覚などを使えば割と苦労せずに知りたい情報にアクセスできます（Webサイトの作りがわかりにくい…といった場合を除く）。そのため、アクセシビリティとは身体に障害のある人がWebサイトにアクセスしやすいよう、特別に配慮しておこなうもの…というイメージが漠然と残っていました。

※以下、セミナータイトルにならって『アクセシビリティ』を『Webアクセシビリティ』と表記します。

日本のWebアクセシビリティを取り巻く状況

セミナーではまず、Webアクセシビリティに関する世の中の状況を伺いました。

1.Webアクセシビリティに関連する法律の整備

海外ではサイトのWebアクセシビリティに関する訴訟が年々増加しているそうです。
法律の整備も進んでいて、特にアメリカではアメリカ国内に乗り入れる航空会社に対するアクセシビリティの法律があり（ACAA）、航空会社のWebサイトに一定の水準を守るよう求めているほどなのだとか。

日本は諸外国に比べると身体障害者のWebアクセシビリティに関連する法整備が遅れており、平成28年に障害者差別解消法が施行されました。

民間企業の対応が努力義務であったり、アメリカなどに比べるとゆるい法律だそうですが…　日本でも、障害を持つ人がアクセスしやすいサイトを作ることが求められています。

2.超高齢化社会

日本は世界一の高齢化社会です。
高齢者のインターネット使用率も年々増えており、身体機能が低下してもアクセスしやすいサイトを作成するのは、もはや当然のことと言えそうです。

3.インターネットにアクセスできるデバイスの多様化

現代ではインターネットに接続できるデバイスが多様化しています。
以前はパソコンだけだったものが、スマートフォン、タブレット、Apple Watchなどのスマートウォッチ、さらには自動車や家電製品まで…今後どのようなデバイスが出てくるかも未知数です。

また、デバイスの多様化に合わせて、ユーザーはさまざまな状況下でインターネットにアクセスするようになりました。

例えば、わたしはいつもスマートフォンのメディア音量をミュートにしているので、動画広告をあまり見ません。
ただ、字幕が表示されている動画は音量を上げなくても内容がわかるので、ついつい見てしまうこともあります。

スマートフォンを操作している人の写真

このように、音が出せない（または聞こえにくい）環境で動画を見たり、屋外などの画面が見えづらい場所でWebサイトにアクセスしたり、集中力を保ちづらい状態（周りの環境、身体の状態など）で文章を読んだり…　という状況は、誰しも起こりうることではないでしょうか。
Webアクセシビリティに配慮していると、それら様々な状況においても快適な利用体験を提供できます。

法整備などの社会からの要請ももちろん重要ですが、取り組むことでどのような人でも情報にアクセスしやすくなり、ひいてはサイトの価値が向上するのだと、Webアクセシビリティの必要性が実感を持って理解できました。

Webアクセシビリティの対策

セミナーの後半では、実装に関するお話もありました。

アクセシビリティ対策の基本は、マシンリーダブル（マシンが解釈しやすいよう）にすること。
マシンとは、ブラウザやノンビジュアルブラウザ（スクリーンリーダーや検索エンジンロボットなど）を指します。それらが情報を解釈しやすいように配慮することが、Webアクセシビリティに繋がるのだとか。

ここまで伺って、「それってSEOと同じでは…！」と思いました。
事実、アクセシビリティ対策はマークアップでまかなえる部分が多く、スクリーンリーダー対応≒SEOと呼べるようです。
マークアップ大事…！

具体的な施策について、わたしが特に気になった点を中心に書いていきます。

ページの領域

  • 全ての要素をheader, footer, main, nav, aside 各要素のどこかの領域に入れる
  • 2017年9月時点では、ランドマークrole属性も付けておくほうがベター
    日本のスクリーンリーダーはまだHTML5のheader, footer…などの要素に対応していないものが多く、当面は必要
  • ナビゲーションが複数ある場合はaria-label属性で要素にラベルをつける
    • Webの専門用語を使わず、一般の人にわかりやすい名前にする
    • グローバルメニューは「メインメニュー」、パンくずリストは「現在位置」など
<nav aria-label="メインメニュー">
<ul>
<li><a href="url1">ホーム</a></li>
<li><a href="url2">ブログ</a></li>
<li><a href="url3">プロフィール</a></li>
</ul>
</nav>
  • aria-labelledby属性も有効
    • aria-labelledby属性に他要素のid属性を指定すると、そのidをもつ要素をラベルとして関連づけられる
    • すでに記述しているテキストをラベルとして使用したいときに便利 
<nav aria-labelledby="nav-title">
<h3 id="nav-title">メインメニュー</h3>
<ul>
<li><a href="url1">ホーム</a></li>
<li><a href="url2">ブログ</a></li>
<li><a href="url3">プロフィール</a></li>
</ul>
</nav>

リンク

リンク先の名称を具体的に書く。（「こちらをクリック」などと抽象的な表現を使わない）

画像

  • 画像が写真の場合は、代替テキストに「写真」と入れる
    • 視覚に障害があるかたも「写真がある」と認識でき、目が見えるかたに写真の内容を確認してもらうことができるそう
  • キャプションで説明している場合はfigure要素とfigcaption要素を使用し、aria-labelledby属性で指定する
<figure>
<img src="../image/file01.jpg" alt="写真" aria-labelledby="photo-morning">
<figcaption id="photo-morning">旅館の朝ごはん</figcaption>
</figure>
  • 地図の画像で代替テキストを使用する場合、あるところを起点にして道順を解説する
    ※距離を示す際は、“徒歩5分”のように人によって変わる指標ではなく、”300m”などと客観的な数値を書く

色

キーボード操作

  • フォーカスインジケータ（キーボードでフォーカスした際、要素に印が出る現象）は必須
    • CSSなどで消していないか要確認
    • デフォルト設定だと背景色との兼ね合いでわかりにくい場合もあるため、適宜変更
  • モダールウィンドウを使用するときは、フォーカスがモダールウィンドウの中に移動するかどうか注意！

フォーム

label要素を使用する。「入力必須」の場合、「必須」もlabel要素に入れておくと確実。

<label for="name">名前（必須）</label>
<input type="text" id="name">

label要素がないフォームではtitle属性を使用して、フォームにラベルをつける。

<input type="text" title="検索"><button type="submit">検索</button>

※aria-label属性とtitle属性の使い分けについて…HTMLの属性でまかなえるものは、HTMLを優先的に使用する。ariaは最終手段。

まとめ

実務においてアクセシビリティを意識することが増え、自分なりに調査しながら対応をおこなっていました。ただ、「本当にこの対応で良いのかな？」とどこか不安も残っていて…

そんななかでWebアクセシビリティの学校に出席して、日々の業務で疑問に思っていたことが解消し、理解が進みました。Webアクセシビリティの対応待った無し、ということも実感として理解でき、とても意義のあるセミナーでした。

W3Cの仕様書（WCAG）に定められていることを全て理解し、対応するのは大変なことのように見えますが、まずは出来る範囲から対応していきたいと思います！

関連する記事