The WebAIM Million (100万のホームページに対するアクセシビリティ自動検証) : 2020年の調査
ウェブアクセシビリティ向上のために活動している米国の非営利団体 WebAIM (Web Accessibility in Mind) が実施した、「The WebAIM Million」という調査があります。The Majestic Million などを基に、メジャーどころの100万ウェブサイトを採り上げ、ウェブアクセシビリティ検証ツール「WAVE」のエンジンを用いて自動検証を行ない、定量的に傾向を分析する、というものです。
2019年2月に初回調査が実施されました。「アクセシビリティの祭典 2019」で「ウェブアクセシビリティ最新動向 2018 - 2019」というお話させていただいた際、この初回調査を採り上げたのですが、そのときは以下の傾向が見られました。
- 100万ページで、59,653,607 件のエラー。つまり1ページあたり 59.6 件ものエラー。
- 97.8%のホームページで、何らかの WCAG への不適合を検出。
- 低コントラストのテキスト (85%)、画像の代替テキスト不備 (68%)、空のリンクラベル (58%)、フォーム入力要素のラベル不備 (53%)、 ...
- 24.4％のホームページで、あいまいなリンクラベル ("click here", "more", "continue", etc.) を検出。
- 2,099,665 件ものレイアウトテーブルを検出。反面、データテーブルは 113,737 件。いまだにレイアウトテーブルが多く用いられている。
そして今回、その第2回となる調査が、2020年2月に行なわれました。初回調査からちょうど1年後、どのような傾向が見られたのでしょうか。調査結果の詳細は WebAIM サイトの「The WebAIM Million」でご覧いただけますが、以下、主なものを抜粋します。
WCAG への不適合
98.1%のホームページで、何らかの WCAG への不適合を検出しました。前回の97.8％より少し悪い数字です。内訳は以下のとおりです。
| WCAG 不適合の種類 | 2020年の調査 (不適合が見られたページ) | 2019年の調査 (不適合が見られたページ) |
|---|---|---|
| 低コントラストのテキスト | 86.3% | 85.3% |
| 画像の代替テキスト不備 | 66.0% | 68.0% |
| 空のリンクラベル | 59.9% | 58.1% |
| フォーム入力要素のラベル不備 | 53.8% | 52.8% |
| 空のボタンラベル | 28.7% | 25.0% |
| ページ全体の lang 設定不備 | 28.0% | 33.1% |
テキストのコントラスト
ほとんどのページ (86.3%) で、WCAG 達成基準 (AA) を満たさない低コントラストのテキストが見られました。なお、各ページあたりで見ると、低コントラストのテキストのインスタンスは、平均して36箇所ありました。
画像および代替テキスト
6割を超えるページで、画像の代替テキスト不備が見られました。なお、今回の調査対象では合わせて3,840万枚の画像が検出され、平均して1ページあたり38.4枚の画像があることになりますが、このうち31.3% (つまり1ページあたり12枚の画像) で、alt 属性の不備がありました (空の alt は除く)。その半数強は、リンク画像です。
フォーム入力要素のラベル
5割を超えるページで、フォーム入力要素のラベル不備が見られました。なお、今回の調査対象では合わせて420万ほどのフォーム入力要素が検出されていますが、その半数以上 (55%) は適切なラベル付けがなされていませんでした (<label> 要素、aria-label 属性、aria-labelledby 属性、のいずれも実装されていない)。
見出し
今回の調査対象では合わせて2,100万の見出し要素が検出されましたが、そのうち100万の見出し (つまり20あるうち1つの見出し) において、見出しレベルのスキップ (例 : h2 の次は h4、といった具合) が見られました。こうした不適切な見出し構造は39.1%のページで見られ、また12.4%のページでは見出しがまったくありませんでした。
ランドマーク
68.9%のページで、1つ以上の WAI-ARIA ランドマークが実装されていました。興味深いことに、ランドマークが実装されているページは、ランドマークがないページと比較して、(アクセシビリティ自動検証の) エラー検出数が少ないという傾向が見られました。ランドマークを実装するサイトでは、制作 / 運用チームの中で、アクセシビリティに対する意識が高いのかもしれません。
ARIA
64.6%のページで、1つ以上の WAI-ARIA 属性 (上述のランドマークを除く) が実装されていました。こちらも興味深いことに、ARIA が実装されているページは、ARIA がないページと比較して、(アクセシビリティ自動検証の) エラー検出数が60%も多いという傾向が見られました。ARIA 属性のコーディングに不備があるケースが多いようです。
あいまいなリンクラベル
24％のページで、あいまいなリンクラベル ("click here"、"more"、"continue" など) が見られました。これらのページでは、ページあたり5.4個のあいまいなリンクラベルのインスタンスが検出されています。
以上、いろいろと数字を挙げてみましたが、総じて言うと、ウェブアクセシビリティの改善の余地は、まだまだたくさんあるな、というのが正直な印象です。アクセシビリティ担保の基本的な定石、たとえばテキストの配色 (コントラスト)、画像の代替テキスト、フォーム入力要素のラベル、といったことですらまだまだ十分に浸透していない様子が見えますし、JavaScript によるインタラクティブな UI も、ARIA 属性のコーディングも含めて課題と言えそうです。 できるところからでよいので、少しずつでも改善されてゆくことを期待したいところです。