「デザイニングWebアクセシビリティ刊行記念イベント」参加レポート

ボーンデジタルさんより発売された著書『デザイニングWebアクセシビリティ』と『コーディングWebアクセシビリティ』の刊行記念イベントがあったので行ってきました。

イベントについて

今回のイベントの元になっている著書はこちら。

　

イベントの内容は、3人1組のグループになって、各セッションごとに自分達の考えや疑問などをふせんに書いてグループ内で共有していくというものでした。

ワークショップの雰囲気が気になるという方はイベントのハッシュタグ#a11ybooksをどうぞ。
私は営業の方と制作会社にお仕事をお願いする立場の方とご一緒したのですが、他業種の人と話す機会は中々ないので参加して良かったなと思いました。
気軽にふせんに書いて後でどんどん答えてもらえるしくみだったのですが、そのおかげでグループ内での意見交換も活発にできたように思います。
以下、イベントに参加して印象に残っていることなどをざっくりとまとめてみました。

アクセシビリティとは

“accessible” は “access” と “able”をつなぎ合わせたもので、「アクセス可能」という意味があります。
World Wide Webの創始者である、Tim Berners-Leeはこんな言葉を残しています。

Webの力はその普遍性にあります。
障害の有無にかかわらず誰もがアクセスできるというのがWebの本質的な側面なのです。
(『デザイニングWebアクセシビリティ』より引用)

Webはロボットやクローラが自動的に情報を取得したり、スクリーンリーダーが画面の内容を音声で読み上げたりと、色々なツールを使うことで、(だれでも比較的簡単に)情報にアクセスすることができます。
そういった意味では、Webは他のメディアに比べてアクセシブルと言えます。
また、ただのテキストデータだと、どこがタイトルでどこが重要な箇所であるかなどがわかりませんが、マークアップを施すことで、要素の構造や意味がより明確になります。
きちんとマークアップを行えば、様々なツールで利用しやすくなり、結果アクセシビリティを高めることができます。

マークアップで気をつけること

代替テキストの省き過ぎ、付け過ぎに注意

テキスト画像のaltなどは、たとえ長くても省かずに適切に付けることが重要です。
逆に付けすぎにも注意が必要で、テキストと画像の代替テキストの文言が同じ場合、同じ内容が2度読まれることになります。
文言が他とかぶってしまう場合はalt=”” と空にしておきましょう。
(※HTML5上ではalt属性自体を省略することはNGですが、空として置いておく分には問題ありません。)

組織図などのコーディングについて

画像にしたり、PDFにしたり、SVGにしたり…と色々な方法を紹介された後に、参加者同士でベストな方法について話し合いました。
画像にする場合、altに情報を全部入れてしまう例もあったのですが、更新が大変な上に、画像は更新したもののalt属性の更新が忘れられているといったミスにもつながります。
個人的にはコーディングに落とし込めるデザインにした上で、HTML+CSSのみで再現するのが一番良い方法のように思います。
しかし、実際仕事をする上では、アウトライン化された紙データでくることも多いのが現状です。
手打ちで原稿を起こすことによるミスの発生や作業・確認時間がかかるという問題を考慮し、結果マークアップはせずにそのまま画像を置くことも多いです…。
このあたりはお客さんとの共通認識がないとつらいなと思います。

メニューなど重要な要素は背景画像にしない

メニュー周りなど、CSSでテキストを飛ばし、背景画像にする手法があります。
しかし、背景画像にしてしまうと、ハイコントラストでアクセスしたり、印刷したりすると見えなくなってしまうので注意が必要です。
（※ブラウザの印刷設定はデフォルトでは背景画像は表示されない状態になっています。）

ビジュアルデザインで気をつけること

アクセシビリティは、マークアップ側だけでなく、デザイン側からのアプローチも重要です。

  • コントラストを高めてみやすく
  • 行間や一行の文字数を工夫して読みやすく
  • どこが押せるかわかりやすく
    　リンクやボタンを大きくして押しやすく
  • スタイルを一貫させて認識しやすく

実は重要なポイント

  • 文言では視覚に依存せずテキストで
  • 文字は画像にせずてきすとで
  • フォーカス表示を消さない
  • 閃光を使わない
  • 拡大できるように
  • 打ち消し線はよまれないので注意
  • グラフの画像だけでなく、元データの表も平気する

文言では視覚に依存せずテキストで

フォームでは”赤色の項目は必須です。”と色を指定するだけでなく”必須”という文字をそれぞれの項目に書くようにしましょう。
また、”左上のボタンをクリック”といった、も注意が必要です。
見ている人の状態や環境によって、見え方は変わってくるので、視覚にたよったアナウンスは極力ひかえるようにしましょう。

打ち消し線は読まれないので注意

セールページの割引前の値段などの記載では、打ち消し線をひくだけでなく、「通常価格」「キャンペーン価格」といった見出しをつけましょう。

アクセシビリティの方針について

アクセシビリティの達成基準レベルにはA,AA,AAAと三つの達成等級があります。
詳しく書くと長くなってしまうので割愛しますが、イベントで紹介されていた内容にによると下記のような感じです。

A
どんなサイトも満たすべき、最低限の基準

AA
支援技術を駆使しなくても多くの環境でアクセスできる
（最低限のカラーコントラスト、文字サイズなど）

AAA
発展的な基準
わかりやすい言葉を使う

目標設定が厳しすぎると手段が目的になってしまうので注意が必要です。
例えば、企業サイトランキングのためIRだけに文字変更機能がついているといったサイトも結構あるとのこと。
無理のない範囲で、目標とするレベルや適用範囲をはっきりとさせることが大事ですね。

サイトによってはこういったアクセシビリティについてのページも設けられており、「対象範囲」、「目標とする等級」、「現在の対応状況」などを掲載しているサイトがちらほらありました。
中でもYahooのページは目的がしっかりと書かれており、紹介されたサイトの中でも一番印象が良かったです。
Yahoo ウェブアクセシビリティ方針

質問タイムで出た意見

いくつか質問があったのですが、「”続きはWebで”というCMはアクセシビリティじゃないのではないか」という意見が一番印象的でした。

「そもそもWebでアクセスしていること自体がアクセシビリティが高く、Webだけしか提供していないのは問題があるのではないか。」という回答が出ていたのですが、本当にそうだなーと実感しました。
いろんな立場の人のことを考えて作るのはものづくりをする上では大事なことであり、自分の職域に関わらず、普段からこういった視点を大事にしたいなと思いました。

総括

アクセシビリティはWebに関わる全ての人に関係してきます。
予算や技術、時間的に難しいこともありますが、何かできることはあるはず。
全ての人に100を伝えることは無理ですが、0か100ではなく、少しでも多くの人に情報を受け取ってもらおうというアナウンスが印象的でした。

参考リンク・書籍

スライド

当日のスライドがslideshareに上がっていましたので、気になる方はどうぞ。

動画

今回のセミナーで触れられていたことがスクーさんでもいくつか出ているのでそちらもおすすめです。
アクセシビリティ入門（全7回） – schoo WEB-campus（スクー）