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

ユーザービリティの向上

ホームページ制作

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

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

ピックアップ記事

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

関連記事

  1. Web関連

    スマートフォン専用サイトに力を入れないといけないワケ

    こんにちは。2月~4月にかけて花粉症で目の痒さに悩まされるデザ…

  2. Web関連

    アプリを制作する前に知っておきたいこと~デメリット編~

    みなさん、スマートフォン(以下、スマホ)やタブレットのカバーにこだわり…

  3. Web関連

    「なんでついて来るの!」あのストーカー広告について整理してみる

    女性A:「このサイトの広告...いつもどのサイトにも表示されている..…

  4. Web関連

    スパイスの効いたWebサイトをまとめてみた

    夏の暑い⽇に汗をかきながら⾷べるカレーはどうしてこんなにおいしいのでし…

  5. Web関連

    日本の美徳を活かしたインバウンド接客をとりいれよう!

    みなさん、最近外国人の方とすれ違うこと多くなってきていると思いませんか…

  6. Web関連

    服は買うから借りるの時代??ファッションレンタルサイト

    みなさんファッションに興味はありますか?私は学生の頃にコーディネートの…

おすすめ記事

最近の記事

  1. 【3分で解説】これから始まる自動車教習所のオンライン学科教習…
  2. 約1年間のウィズコロナ生活で大きく変わったもの
  3. スマートストアにより、小売業は激変する
  4. 【化粧品業界×最新技術】AIが化粧品のアドバイザーに!?
  5. AI技術の普及により移動も安全に

アーカイブ

  1. Web関連

    切っても切れないデザインと色の話
  2. Web関連

    Webサイト売上げアップに使える”行動心理学” その3
  3. Web関連

    顧客ロイヤリティを上げる為に…信頼されるWebサイトを 作るのに必要…
  4. Web関連

    クラウドファンディングで商品化された事例4選
  5. Web関連

    善し悪しが2分されるパララックスデザインってどう思います?
PAGE TOP