• コーディング ファクトリーHOME
  • Coding Methodology
  • 第131回 アクセシビリティ対応でありがちなミスと解決方法

コーディングメソドロジー

第131回 アクセシビリティ対応でありがちなミスと解決方法

昨今では当たり前になりつつある、ウェブアクセシビリティ対応。徐々に基礎的な理解の共有は進んでいるように思いますが、今回は実際の制作現場で頻出している、ついついやってしまいがちなミスと解決方法をご紹介したいと思います。

その1:リンク箇所を色の違いのみで表現してしまう。

図1.リンクの表現

アクセシビリティ対応で色々と留意点の多いリンクですが、中でも多いミスが色の違いのみでリンクを表現してしまうこと。これだけでは年配の利用者や、色の識別ができない利用者、モノクロのディスプレイを使用している人などは、対象箇所がリンクだと気付かないことがあります。
リンクテキストに下線を引いたり、アイコンを付与するなど、対象箇所がリンクであることを色以外の方法でも表現することが必要です(図1を参照)。

その2:テキストの太さを変えることだけで強調や重要性の意味合いをもたせようとする。

テキストの太さを変えることだけでは、音声閲覧環境の利用者には強調していることや重要性は伝わりません。
強調や重要性を持たせたい場合は、b要素やCSSで視覚的に表現するだけではなく、強調する場合はem要素、重要性を表現する場合はstrong要素を用いてhtmlの構造で、強調や重要性が伝わるようにしておきましょう。

その3:背景画像と文字のコントラスト比が4.5:1未満になっている。
(特に背景画像に明部と暗部がある場合)

図2.コントラスト比について

ウェブコンテンツのアクセシビリティガイドライン、WCAG(Web Content Accessibility Guidelines)の達成基準レベルAAでは、コントラスト比は4.5:1以上に保ちましょうと定められています。
背景画像にグラデーションがかかっていたり、多くの色が使われている場合はコントラスト比が低い部分も4.5:1以上であるか、しっかり確認してみましょう(図2を参照)。
カラー・コントラスト・アナライザーなどのツールで簡単にコントラスト比を確認できます。

Colour Contrast Analyser

その4:文中に「こちら」や「下記」「上記」を使用し、それが何を指しているのかわからない。

リンクテキストで「こちらから」などもありがちですが、リンクでなくともこれらの指示語は、なにを指しているのかが判別しにくいです。
特に音声閲覧環境の利用者からは、何を指しているのか全くわからないので、基本的には指示語を使用しないテキストにしましょう。日常会話でも文章でも指示語を使う機会は多いのでついつい使ってしまいますが、ウェブサイトのテキストを考える際は少し慎重になってみましょう。

その5:ロゴをh1要素としてしまう。

ウェブ制作者のあいだでも様々な意見があるようですが、現状は「h1要素はページの主題となる見出しに使用する」というのがアクセシビリティ上良しとされています。
少し考えてみると、ページの主題がh1要素で理解できれば、そのページの内容が自分に必要かどうか冒頭で判断が可能です。音声閲覧環境の利用者やディスプレイが小さい場合などを想定すると、できるだけ早い段階でそのページに欲しい情報があるかどうか判別できるほうがアクセシブルですよね。

いかがだったでしょうか?
いずれも複雑なことではありませんが、小さいポイントの積み重ねでアクセシビリティの高いウェブサイトが構築されるのだと思います。「もう知っているよ!」という方も改めてチェックをする機会にしてみて下さい。

  • 大規模サイト制作のご案内 大規模サイトプロジェクトのポイントやサービス内容をご紹介
  • コーディングメソドロジー
  • コーディングファクトリートピックス
  • 受注活動サポートサービス
  • コーディングファクトリーニュース
  • IllustratorでのWebデザイン
  • 求人案内
  • 株式会社モノサス
  • お問い合わせ

    コーディング相談ダイヤル

    お問い合わせ

  • ご相談、お問い合わせフォーム

    ご相談、お問い合わせフォーム