The WebAIM Million (100万のホームページに対するアクセシビリティ自動検証) : 2022年の調査

ウェブアクセシビリティ向上のために活動している米国の非営利団体 WebAIM (Web Accessibility in Mind) が実施した、「The WebAIM Million」という調査があります。The Majestic Million や Alexa Top Sites などを基に、メジャーどころの100万ウェブサイトを採り上げ、ウェブアクセシビリティ検証ツール「WAVE」のエンジンを用いて自動検証を行ない、定量的に傾向を分析する、というものです。

今回、その第4回となる調査が、2022年2月に行なわれました。調査結果の詳細は WebAIM サイトの「The WebAIM Million - The 2022 report on the accessibility of the top 1,000,000 home pages」でご覧いただけますが、以下、気になるものを抜粋します。

全体的なエラー件数の推移

100万ホームページでトータル50,829,406件のエラー、つまり1ホームページあたりの平均で50.8件ものエラーが検出されています。2021年の結果が平均51.4件であったことを踏まえると、ほぼ横ばいと言えます。これらは WAVE が「エラー」として自動検出したものですが、ユーザーに著しい影響を与えるアクセシビリティ上の問題 (WCAG 達成基準のレベル A および AA への不適合に相当する状態) を指摘するものであり、メジャーなウェブサイトにおいて、こうした問題が1ホームページあたり平均で50を超えたままである、というのは残念な結果だと言えるでしょう。

WCAG への不適合

96.8%のホームページで、何らかの WCAG への不適合が検出されています。2021年の97.4%という結果と比較しても、ほぼ横ばいと言えます。主な WCAG 不適合の種類ごとに見てみると、以下の通りです。

WCAG 不適合の種類2022年2021年2020年2019年
低コントラストのテキスト83.9%86.4%86.3%85.3%
画像の代替テキスト不備55.4%60.6%66.0%68.0%
空のリンクラベル50.1%51.3%59.9%58.1%
フォーム入力要素のラベル不備46.1%54.4%53.8%52.8%
空のボタンラベル27.2%26.9%28.7%25.0%
ページ全体の lang 設定不備22.3%28.9%28.0%33.1%

テキストのコントラスト

上のテーブルが示すとおり、ほとんどのホームページ (83.9%) で、WCAG 達成基準 (AA) を満たさない低コントラストのテキストが見られます。

また、1ホームページあたりで見ると、低コントラストのテキストのインスタンスは、平均して31.6箇所という結果になっています (2021年の調査では平均で31箇所なので、ほぼ変わらずという結果です)。

画像および代替テキスト

上のテーブルが示すとおり、5割強のホームページで、画像の代替テキスト不備が見られます。

今回の調査対象では合わせて39,750,181枚の画像が検出されており、平均して1ホームページあたり39.8枚の画像があることになりますが、このうち23.2%、つまり1ホームページあたり平均9.2枚の画像で、alt 属性の不備がある、という結果になっています (alt があって属性値が空のものは除く)。なお、その約半数はリンク画像であり、スクリーンリーダーのユーザーにとっては、リンクラベルのないリンク、ということになります。

一方、代替テキストがある画像のうち10.4%は、alt 属性があってもその内容に問題が見られる、という結果になっています (単に「画像」と書いてあったり、ファイル名だったり、隣接するテキストと重複する内容だったり、など)。

フォーム入力要素のラベル

上のテーブルが示すとおり、5割強のホームページで、フォーム入力要素のラベル不備が見られます。

なお、今回の調査対象では合わせて440万ほどのフォーム入力要素が検出されていますが、そのうち39%は適切なラベル付けがなされていない (<label> 要素、aria-label 属性、aria-labelledby 属性、のいずれも実装されていない) という結果になっています。2021年の調査の45%、2020年の調査の55％、2019年の調査の59%、という結果を踏まえると、よい傾向にあると言えるかもしれませんが、まだまだ改善の余地があるなという印象です。

見出し

100万ホームページでトータル2,320万ほどの (つまり1ホームページあたり平均で23の) 見出しが検出されています。2021年の結果 (トータル2,150万ほど) より1割近く増えていることも踏まえると、HTML 要素 (<h1> - <h6>) を用いて見出しをマークアップすることが、それなりに実践されていると言えるかもしれません。

ただし、19.6%のホームページで複数の <h1> 要素が存在する、40.4%のホームページで見出しレベルのスキップ (例 : <h2> の次は <h3> ではなく <h4>、といった具合) がある、9.9%のホームページで見出し要素がまったく存在しない、という結果も併せて見られます。

ランドマーク

75.3%のホームページで、1つ以上の WAI-ARIA ランドマークが実装されています。2021年の調査の69.1%、2020年の調査の68.9%、2019年の調査の62.4%、という結果を踏まえると、着実に増えていると言えるでしょう。

36%のホームページに、「メイン」ランドマーク (<main> または role="main") が存在しています (2021年の調査では30.1%)。

19.9%のホームページに、「検索」ランドマーク (role="search") が存在しています (2021年の調査では17.6%)。

「ナビゲーション」ランドマーク (<nav> または role="navigation") が存在するホームページでは、平均で2.3個のナビゲーションのリージョンがあります。

ARIA

今回の調査では、60,227,207 個の ARIA 属性が検出されています。平均して1ホームページあたり60個の ARIA 属性が存在することになります。対前年比で26％の増加、2019年と比べると約3倍に増えている、という結果です。

実際に ARIA 属性 (上述のランドマークを除く) が存在するホームページは74.6%にのぼり、2021年の調査の68.1%、2020年の調査の64.6%、2019年の調査の60.1%、という結果を踏まえると、WAI-ARIA を採用するサイトが着実に増えていることがうかがえます。ただし、ARIA 属性が存在するホームページでは、そうでないホームページに比べて、平均して7割ほど多くのエラーが検出されている結果となっており、ARIA の不適切な実装がかえってアクセシビリティの阻害につながっているケースが多そうです。

なお、各ホームページには平均して11.4個の aria-label、aria-labelledby, または aria-describedby 属性が存在しています。こうした ARIA を介したラベルや説明の実装は、ここ2年間でほぼ倍増しています。

また、各ホームページには平均して11個の aria-hidden="true" 属性があり (2021年の調査では8.9個、2020年の調査では6.6個)、インタラクティブにコンポーネントの表示/非表示を切り替える UI の増加がうかがえます。

あいまいなリンクラベル

18％のホームページで、あいまいなリンクラベル (「click here」「more」「continue」など) が見られます。なお、これらのページでは、ページあたりの平均で5.9個のあいまいなリンクラベルのインスタンスが検出されています。

その他

その他、以下の興味深い結果も見られました。

関連記事