web-accessbility

Webサイトを制作する際、意識すべき重要なポイントのひとつに「アクセシビリティ」があります。アクセシビリティを高めるためには、具体的にどのようなことに注意すればいいのでしょうか。ここでは、アクセシビリティの基礎や具体的な達成基準のほか、気をつけるべきポイントを解説します。


目次

アクセシビリティはアクセスのしやすさのこと

アクセシビリティとは「アクセスのしやすさ」のことで、Webサイトを訪問する人の使い勝手に大きく関わります。せっかく魅力的なコンテンツを用意しても、アクセシビリティが低いとユーザーの満足度を下げてしまうおそれがあります。アクセシビリティは、Webサイトの見やすさや使い勝手など、幅広い要素を含んだ言葉です。

それに対して、「ユーザーの使い勝手」という意味でよく用いられるのが「ユーザビリティ」という言葉です。アクセシビリティとユーザビリティは、似ているようで明確に定義が異なります。

アクセシビリティとユーザビリティの違い

アクセシビリティは情報にアクセスできるかどうか、ユーザビリティはアクセスできる上でさらにユーザーに使いやすいか、見つけやすいかという視点が違います。

アクセシビリティは、視覚や聴覚に障がいを持っている人や高齢の人への対応というイメージをもたれることが多いようです。サイトへのアクセスのしやすさはサイトを閲覧するときの環境によっても左右されます。例えば、メガネを忘れた日は小さな文字を読みづらいですし、周囲が騒がしいときは音声を聞き取りづらくなるなど、誰もがアクセスするための障がいに直面することは考えられます。このように障がい者や高齢者だけではなく、あらゆる人や状況に意識を向けることが、アクセシビリティに向き合う第一歩になります。

ユーザビリティは、ユーザーがスムーズに情報を取得、理解でき、安心して利用できることへの取り組みです。
アクセシビリティとユーザビリティは重なる部分が多く、それぞれの役割の違いを把握した上で、どちらも最大限に高めることが大切です。

usability-and- accessibility

アクセシビリティは明確なガイドラインがある

アクセシビリティを高めるためには、具体的にどのような点に気をつけるべきなのでしょうか。
実はアクセシビリティは、国際的に明確なガイドラインが用意されています。そのガイドラインの内容に沿ってWebサイトを構築していけば、アクセシビリティを高められるわけです。

国際的な基準の「WCAG 2.0」と「JIS X 8341-3:2016」

Webアクセシビリティのガイドラインは「WCAG 2.0」と「JIS X 8341-3:2016」の2つです。
前者はアクセシビリティに関する団体「Web Accessibility Initiative」が策定し、Webで使用される各種技術の標準化を推進する為に設立された団体「W3C(World Wide Web Consortium)」がガイドラインの最新バージョンとして正式に発行したものです。後者は日本国内におけるJIS(日本産業規格)(注1)にもとづいてアクセシビリティを規定したもので、内容は同じものとなっています。
なお、現在ではWCAG 2.0がアップデートされ、モバイル端末などのガイドラインが追加された「WCAG 2.1」が勧告されています。2020年6月現在、JIS X 8341-3の理解と普及を促進する「WAIC」によって、一部日本語訳が公開されています。

(注1) JISはこれまで「日本工業規格」と呼ばれてきましたが、2019年7月の法改正により「日本産業規格」に名称が変更されました。

達成基準ごとに「A」「AA」「AAA」の評価がある

達成基準は、「A」「AA」「AAA」の3段階の適合レベルがあります。「A(25項目)」を最低限の達成基準とし、「AA(13項目)」「AAA(23項目)」と段階的に達成基準があがっていきます。ただし、「みんなの公共サイト運用ガイドライン」(総務省,2016年)では、公的機関に求めるレベルは「AA」としています。
一般企業では、予算やスケジュール、Webサイトの仕様などによって、目指す達成基準も変わってくるでしょう。

アクセシビリティガイドライン自体の内容や目指す適合レベルについての相談も含め、自社のサイトをアクセシブルなサイトに改修したい場合には、制作会社に相談するのがいいでしょう。

具体的なアクセシビリティの主要項目

達成基準「A」「AA」の達成項目とは、具体的にはどのようなものなのでしょうか?主要な項目をいくつかご紹介しましょう。
「Webサイトのアクセシビリティの状態を確認したい」という企業にとって、確認しておきたい主要な項目となるでしょう。

<達成基準「A」の項目例>
・ページの内容を表すページタイトルを設定する
・見出しやリストなどの文書構造を正しくマークアップする
・リンク先の内容がわかるリンクテキストを設定する
・画像と同じ役割を果たす、短い代替テキストを設定する
・文字色と背景色のコントラストを確保する
・キーボードだけでも操作できるようにする
・文字サイズや画面表示を利用者が変更できるようにする
・テーブルの構造を正しくマークアップする
・入力時のフォームのラベルを適切にマークアップする
・エラーメッセージではエラーの箇所と修正方法を明示する


<達成基準「AA」の項目例>
・ナビゲーションやユーザーインターフェース (UI) の一貫性がサイト内の隅々まで確保されるようになる
・文字は画像ではなくテキストで表現する(ロゴマークなどは除く)
・少なくとも4.5:1のコントラスト比を確保する
・モバイル環境で閲覧したときにも必ずピンチ&ズームができるようにする
・キーボード操作時のフォーカス移動を視覚的にわかりやすくする
・見出しおよびラベルが、主題または目的を説明するように設定する
・収録済の映像コンテンツに対して、内容を説明する見出しやテキストを提供する

これらはサイトの設計だけではなく、コンテンツの作り方にも関わる部分です。コンテンツ部分は、実際にサイトを運用してみないとわからないこともあります。その意味でも、アクセシビリティはサイト制作時だけでなく、公開後に運用するときも、引き続き気をつける必要があります。

まとめ

アクセシビリティは、「あらゆるユーザー」が正しく「情報にアクセスできるWebサイトであるための基準です。
達成すべき具体的な基準は、WCAG 2.0やJIS X 8341-3:2016といったガイドラインで定められていますが、まずは自社サイトが最低基準の「A」を満たしているかをチェックして、不足している部分については必要に応じて補っていきましょう。

ビジネス・アーキテクツでは、ご要望に応じて、アクセシビリティの達成基準に準拠したWebサイトの制作やリニューアルを行っています。アクセシビリティでお困りのことがあれば、ぜひご相談ください。

ABOUT AUTHOR

富本

富本

地元・愛知県の印刷会社や広告会社のウェブ制作部門にてウェブサイトのコーディングをメインに、大小様々なウェブ制作に携わる。2014年頃、BAに入社しフロントエンドエンジニアUNITに所属。ウェブサイトのコーディング、ガイドラインやコンポーネントの設計・作成のほか、ディレクターとしてと開発・運用の進行管理なども行っている。好きなキャラクターはリラックマ。行きたい国はイタリア。

関連情報

受験生に必要な入試情報サイトのオンライン...

Webサイト運用 Web戦略 入試サイト

受験生や保護者、高校教員といった受験に関係する人向けに大学が公開するサイ...

Webサイトのアクセシビリティとは?意味...

Webサイト運用

Webサイトを制作する際、意識すべき重要なポイントのひとつに「アクセシビ...

制作会社の選び方を解説!失敗しないために...

Webサイト運用 社内調整

Webサイトの制作やリニューアルを行う際、最も重要なのは「どの制作会社に...

記事やサービスについてのご連絡・ご相談

タグ一覧

Webサイト運用 Web戦略 グローバルサイト 社内調整 ブランディング 入試サイト

    SNSアカウント

    • Facebook
    • Instagram

    お問い合わせ