ウェブアクセシビリティ

アクセシビリティとは

アクセシビリティとはできるだけ多くのユーザーにとって、提供されるコンテンツにアクセスできるようにすることです。

Web においては想定されるユーザーのウェブサイトの閲覧環境が非常に多様で、プラットフォームや OS やデバイス性能の優劣関係なく動作し、障碍などさまざまな特性を持ったユーザーであってもできるだけウェブコンテンツを解釈できるように考慮したりします。

アクセシブルな Web を実現するために

ブラウザは HTML や CSS や JavaScript などを解釈してウェブコンテンツを構築しますが、それぞれのリソースに記述されるコードによってブラウザのユーザー操作の補助機能が動作します。

つまり、HTML や CSS や JavaScript でアクセシブルな実装ができていないとブラウザの支援技術が正しく動作しないことがあります。アクセシブルな実装を行うためには、HTML Standard や WCAG の記載に則った実装をするとよさそうです。

しかし、あくまで実装の解釈を行うのはブラウザであり稀にブラウザごとで挙動が異なることがあるのでそれぞれのブラウザで意図する動作をしているかを確認することも大切です。

アクセシビリティツリー

ブラウザではウェブコンテンツの要素ごとのアクセシビリティ情報について、アクセシビリティツリーというツリー構造のデータを生成して解釈しています。

また、アクセシビリティツリーは DOM と CSSOM（CSS から生成されるスタイルのツリー構造データ）を元に生成されます。なので、場合によっては CSS をウェブサイトに使う前と使う後でアクセシビリティ情報が変わっていることがあるので注意をする必要があります。

CSS に影響を受けるアクセシビリティツリーの例

display: none;

要素を非表示にする display:none を適用するとアクセシビリティツリー上でもその要素のコンテンツがされます。なのでスクリーンリーダーなどでも display:none が適用された要素は認識されません。

また、Webkit で動作しているブラウザ（Safari など）のみで、特定の CSS を適用するとアクセシビリティツリーが変更される場合があります。

table 要素

table 要素に対して display スタイル属性の table 以外の block や inline などの値を適用したときに、 table 要素は table role を失います。なのでやむを得なく display: table 以外の値を適用したいときには table 要素に対して明示的に table role を付与する必要があります。

list-style

よく使われる HTML 要素としてリストがありますが、 list 要素の左側に表示される装飾を消すために list-style: none を適用すると list 要素の list role を失います。リストとして扱いたい場合にはこれについても明示的に list role を付与する必要があります。

おまけ

display: contents;

仕様では display: contents はセマンティクス的に影響を及ぼすものではありませんが、2022年12月現在のブラウザでは、バグで影響を及ぼしてしまう挙動をしています。

display: contents を適用した要素の role が消える事象が起きるので、明示的に意図している role を付与しておく必要があります。

このように、HTML などで DOM を構築しても CSS によってアクセシビリティが変化することがあり得るのでスタイルを適用する際にも注意をする必要があります。