「デザイニングWebアクセシビリティ」（書籍）を読んで気になった点のまとめ
「デザイニングWebアクセシビリティ - アクセシブルな設計やコンテンツ制作のアプローチ」（太田良典さん、伊原力也さん著）を読んだので気になった点をまとめておきます。
“アクセスビリティ”というものについて、全体感をざっとおさえたいという意図で手にとりました。
| 本書籍の目次 | |
|---|---|
| 1章 サイトを作る前に 1-0 なぜWebはアクセシブルなのか 1-1 なぜアクセシビリティと向き合うのか 1-2 アクセシビリティのさまざまな誤解 2章 戦略の策定 2-0 概要と流れ 2-1 ウェブアクセシビリティ方針を作らない 2-2 適切でないウェブアクセシビリティ方針 2-3 手段が目的になってしまう 3章 要件定義 3-0 概要と流れ 3-1 CAPTCHAの導入でアクセス不能になる 3-2 ブラウザやOSの機能が干渉を受ける 3-3 コンテンツ側の冗長なアクセシビリティ機能 3-4 動画コンテンツにアクセスできない 3-5 紙媒体のコンテンツがそのまま使われる 3-6 CMSの導入に失敗する 4章 ナビゲーション設計 4-0 概要と流れ 4-1 分類や並び順がわかりづらい 4-2 カテゴリ名や構造がわかりづらい 4-3 ナビゲーションに一貫性がない 4-4 現在地がわからない 4-5 再調整したり、やり直す手がかりがない 4-6 情報への到達手段が少なすぎる 5章 インタラクション設計 5-0 概要と流れ 5-1 デバイスに依存したUI 5-2 思ったようにスクロールできない 5-3 勝手に新規タブやポップアップが開く 5-4 一定時間で勝手にページ移動する 5-5 動きをコントロールできない 5-6 音が勝手に再生される 6章 システム設計 6-0 概要と流れ 6-1 情報が不足しているフォーム 6-2 不要な項目を入力させられるフォーム 6-3 ラベルや説明が不足しているフォーム 6-4 入力が困難なフォーム 6-5 ミスを誘発するフォーム 6-6 エラーが解決できないフォーム 6-7 確認・訂正ができないフォーム 6-8 戻る機能が使えないフォーム 6-9 時間切れで作業が継続できなくなるフォーム | 7章 コンテンツ設計 7-0 概要と流れ 7-1 ページタイトルがわかりづらい 7-2 適切な見出しが立っていない 7-3 言葉がわかりにくい 7-4 複雑な表が理解できない 7-5 画像を含むコンテンツが理解できない 7-6 リンク先がわからない 8章 ビジュアルデザイン 8-0 概要と流れ 8-1 見た目に頼っている 8-2 コントラストが低い 8-3 どこが押せるかわからない 8-4 テキストブロックが読みづらい 8-5 文字が画像になっている 8-6 フォーカスが見えない 8-7 小さく密集したものが押せない 8-8 スタイルに一貫性がない 8-9 閃光で発作が起きる 8-10 拡大すると問題が起きる 9章 実装 9-0 概要と流れ 9-1 文法ミスがある 9-2 セマンティクスが不適切 9-3 コンテンツがCSSに依存している 9-4 代替テキストの実装が不適切 9-5 リンク先がわからなくなる実装 9-6 ラベルがマークアップされていない 9-7 スクリーンリーダー対応が不適切 付録 WCAG2.0と本書内容の対照表 関連情報・資料集 |
Webの本質はアクセシビリティだとのこと。以下は、W3Cのディレクター、Tim Berners-Lee氏の言葉。
"The power of the Web is in its university.
Access by everyone regardless of disability is an essential aspect."
Webの力はその普遍性にあります。障害の有無にかかわらず誰もがアクセスできるというのがWebの本質的な側面なのです。
アクセシビリティとは
“accessible” = “access” + “able”
⇒ アクセスのしやすさ
アクセスしやすいように一人ひとりの状況にあわせるのはコストがかかる
⇒ ユニバーサルデザイン
Webは本質的にアクセシブル
⇒ ユーザーエージェントによって処理されるから。そのためにはマシンリーダビリティも重要。
アクセシビリティを上げる目的
⇒ UI／UXの向上
他にもいろいろ書かれていましたが、結局これに集約されるかと思います。
UXのハニカム構造
Web情報アーキテクチャの著者のひとりPeter Morvilleが分解した7つの「体験」要素です。
- accessible = アクセスできる
- usable = 使える
- findable = 見つけられる
- credible = 信頼できる
- desirable = 望ましい
- valuable = 価値がある
⇒ 7要素の相関を表したのが「UXのハニカム構造」
UXの4つのレベル
満足しやすい ➜ 価値がある、好ましい 安心しやすい ➜ 役に立つ、信頼できる 利用しやすい ➜ 使いやすい、見つけやすい アクセスしやすい ➜ アクセスしやすい
参考：Evaluation method of UX “The User Experience Honeycomb”
ウェブアクセシビリティ方針
プロジェクトメンバー間における合意形成のために明文化しておくもの。明確で現実的なものでなければならない。
以下、いろんな企業がサイトに公開しているウェブアクセシビリティ方針の例です。
その他参考サイト
要件定義
以下の手順で行う。
STEP1：サイトの現状調査
STEP2：ユーザー像の定義
STEP3：コンテンツの企画と定義（カスタマージャーニー、コンセプトダイアグラム）
STEP4：実装要件の定義（ブラウザ／OS／デバイス、スクリプト／プラグイン無効時、印刷時）
ナビゲーション設計
以下の手順で行う。
STEP1：サイト構成要素の分類・整理
STEP2：全体構造の検討と可視化（サイトマップ）
STEP3：ナビゲーションスキームの検討
- グローバルナビゲーション
- ローカルナビゲーション、サブナビゲーション
- 検索（サイト内検索）
- サイトマップ
- パンくずリスト
STEP4：詳細サイトマップの作成（ディレクトリマップ、フロー図）
注意点
- 複数の経路を用意
- ナビゲーションに一貫性をもたせる
- TOPページに移動できるようにする
書籍に書いている内容と似たようなもの記事もありました。
さいごに
ウェブアクセスビリティ方針みたいなページって、制作会社だったり、ある程度規模の大きなWebサイト開発で関係者が多かったりする場合に、あくまでも合意形成のためにだ明文化しておくことは大事だと思います。
ただ、わざわざサイトに設置しているのは誰向けのものなのでしょうか少し疑問です…サイトの信頼性とかなんですかね。
UXのハニカム構造にもある7つの要素のうち、”accessible”って超重要だと思いました。 いくら良いコンテンツだったとしても、ユーザーにたどり着いてもらえないコンテンツは存在しないことと同じなので。
検索流入がメインのチャネルのサイトの場合は、マシンリーダビリティ、クローラビリティの確保は欠かせなそうです。
UI／UXについては、これからもっと勉強していきたいと思います。
おわり。
