other
2016年、ウェブアクセシビリティについていまさらだけど考えてみた
あけましておめでとうございます。本年もよろしくお願いします。
年始なので、ずっと気になっていたテーマ「ウェブアクセシビリティ」について考えを整理してみたいと思います。
ウェブアクセシビリティって？
ウェブを誰にでも「アクセシブル」＝「使える」ようにしよう。という考え方。
主に、身体障害者や高齢者、様々な環境からサイトにアクセスしてきても、必要な情報が得られるように配慮した作りにすること。
この考えに基づき、W3Cが規定したガイドラインを日本に合わせて作成された規格が「JIS X 8341-3:2010」です。
http://waic.jp/
歴史的には
「ウェブ標準」と時期を同じくして、この業界で一時期「流行った」ことがありました。
公共、医療系のウェブサイトでその傾向は顕著で、今でもその考えは根底に存在し続けています。一度やると以後の制作では自然と配慮した作りになるもので。
それほど意識する必要の無い案件であっても、私の関わった制作物は不完全ながら対応していたりしてなかったり。
どんな制作フローか
- ガイドラインを作成
規格はかなり広範囲に及びます。どこまで対応するか基準を決めます。 - 制作に関わる全てのスタッフがガイドラインを理解する
これは我々制作会社の関連スタッフに留まらず、原稿（コンテンツ）を作成するクライアントも対象となります。 - 制作＆検証
音声読み上げソフト
色覚シミュレーションツール
対象とする閲覧端末
これらを用意して検証を行いつつ制作を進めます。 - 納品
この時、規格に対してどの基準を満たしたのかを試験し、その結果を書類にしたり、サイト上で表示したりといった対応が必要かどうかを確認します。 - フィードバック→更新
ガイドラインに則して運営します。
たくさんあるガイドライン達成項目の中からちょっとだけご紹介
デザイン部門／コーディング部門（制作会社のフィールド）
- 大きさは適切か？
文字サイズが画面の大きさに対して適切かどうか。画面サイズが大きくなってきた最近だと14pxや16px以上でも違和感なくなってきました。かなり前だと11px。ちょっと前だと12pxくらいでデザインしたものが多かったです。 - 色は適切か？
背景色と文字色の組み合わせによってはまったく見えないという色覚特性を持つ方が居ます。色覚シミュレーションをソフトなどを使ってチェックします。 - 必要な情報がカタチに依存していないか？
音声読み上げブラウザで読み上げられただけで必要な情報が得られるかどうか。 - 記号に特別な意味を持たせてはならない
例えば、予約タイムテーブルなどで「○」に「予約可能」、「×」に「予約不可」などの意味を持たせたとしても、音声読み上げソフトはその意図を汲み取って読み上げてはくれません。 - altプロパティへの適切な設定
画像ファイルに設定するaltプロパティ。音声読み上げブラウザでも読み上げられるので、設定は必須です。が、無理やり設定する必要はありません。画像の近くに的確に説明されたテキストがある場合や、読み上げられる必要が無い画像にはalt=””と設定をしておけばOKです。 - table要素（表組み）の使用は必要最小限に留め、使用する際はなるべくシンプルな構造に
音声読み上げブラウザは基本的にテーブル（表組み）を左から右へ読み上げるため、複雑なテーブルはとても分かり難くなります。 - マウス以外の操作に対応してるか
キーボードのみの操作、最近ではタッチパネル操作に対応している必要があります。
コンテンツ制作部門（クライアントのフィールド）
- 専門用語／略語には必ず注釈をつけたり、最初に正式名称を紹介する。
特に専門用語は業界が長いひとほどそれが専門用語であることに気付けないことが多いです。その業界に精通していない人物に原稿をチェックしてもらうことをオススメしています。 - 画像や絵文字に頼りきった説明を避ける
- 複雑なテーブル（表組み）を避け、読み上げられる順番を意識する
上記「デザイン部門／コーディング部門」で触れている通り、テーブル（表組み）で情報を伝達すること自体をよくご検討ください。レスポンシブ対応も同時に導入する場合、テーブル（表組み）を的確に表示するのは課題が多いので特にご注意を。 - ルビが必要かどうかを検討する
そのサイトのターゲットユーザーが子供の場合に限らず、外国人留学生など日本語を学び始めた方を対象にするのであれば、ルビを振ることで格段に情報がよく伝わるそうです。
昨今のレスポンシブ化の流れ
Googleが「推奨」したことにより、レスポンシブ化（閲覧者の表示ウィンドウサイズに応じて最適なレイアウトに代わるサイト構造のこと）の流れはこの業界でスタンダードになりつつあります。HTML5の普及と古いブラウザやFlashコンテンツの淘汰が進みつつあることで、この流れはウェブアクセシビリティの基本的な考え方に近く、親和性はとても高いと言えます。レスポンシブ化と同時にアクセシビリティ対応を検討してもいいかも知れません。
古いブラウザへの対応は？
最も難しいテーマがコレです。高齢者のパソコン環境が古いままという状況が十分に考えられるため、古いブラウザへの対応を余儀なくされる場合が考えられます。そうなるとレスポンシブ対応と同時導入するには、メリットが無くなってしまったり、制作難易度が非常に高く（＝工数増大に）なったり、デザイン上の制約が多くなります。
SEOに有効（かも）
複雑な表組みや画像の多用を避けるという基本が根底に出来るため、文書構造としてはシンプルになり、結果として検索エンジンのクローラーも読み易いページに仕上がります。SEO（サーチエンジン最適化）としての効果が期待できると言ってもいいと思うのですが…。検証してませんのであまり大きな声では言いません。多分、効果アリます。
参考までに
「ウェブアクセシビリティ品質管理技術者」の「資格」が取れるというセミナーをご紹介します。手っ取り早く学ぶのにいいかも知れません。
・Infocreate collage
https://icc.infocreate.co.jp/
「ウェブアクセシビリティ基本講座」はeラーニングで40時間。無料で受けることが出来るようです。
おわりに
以上、やってみると必ず何かの発見が得られる「ウェブアクセシビリティ」なかなかいい勉強素材です。
2016年の勉強素材にいっちょどうでしょう？
