Web関連

Webアクセシビリティの基礎の基礎

0

Web担当者の皆様は、アクセシビリティと言われて何を想像されますか?一般的にWebアクセシビリティの向上と言うと、高齢者や障がい者の方々が利用しやすいWebサイトづくりの事を言います。
今回は、そんなWebアクセシビリティ向上において最低限行わなければならないことをご紹介します。が、その前に何をもってWebアクセシビリティが向上したか、その判断材料についてご紹介します。

「JISX8341-3」というもの

Webアクセシビリティの向上を考える上で、必ず手元にあった方が良い資料があります。それは「JISX8341-3」いわゆるJIS規格というものです。規格名称は「高齢者・障害者等配慮設計指針―情報通信における機器,ソフトウェア及びサービス―第3部:ウェブコンテンツ」となっており、この中にWebアクセシビリティについての規格が記述されています。

この規格に沿ったWebサイトかどうか。というのがWebアクセシビリティのレベル(高・中・低)になってくるのです。これからご紹介する内容は、この規格の中でも比較的容易に実装ができるものを取り上げております。

それでは、具体的な内容をご紹介していきます。

コントラスト比を考えよう!

色使いの話です。前述したJIS規格では、以下のように記述されています。

> テキスト及び画像化された文字の視覚的な表現には,少なくとも4.5:1 のコントラスト比がなければならない。(一部抜粋:高齢者・障害者等配慮設計指針―情報通信における機器,ソフトウェア及びサービス―第3部:ウェブコンテンツ)

規格上、コントラスト比は数値で記述されていて「4.5:1」です。前景色と背景色の相対輝度のことを言っています。背景に画像を置いて、その上に文字情報を置いていた場合、意識した方が良いことです(可読性を考える)。とはいえ、目で見てわかるものではありません…。

そこで、コントラスト比を調査してくれるツールを見つけましたので、併せてご紹介します。コントラスト比を調査したい場合には、ご活用ください。

http://alfasado.net/apps/colortester-ja.html

次はHTMLソース内の画像についての話です。
皆さまのWebサイトの中で、画像を利用していないというサイトはないと思いますが、ここにも規格があり、「代替テキストに関するガイドライン」という項目です。
内容は、サイト内のimg要素にalt属性があるかどうか、alt属性を画像に合わせて適切に設定しているかなどです。

これは、様々な意図がありますが、恐らくは「音声ブラウザ」を利用する方々に向けたものだと思います。
音声ブラウザは、サイト内のテキストを認識し、読み上げるブラウザとなっています。
もちろん機械ですから、画像を認識することは困難です。そのため、音声ブラウザはimg要素のalt属性に設定されたテキストを読み上げるようになっています。alt属性を適切に設定していないと、利用者に情報を伝えることができないのです。

このように、画像に対してalt属性が設定されているかもWebアクセシビリティ向上では重要なことなのです。

まとめ

いかがでしたでしょうか?
基礎のさらに基礎編としてご紹介いたしましたが、皆さまのサイトは規格に沿っていますか?改めてご自身のサイトを確認し、できていない場合は、改善を図ってみてください。
今回ご紹介したことはどれも簡単なことですが、小さな気遣いがWebアクセシビリティの向上に繋がります!また機会があれば、Webアクセシビリティについてもっと深くご説明したいと思います!お楽しみに(^^ゞ

By Consultant Keisuke Itoi

ホームページ制作でお困りの方はホームページ制作会社ティファナにご相談ください!

お問い合わせはこちらから

関連するサービス

JIS規格(JIS X8341-3:2010)対応サイト制作

ユーザービリティの向上

ホームページ制作

0

そのオムニチャネル、大丈夫ですか?前のページ

デジタルビジネス、ちゃんと説明できますか?次のページ

ピックアップ記事

  1. 新しい販売形態であるDtoCについて考えてみる
  2. 大手企業も注目するMaaS(Mobility as a Service)とは何か…
  3. AIに求められているものは、実は意外な物だった
  4. 新型コロナウイルスで日本の働き方改革が起こる

関連記事

  1. Web関連

    ちょっとした工夫で劇的に変わる!ユーザーにウケるブログの書き方

    どうも、今回のコラムを担当することになりましたデザイナーの尾崎です。前…

  2. Web関連

    聞いた事ある?マーケティングオートメーション

    なにやら巷には「マーケティングオートメーション」なるものがあるようで、…

  3. Web関連

    Web制作にも使えるかもしれない面白い心理学を集めてみました。No,4

    心理学をずっと紹介してきましたが、読んでいて分かるように人間性を見極め…

  4. Web関連

    Web制作会社が考える品質管理で重要な3項目

    今回はWeb制作における品質管理で重要な3項目を書きたいと思います。…

  5. Web関連

    ホームページ制作におけるHTMLのソースレビュー

    こんにちは、システムエンジニアの小森です今…

  6. Web関連

    読むべし!アプリ開発初心者のための本

    昨今アプリ開発はまったくの初心者でもできてしまうようで、市場では数多く…

おすすめ記事

最近の記事

  1. 人間拡張×AIで非接触なデジタル化を推進する
  2. ヘルスケアはAI先生にみてもらう時代
  3. withコロナは非接触技術で生活しよう!
  4. デジタル接客+AIで非接触を推進する
  5. 遠隔診療や遠隔医療普及のポイントはAIと5G

アーカイブ

  1. Web関連

    万能のUIなんか存在しない!?
  2. AI関連

    AI(人工知能)がデータを分析して正確に在庫管理するサービス・システムが続々実用…
  3. Web関連

    「一度だけ客」をリピーターに変身させる方法
  4. Web関連

    ブログ・コラムを毎日更新するWebライティングの5つの秘訣
  5. AI関連

    広告効果抜群!AIで注目もコンバージョンもアップ
PAGE TOP