読者です 読者をやめる 読者になる 読者になる

frontendmemo

このサイトは、「html、css、js、ツールなどについて、自分が覚えたこと、またはいつも忘れて調べることを書き溜め、それが結果といて勉強したての初心者の方や自分と同じような技術レベルの人の助けになることを目的とするWebログ」、略してブログです。挨拶→http://frontendmemo.hatenablog.com/entry/2016/06/25/115845

Webを仕事にするなら覚えておくべきアクセシビリティ~デザイニングWebアクセシビリティまとめ①~

スポンサードリンク

デザイニングWebアクセシビリティ読みました。

アクセシビリティ大事ですよね。何となく聞いたことはあるけど、正直とっつきにくい、知らなくても大丈夫でしょ、という人も一度読んでいただきたい本、デザイニングWebアクセシビリティをまとめてみました。

デザイニングWebアクセシビリティ - アクセシブルな設計やコンテンツ制作のアプローチ

デザイニングWebアクセシビリティ - アクセシブルな設計やコンテンツ制作のアプローチ

目次

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

  • アクセスできる人を増やすため

障害がある人だけでなく手を怪我した、接続の調子が悪いなど

  • さまざまなデバイスに対応するため

情報にアクセスできない、画面が小さく操作できない、環境が対応していないflashなど

クローラーに意味を伝えることでクローラーがアクセスしやすくなります。

  • UI、UXのため
  • 取り組みをアピール

要件定義の方法

検証を行うブラウザやOSデバイスの環境や印刷時、スクリプト無効時の要件について決めておく

  • 印刷時ナビゲーションを残すか消すか印刷用のスタイルが必要になることもある・

リニューアルの際は

  • ユーザー調査
  • コンテンツ分析
  • 流入状況調査
  • SNS利用状況調査
  • システム調査
  • 社内フロー分析

問題の解決とアプローチ

問題①

CAPTCHAは機械を排除するが、スクリーンリーダーのユーザーのアクセスも妨げられる

解決

音声でも利用できるようにする
Web以外(電話)のアクセス手段を用意する

解決

画像にコピーライトを含める
(ブラウザ上で保存を禁止しても、キャッシュから拾い出す、スクリーンショットを撮るなどコンテンツを公開する以上コピーや保存を禁止することは不可能)

問題③

文字サイズ変更ボタン

  • スクリーンリーダーユーザーには不必要
  • 拡大率が不十分
  • 画像の拡大ができない

解決

文字サイズ変更の案内ページをつくる

コンテンツ側の機能より、支援技術を重視する

問題④

動画の映像や音声がわからない

解決

動画コンテンツに字幕やテキストを提供する

問題⑤

紙媒体のコンテンツをそのままWebに流用する
アクセシブルでないPDFを流用してしまう

解決

原稿をWeb用に再構成する

  • 複雑な表が使われている場合、シンプルな表に組みなおす、もしくは表をやめる
  • 代替テキストを考慮する
  • 下線や取り消し線などはテキストだけで理解できるように見直す

問題⑥

CMSの導入で失敗

  • 代替テキストを指定できない
  • 見出しを見出しとしてマークアップできない
  • リスト、labelをマークアップできない
  • WYSIWYGエディタで問題が起きる
  • 大量のチェックツール

解決

CMSの選定時にアクセシビリティの観点を入れる

  • 適切な文法のHTMLが生成できるか
  • HTMLのカスタマイズはどの程度できるのかコンテンツエリアに出力されるHTMLをカスタマイズできるか
  • WYSIWYGエディタを使わなければならないのか
  • 代替テキストを指定できるか

運用ガイドラインを作成する

  • 見出しやリストをどのように使うか
  • どのような場合にどのコンポーネントを使うのか
  • 画像にどのような代替テキストを指定するのか
  • どのような場合にどの色を使うのか

詳しく内容が知りたい方はこちら↓

デザイニングWebアクセシビリティ - アクセシブルな設計やコンテンツ制作のアプローチ

デザイニングWebアクセシビリティ - アクセシブルな設計やコンテンツ制作のアプローチ

Webを仕事にするなら覚えておくべきアクセシビリティ~デザイニングWebアクセシビリティまとめ②~ - frontendmemo