そのサイト、マウスなしで使えますか？ウェブアクセシビリティの話

記事

IT・テクノロジー

ウェブアクセシビリティについてカジュアルに話してみたいと思います。

それほどコーディング知識のないサイト運営者や、これからWebサイトを作ろうとしている方にもわかるようになるべく噛み砕いていきたいと思います。

ウェブをブランジングする時って、基本的にマウス、スマホやタブレットならタッチ操作をイメージすると思います。

でも、障がいや怪我などでマウスやタッチ操作が難しい場合もありますね。そんな時アクセシビリティを確保できていないと、そのサイトの利用が困難になってしまうことがあります。

そういう時の代替手段として様々なポインティングデバイスもありますが、一番身近なものにキーボードがあります。

ウェブアクセシビリティのガイドラインでは、キーボードで全てのコンテンツを操作できるようにしておきましょうという項目があります。

これが定められているのがWCAG2.1の[2.1:キーボード操作可能を理解する]という項目以下になるんですが、実際読んでみると理解するのにかなり難儀します(この項目だけじゃないですが)。

で、実際どんなことなのかという例を紹介してみたいと思います。

クリックしか効かない

そのうちの一つとしてよくあるのが、ウェブサイトがマウスのクリックにしか対応していないパターンです。

ウェブサイト内には様々なクリック可能要素がありますね？　

他のページへのリンクテキストだったり、メニューの開閉ボタンだったり、タブだったり、インスタやXの共有ボタンだったり。

マウスならそのままクリックするだけですが、これをキーボードで操作しようとすると、その要素に操作対象を移してEnterもしくは Spaceキーを押す、という動作が必要になります。(操作対象を移すことをフォーカスを当てる、移動させる、受け取るなどと言います)

一見簡単なようですが、これが一部実現できないサイトは多々あります。キーボードでクリックにあたる操作ができないのです。これは既に表示された状態から先のコンテンツにアクセスできないということを意味します。

これはコーディングによるものです。

ウェブサイトを構築する際に所謂セマンティックなコーディングと言われるものがあります。

これは「HTML要素をその意味や目的に応じて適切に使用し、コンテンツの意味や関係性を正確に表現すること」みたいに説明できるんですが、これが徹底されているページでは、クリック可能な要素をTabキーとShiftキーの組み合わせで全て移動することができます。

Tabキーを押せば次のクリック可能な要素に操作対象が移動し、Tabキー + Shiftキーで直前のものに戻ります。

例えばaタグやbuttonタグなどの要素は、Tabキーによる移動で操作対象になることができるので問題ありませんが、こういった要素をdivタグでコーディングしてしまっているケースがあります。

しかしdivタグは何も設定しなければ操作対象になることができません。フォーカスを受け取ることができないんですね。

この場合はdivタグにtabindex属性というものを適切に設定することでフォーカスを受け取ることが可能になるんですが、今度はその先、EnterキーやSpaceキーに反応しないというケースがあります。

divタグでコーディングしたボタンなどは、JavaScriptによってクリックを検知してクリック後の動作をさせていますが、その際マウスのクリックだけを検知対象にし、EnterキーやSpaceキーを考慮していないことで反応してくれないというわけです。

aタグやbuttonタグの場合は最初からEnterキーやSpaceキーにも反応してくれる様になっているので(厳密には条件がありますが)、クリック可能な要素を作成する場合は適切な要素を使用したいものです。

とはいっても様々な事情があるわけで、divタグを使用せざるを得ないケースもあるかもしれません。

その際はしっかりキーボード操作も考慮しておきたいものです。

以上が一つの例です。

ウェブアクセシビリティのガイドラインの基準は多岐にわたり、ひとつひとつそれに適合させていくのは大変ですが、まずは誰でも操作可能にしておくということはとても重要だと考えています。

ひとりでも多くの方に利用していただいた方がサイト運営者、利用者どちらにも恩恵があると思うのです。

この話もいつかできればと思います。