ウェブアクセシビリティとは？向上させるメリットやコーダーができることを紹介します
あなたは、ウェブアクセシビリティについて以下のような疑問を抱いていませんか？
- ウェブアクセシビリティって聞いたことはあるけど、そもそもなんなのかな
- ウェブアクセシビリティには対応した方が良いのかな
- ウェブアクセシビリティに対応するには、何から始めるのが良いのかな
この記事では、ウェブアクセシビリティの概要や向上させるメリット、そしてコーダーができるウェブアクセシビリティを向上させる方法の例をお伝えします。
目次
ウェブアクセシビリティとは、Webサービスの利用しやすさ
まずウェブアクセシビリティとは、「ウェブ」と「アクセシビリティ」という二つの単語に分けることができます。
そして「アクセシビリティ」は、「Access（利用する権利）」と「Ability（能力）」という二つの単語に分けることができ、「利用しやすさ」と訳すことができます。
つまりウェブアクセシビリティとは、Webサービスの利用しやすさのことなのです。
具体的には、例えば以下のような状態がウェブアクセシビリティを考慮したWebサービスと言えます。
- 目の不自由な人でも、音声読み上げツールによって内容を理解できる
- マウスが使えなくても、キーボードだけで操作できる
ウェブアクセシビリティを導入するメリット
ウェブアクセシビリティを導入するメリットは、以下の二つです。
より多くの人が、Webサイトを使いやすくなる
一つ目のメリットは、より多くの人が、Webサイトを使いやすくなる、というものです。前述の例でも挙げたように、ウェブアクセシビリティを導入することでより多くの人がWebサイトを使えるようになります。
また障害を持たない人にとっても恩恵があります。例えば画像の代替テキストは目の見えない方々にとって役立つものですが、通信状況などが理由で画像がうまく表示されない場合にも役立ちます。
コンピュータにとっても優しいサイトができる
ウェブアクセシビリティの導入は、人間だけでなくコンピュータにとっても役に立ちます。というのも検索エンジンなどのクローラー（Webサイトの情報を取得するプログラム）は、アクセシビリティのために書かれたコードも見てWebサイトの内容を読み取っているからです。
コーダーからでもはじめやすい、アクセシビリティを向上させる方法
ここではコーダーからでもはじめやすい、アクセシビリティを向上させる方法をご紹介します。実際はデザインなども含めて考慮すべきポイントは他にもあるのですが、コーダーが実行しやすそうなものをいくつかご紹介します。
セマンティックコーディングをする
セマンティックコーディングとは、HTML要素を適切に使い、意味のあるコードを書く、という意味です。Webサイトの文脈に応じて、それに合ったHTML要素を使えば、スクリーンリーダー（音声読み上げツール）などの支援技術がWebサイトの構造を正しく理解してくれる可能性が高まります。
具体例としては、文章中の見出しを<h1>~<h6>要素で実装することが挙げられます。
alt属性を適切に使う
alt属性とは、画像の代替として使われるテキストのことです。例えば以下のように書いた場合、macosのスクリーンリーダーであるVoiceOverでは「サンプルのテキスト、イメージ」と読み上げられます。
“`HTML
<img src=”img/sample.jpg” alt=”サンプルのテキスト” />
“`
また、通信状況などが理由で画像が表示されなかった場合は、このテキストが表示されます。
alt属性には文脈に合ったテキストを入れる必要があります。わかりやすいのは、ロゴなど文字情報を画像として挿入する場合です。この場合には、画像内の文字情報をalt属性に入れることでアクセシビリティの向上が期待できます。
一方で、単なる装飾などの画像には無理にalt属性に値を入れる必要はありません。alt=””と空の値を設定するのがおすすめです。
キーボードから操作できるようにする
3つめの方法は、キーボードから操作できるようにすることです。通常、a要素、button要素やinput要素などはtabキーで選択できるようになっています。したがって、Webサイト上のクリックできるものはこれらの要素のいずれかで実装しましょう。例えば、ハンバーガーメニューのアイコンはdiv要素よりもbutton要素で実装した方が良いです。
またtabキーで選択した際に、選択状態であることがユーザーに伝わるようにするのも重要です。例えば以下のように書くと、キーボードでbutton要素を選択したときに要素の周りに赤い枠線が引かれ、選択中であることが伝わりやすくなります。
“`CSS
button:focus-visible {
outline: 3px solid red;
}
“`
アクセシビリティを理解するのに役立つ資料
ウェブアクセシビリティは奥が深く、考慮すべきことがたくさんあります。ここでは、ウェブアクセシビリティを知り、実装するのに役立つ資料を2つ紹介します。
- デジタル庁『ウェブアクセシビリティ導入ガイドブック』
- W3C Web Accessibility Initiative (WAI)『ARIA Authoring Practices Guide』
デジタル庁『ウェブアクセシビリティ導入ガイドブック』
こちらのガイドブックには、ウェブアクセシビリティの概要、規格や意識すべきポイントが書かれています。まずはこのガイドブックで概要を知るのがおすすめです。
W3C Web Accessibility Initiative (WAI)『ARIA Authoring Practices Guide』
HTMLに役割を追加できる仕様、WAI-ARIA属性を使ったアクセシブルなコンポーネントの実装例が掲載されています。コードを書く際の参考にするとよいでしょう。
まとめ
この記事では、以下をお伝えしました。
- ウェブアクセシビリティの概要
- ウェブアクセシビリティを導入するメリット
- ウェブアクセシビリティの導入例
ウェブアクセシビリティを意識して、より多くの人にとって使いやすいWebサイトを目指しましょう。
