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

関連記事

  1. Web関連

    大切なマイナンバーを守るために

    ついに開始されたマイナンバー制度ですが、使い方や管理方法には注意が必要…

  2. Web関連

    ホームページ更新時に見直したい。事例から学ぶサイト小改善

    昨年、人生で初めて髪を染めました。元々カットのみの予定だったのです…

  3. Web関連

    規制に苦しむ、パチスロ業界の動向について

    パチスロ業界は、時代の流れの影響を受けやすい業界だと言われています。年…

  4. Web関連

    web制作会社を選ぶポイント

    ホームページを作りたいと思ったときに、まずWeb制作会社を探すと思いま…

  5. Web関連

    ホームページ更新の手間を省きたい

    ホームページは作って終わりではありません。常に新しい情報を掲載するなど…

  6. Web関連

    意外と知らない!?レスポンシブデザインにある落とし穴(Media Query編)

    私の隣にはデザイナーがいます。しかもかなり若いです。19歳。若過ぎる!…

おすすめ記事

最近の記事

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

アーカイブ

  1. Web関連

    システム開発で大事なテストプロセス改善のポイント
  2. Web関連

    オンリーワンと地道なチューニング
  3. Web関連

    ホームページ制作会社も注目するLINE公式アカウントがおもしろい!
  4. SNS関連

    SNSマーケティングって何すればいいの? - 第1弾! –
  5. Web関連

    新しい販売形態であるDtoCについて考えてみる
PAGE TOP