Web関連

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

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)対応サイト制作

ユーザービリティの向上

ホームページ制作

webサイトにおけるアクセシビリティの考え方前のページ

【Web制作】モバイルファーストとは?スマホが手放せない現代でのWeb設計次のページ

ピックアップ記事

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

関連記事

  1. Web関連

    ホームページ制作会社が教えるインフォグラフィックの基礎、ピクトグラムの作り方

    デザイナーに限らず、インフォグラフィック好き!という方、多いのではない…

  2. Web関連

    ワイヤーフレームを作る前に気を付けたい5つのこと~リニューアル編~

    Webサイトを持っていることが当たり前になった昨今、新規構築よりリニュ…

  3. Web関連

    webマーケティング One to Oneマーケティングってなんだ?

    実はまじめなこともちょっとは書ける吉田です。今回もまじめにOne …

  4. Web関連

    モバイルフレンドリーってなんだ?

    こんにちは!写真のことなら私、デザイナー出口です。先月ゴールデ…

  5. Web関連

    ホームページ制作会社が紹介する情報共有を加速させる方法3選

    みなさん、「情報共有」できていますか!!I…

  6. SNS関連

    マーケティングツールとしてSNSを使いたい

    消費者のロイヤリティーを向上させるマーケティングが重要マーケティン…

おすすめ記事

最近の記事

  1. 意外と身近なVUI~必要なのはあなたの声だけ~
  2. ここまで来た!ARが魅せる未来
  3. キャッシュレス決済で財布を持たずにお出かけできる時代がやって…
  4. 「モノ」から「コト」へ。変わる購買理由。
  5. 家で学ぼう

アーカイブ

  1. Web関連

    古くなったWebデザインを刷新したい
  2. Web関連

    【Web制作会社に聞く】一番良いCSSってなんだ!?
  3. Web関連

    知っておかないと損をするWebフォントとは!
  4. Web関連

    拡大化するサブスクリプションサービスについて考えてみる
  5. Web関連

    採用希望者数を増加させたい
PAGE TOP