アーカイブ

2019年12月29日

Web制作におけるアクセシビリティ対策

ホームページをつくるときのアクセシビリティ対策について。

よんなーハウス@ネット部では基本的に次のことに気をつけてホームページを作っていこうと思います。

参考にした図書は「ウェブユニバーサルデザイン」近代科学社

よんなー倶楽部@ネット部のアクセシビリティ対策

  • 画像には代替テキストを付ける。
    • 装飾のためだけの画像には空の代替テキストを付ける。
      • しかし装飾のためだけの画像はなるべくCSSで描く。そうすればスクリーンリーダーで読まれない。
    • リンク画像では代替テキストでリンク先がわかるようにする。
      • リンク画像では同時にtabindex属性でタブフォーカスを取得できるようにする。
  • HTML5の意味あるタグを適切に使い文章構造をシンプルにわかりやすく構築していく。
  • 見た目と読み上げ順を同じにする。
    • HTML文章の表示順をCSSで入れ替えない。
  • 視覚情報だけに頼らない。
    • 例えば「下のボタンを押してください」はNGで、そのときはボタンに名前をつけて「下の○○というボタンを押してください」と書く。
  • 文字のコントラストや大きさを読みやすくする。
  • 文字のサイズ指定にはemやremを使い拡大縮小に対応する。
  • キーボードのみで操作できるようにする。
    • タブでフォーカスが適切な場所に適切な順で移動できるように。
    • なるべきデフォルトでタブフォーカスが得られるコントロール(ボタン等)を使う。
  • 自動的に切り替わるコンテンツは使わない。
  • 激しく点滅するコンテンツは使わない。
  • 各ページ共通のヘッダーやメインメニューはスキップできるように「本文へ移動する」リンクをページ先頭に付ける。
  • ページタイトルを適切に書く。
    • 今どのサイトのどのページにいるかわかるように。
    • タイトルの最初がページ名、つづいてサイト名。
    • 例: 「ページ名: サイト名」
  • キーボードフォーカスが意味ある順番で移動できるように。
  • 記事に「続きを読む」リンクを使う場合には、リンク先の内容が推測できるよう概略や抜粋をつける。
  • 入力フォームで入力エラーがあった場合にはエラー箇所をテキストで書き出し明示する。
  • 入力フォームのコントロールにはlabelタグを付ける。
    • スクリーンリーダーはコントロールにフォーカスが移ったときにそのlabelを読み上げてくれる。

カテゴリー: Tips

カテゴリー

アーカイブ