デザイニングWebアクセシビリティ読みました。
アクセシビリティ大事ですよね。何となく聞いたことはあるけど、正直とっつきにくい、知らなくても大丈夫でしょ、という人も一度読んでいただきたい本、デザイニングWebアクセシビリティをまとめてみました。
デザイニングWebアクセシビリティ - アクセシブルな設計やコンテンツ制作のアプローチ
- 作者: 太田良典,伊原力也
- 出版社/メーカー: ボーンデジタル
- 発売日: 2015/07/27
- メディア: 単行本（ソフトカバー）
- この商品を含むブログ (4件) を見る
なぜアクセイシビリティと向き合うのか
- アクセスできる人を増やすため
障害がある人だけでなく手を怪我した、接続の調子が悪いなど
- さまざまなデバイスに対応するため
情報にアクセスできない、画面が小さく操作できない、環境が対応していないflashなど
- SEOのため
クローラーに意味を伝えることでクローラーがアクセスしやすくなります。
- UI、UXのため
- 取り組みをアピール
要件定義の方法
検証を行うブラウザやOSデバイスの環境や印刷時、スクリプト無効時の要件について決めておく
- 印刷時ナビゲーションを残すか消すか印刷用のスタイルが必要になることもある・
リニューアルの際は
- ユーザー調査
- コンテンツ分析
- 流入状況調査
- SNS利用状況調査
- システム調査
- 社内フロー分析
問題の解決とアプローチ
問題①
CAPTCHAは機械を排除するが、スクリーンリーダーのユーザーのアクセスも妨げられる
解決
音声でも利用できるようにする
Web以外（電話）のアクセス手段を用意する
問題②
解決
画像にコピーライトを含める
（ブラウザ上で保存を禁止しても、キャッシュから拾い出す、スクリーンショットを撮るなどコンテンツを公開する以上コピーや保存を禁止することは不可能）
問題③
文字サイズ変更ボタン
- スクリーンリーダーユーザーには不必要
- 拡大率が不十分
- 画像の拡大ができない
解決
文字サイズ変更の案内ページをつくる
コンテンツ側の機能より、支援技術を重視する
問題④
動画の映像や音声がわからない
解決
動画コンテンツに字幕やテキストを提供する
問題⑤
紙媒体のコンテンツをそのままWebに流用する
アクセシブルでないPDFを流用してしまう
解決
原稿をWeb用に再構成する
- 複雑な表が使われている場合、シンプルな表に組みなおす、もしくは表をやめる
- 代替テキストを考慮する
- 下線や取り消し線などはテキストだけで理解できるように見直す
解決
- 適切な文法のHTMLが生成できるか
- HTMLのカスタマイズはどの程度できるのかコンテンツエリアに出力されるHTMLをカスタマイズできるか
- WYSIWYGエディタを使わなければならないのか
- 代替テキストを指定できるか
運用ガイドラインを作成する
- 見出しやリストをどのように使うか
- どのような場合にどのコンポーネントを使うのか
- 画像にどのような代替テキストを指定するのか
- どのような場合にどの色を使うのか
詳しく内容が知りたい方はこちら↓
デザイニングWebアクセシビリティ - アクセシブルな設計やコンテンツ制作のアプローチ
- 作者: 太田良典,伊原力也
- 出版社/メーカー: ボーンデジタル
- 発売日: 2015/07/27
- メディア: 単行本（ソフトカバー）
- この商品を含むブログ (4件) を見る
Webを仕事にするなら覚えておくべきアクセシビリティ～デザイニングWebアクセシビリティまとめ②～ - frontendmemo