すごく分かりやすい！デザインやコンテンツ設計の 面からアクセシビリティへの取り組みを解説したWeb制作者必読書

アクセシビリティって、スクリーンリーダーに対応することでしょ、間違いではありませんがそれはほんの一部です。

分かりにくいナビゲーション、思ったように操作できないインタラクション、入力が困難なフォーム、内容が理解しにくいコンテンツなど、すべての人が快適にアクセスできるよう改善の手助けとなるオススメの本を紹介します。

本書は以前紹介した「コーディングWebアクセシビリティ（紹介記事）」の姉妹書で、「コーディングWebアクセシビリティ」はスクリプトを使用したWebアプリが中心でしたが、今回の「デザイニングWebアクセシビリティ」はHTMLとCSSで作られた静的なWebページが中心になっています。

発売は、週明けの27日予定です。早いとこだと週末に書店に並んでいるかもしれませんね。
追記（2015/7/24）：書店行ったら、ありました。

著者である太田さんと伊原さんが在籍するBAの貴重な社内リソースが数多く掲載されており、実際にどのようにしているのかがよく分かると思います。
BAは僕の古巣でもあるので、「おお！」と思わずにはいられませんでした。

紙面のキャプチャで、中身を少しだけご紹介。

本書はアクセシビリティのガイドラインを単に解説したものではありません。
制作のプロセスの中でどのようにアクセシビリティと向き合い、取り組んでいくのか、具体的な事例とともに学べる実践的な内容になっています。

1章はアクセシビリティとはを学び、2章からは実践的な内容で、制作者やユーザーがかかえる問題点のどこが問題なのか、どうすればみんなが幸せになれるかを学んでいくうちに、自然とアクセシビリティを達成することができます。

なぜアクセシビリティに取り組む必要があるのか？ 簡単に言うとアクセスできる母数が増えるからです。これはビジターに限らず、Googleなどの検索エンジンのクローラーも対象となります。
よく勘違いされやすいですが、アクセシビリティは高齢者や障害者のためだけではありません。健常者も検索エンジンのクローラーもアクセスするすべてがその対象です。

上記でも少し触れましたが、本書の魅力はアクセシビリティを学ぶだけでなく、通常目にすることはないリソースが掲載されているのも大きな魅力でしょう。
これはサッポロビールのコンセプトマップですね。

2章以降のスタイルは、Web制作のワークフローに沿ったよく見られる問題と解決のアプローチを解説した実践的な内容となっています。

素材は紙媒体のをそのまま使ってとか、WordPressなどのCMSを使えばいいんだよねなど、誰もがあるあると頷いていまうのではないでしょうか。

デザイン面でも知っておくべきことは数多くあります。これからの仕事に絶対役立つ知識を身につけることができます。

最近はインタラクションにも大きな注目が集まっています。しかし使い方を間違うと逆に悪い印象を与えることになってしまいます。

スクロールエフェクトを採用しているサイトも増えてきました。スクロール操作に干渉して自由な操作ができない、次ページを自動でどんどん読み込ませる無限スクロールなど、適切に実装しないとさまざまな問題を引き起こします。

フォームはアクセシビリティの問題が起こりやすいコンテンツです。入力が困難なフォーム、ミスを誘発するフォーム、情報が不足しているフォームなど、購入フローやアンケートといった入力操作を伴うコンテンツ離脱の原因にもなります。

例えばミスを誘発するフォームでは、リセットボタンが間違いやすい箇所に配置されている、郵便番号を入力すると住所が自動補完され同時にフォーカスがはずれてしまい、修正するためにBackSpaceキーを押すとブラウザの戻る操作になってしまうなどがあります。

コンテンツの設計も非常に大切です。
個人的にはここを一番重要視していました。

このコンテンツ仕様書もBAで使用されているものですね。

多くのユーザーはこのビジュアルデザイン、視覚から情報を得ています。デザインを工夫すれば、情報がより伝わりやすくなり、アクセシビリティを向上させることになります。

文字が背景に溶け込んで読めない、画像がはっきりしていない、入力欄の色が薄くて気がつかない、こんなコンテンツを理解できるユーザーは非常に少ないでしょう。

具体的なアプローチを参考にいろいろ実践してみましょう。

見た目は同じなのに意味が異なる、逆に見た目は異なるのに意味が同じ、送信とキャンセルボタンの左右逆配置が混在している、そんなサイトは神経を無駄に使いますね。

最後の9章、実装編では実装作業の進め方が詳しく解説されています。テンプレートの考え方、コンポーネントの考え方、ページへの展開など、マークアップ作業の流れはBAでの実際のワークフローがベースになっていますね。

ベースとなる考え方もしっかり書かれてあるので、より深く理解できると思います。

デザイニングWebアクセシビリティの目次

1. サイトを作る前に

   なぜWebはアクセシブルなのか

   なぜアクセシビリティと向き合うのか

   アクセシビリティのさまざまな誤解

2. 戦略の策定

   概要と流れ

   アクセシビリティ方針を作らない

   適切でないアクセシビリティ方針

   手段が目的になってしまう

3. 要件定義

   CAPTCHAの導入でアクセス不能になる

   ブラウザやOSの機能が干渉を受ける

   コンテンツ側の冗長なアクセシビリティ機能

   動画コンテンツにアクセスできない

   紙媒体のコンテンツがそのまま使われる

   CMSの導入で失敗する

4. ナビゲーション設計

   概要と流れ

   分類や並び順がわかりづらい

   カテゴリ名や構造がわかりづらい

   ナビゲーションに一貫性がない

   現在地がわからない

   再調整したり、やり直す手がかりがない

   情報への到達手段が少なすぎる

5. インタラクション設計

   概要と流れ

   デバイスに依存したUI

   思ったようにスクロールできない

   勝手に新規タブやポップアップが開く

   一定時間で勝手にページ移動する

   動きをコントロールできない

   音が勝手に再生される

6. システム設計

   概要と流れ

   情報が不足しているフォーム

   不要な項目を入力させられるフォーム

   ラベルや説明が不足しているフォーム

   入力が困難なフォーム

   ミスを誘発するフォーム

   エラーの解決ができないフォーム

   確認・訂正ができないフォーム

   戻る機能が使えないフォーム

   時間切れで作業が継続できなくなるフォーム

7. コンテンツ設計

   概要と流れ

   ページタイトルがわかりづらい

   適切な見出しが立っていない

   言葉がわかりにくい

   複雑な表が理解できない

   画像を含むコンテンツが理解できない

   リンク先がわからない

8. ビジュアルデザイン

   概要と流れ

   見た目に頼っている

   コントラストが低い

   どこが押せるかわからない

   テキストブロックが読みづらい

   文字が画像になっている

   フォーカスが見えない

   小さく密集したものが押せない

   スタイルに一貫性がない

   閃光で発作が起きる

   拡大すると問題が起きる

9. 実装

   文法ミスがある

   セマンティックが不適切

   コンテンツがCSSに依存している

   代替テキストの実装が不適切

   リンク先がわからなくなる実装

   ラベルがマークアップされていない

   スクリーンリーダー対応が不適切

• 付録

  WCAG2.0と本書内容の対照表

  関連情報・資料集

アクセシビリティを向上させるということは、よく多くの人が、より快適にアクセスできるようになることです。アクセシビリティは高齢者・障害者のためのもの、健常者対象の商品だから関係ない、デザインのクオリティを落としてしまうなどといった間違った理解をしてしまっている人も少なくありません。

コーダーやデザイナーをはじめ、ディレクターやプロデューサーなどWeb制作のプロジェクトに携わる全ての人にアクセシビリティについて正しい理解を深める良書だと思います。

献本の御礼

最後に、献本いただいたボーンデジタルの担当者さまに御礼申し上げます。

当サイトでは随時、献本を受け付けています。
お問い合わせは下記よりお願いいたします。

• お問い合わせ｜コリス