アクセシビリティ・テスト パート1

Julia Undeutsch
Julia Undeutsch

4分で読む

今日から、初めてのアクセシビリティ・チェックを始めます。ウェブサイトがアクセシビリティをどの程度実装しているかを監査し、問題点や改善すべき点を指摘します。

私がどのウェブサイトをレビューしているかは、彼らの承認を得るまでは、誰にも恥をかかせないため、また、私が評価を送った後に彼らがウェブサイトを更新し、よりアクセシブルにする機会を与えるために、公開しません。

アクセシビリティ・ツールとその使い方

市場で最高のツールの1つである無料のaxe DevTool拡張機能を使ってウェブサイトをテストします。 拡張機能を実行した後、40個の自動*問題が見つかりました。 これらはCritical、Serious、Moderate、Minorに分けられる。CriticalとSeriousの問題は、修正すべき最も重要なものです。詳しく見て、ウェブサイトを改善するために何ができるか見てみましょう。

*自動とは、アクセシビリティ開発ツールを使って脆弱性が発見されることを意味します。しかし、リストアップされた脆弱性がすべて修正されたとしても、ウェブサイトが完全にアクセシブルになったとは限りません。キーボードだけを使ったり、スクリーンリーダーを使ってウェブサイトを見たりして、本当にすべての問題を指摘し、修正するには、手動テストがまだ必要です。

要素には十分な色のコントラストが必要

深刻な問題のほとんどは、色のコントラストに関するものでした。ウェブサイト上のエラーを簡単に見つけるには、「Highlight」ボタンを有効にすることでハイライトすることができます。

問題の説明（axe Devtoolsによる）

前景色と背景色のコントラストがWCAG2AAのコントラスト比のしきい値を満たしていることを確認します。

弱視の人は色のコントラストが弱いため、コンテンツを読むのが難しいかもしれません。

原色

このボタンは十分なカラーコントラストを持っていません（白のHEXカラー値#FFFFFFに青のHEXカラー値#2FAFF5）。WebAIM Color Contrast Checkerを見ると、コントラスト比は2.45:1しかなく、かなり低いことがわかります。WCAG2.1 AAを満たすには、コントラスト比は少なくとも4.5:1である必要があります。この比率を達成するためには、青の輝度を32%まで下げる必要があります。

この色の組み合わせは、他の3つの問題の原因でもある。

無彩色

他の2つの問題は、小見出しに使われているグレーが原因である。

グレー(#737373)そのものは、白(#FFFFFFF)背景に8.59:1のコントラスト比で十分だが、rgba(115, 115, 115, 0.74)の不透明度が設定されているため、コントラストが弱くなり、2.95:1となっています。

解決方法

原色を暗い色に変え、不透明度を削除すれば、この問題は解決します。

要素には lang 属性が必要である。

デフォルト言語を設定することが重要です。そうしないと、スクリーン・リーダーは、オペレーティング・システムによって選択された言語を使用します。例えば、ドイツ語の単語をフランス語で発音した場合など、スクリーン・リーダーのユーザーが予想もしないような、ひどい、理解不能な音に聞こえることがあります。

問題の説明

すべてのHTML文書にlang属性を持たせます。

解決方法

ウェブサイトの言語（この場合は英語）を lang 属性で追加します。

<html lang="en">

<!--ドキュメントのheadとbody-->

</html>

単語や段落をデフォルト以外の言語で使用する場合は、このHTMLタグで直接言語を指定することもできます。

<p lang="es">

他言語テキスト

</p>

ここに、すべての言語コード参考のリストがあります。.

リンクには識別可能なテキストが必要

最後の重大な問題は、左上ヘッダーの会社ロゴの周りのアンカータグに関するものだ。

問題の説明

リンクに識別可能なテキストがあることを確認します。

<a href="#" class="logo-link w-nav-brand">

<img loading="lazy" src="https://logo.svg" alt="" class="image" />

</a>

ロゴの周りのリンクはクリックしてもどこにもつながりません。つまり、aタグの使い方が間違っているの です。でも、なるほどね。このウェブサイトはWebflowで作成されています。というのも、多くのウェブサイトはロゴをクリックするとホームページにリンクするが、ここではそうなっていないからです。

それが誤解を招くのです。スクリーン・リーダーのユーザーは、ロゴがaタグであるため、そのロゴをタブでクリックすることができます。スクリーンリーダーのユーザーは、alt属性やaria-labelによって、これが本当のリンクではないことを知ることができません。

解決方法

周囲の<a>タグは削除されるべきである。

href属性はリンク先と、画像のalt属性などの識別可能なテキストを取得します。このウェブサイトは1つのウェブページであり、ナビバーのリンクはページ内のセクション（ホームやaboutなど）にリンクしていることを意味します。リンク先は、ホームセクションのリンク先と同じです。

次のステップ

サイトのオーナーに連絡を取り、私の発見やヒントを共有し、誰もがアクセスしやすいウェブにするための変更が可能かどうかを尋ね、もちろん、必要であれば私の助けも提供する。

また報告しますよ。

アップデート 08/14/2022

ウェブサイトのオーナーから好意的なフィードバックをいただきました。彼と彼のウェブデザイナーは、私が挙げた問題点を見て、必要な調整を行う予定です。任務完了。

この記事の原文はdev.to/yuridevat