ウェブ・アクセシビリティに関するよくある4つの問題

コントラスト比の問題

私が長年にわたって見てきたアクセシビリティの問題で最も一般的なのは コントラストとカラー・アクセシビリティの問題コントラスト比が悪いと、ページのコンテンツが見えにくくなり、視覚障害者を含むユーザーにとって非常に有害です。

コントラストとは、2つの色の間の知覚される「輝度」または明るさの差を示す尺度であり、たとえば、ページ・コンテンツの背景色と前景色の差のことです。このナバーを見てみましょう。

あなたのクライアントがその緑がかった色をとても気に入っていて、素晴らしいと思っているとしましょう。私たちは #FFFFFF 背景には #83A94C この結果、コントラスト比は2.71:1となり、最小値を大幅に下回った。 4.5:1 必要です。この問題を検出するために、我々は複数の解決策を持っている：

1. のようなオンライン・コントラスト・チェッカーを使用する。 コントラストチェッカーこれは、コントラスト比を計算し、次のように表示します。 パス または 失敗 のグレードである。
2. ブラウザのコントラスト・チェッカー拡張機能を使う： WCAGカラーコントラストチェッカー.
3. ブラウザに統合されたコントラストチェッカーを試してみてください。Google Chromeで使用するには、開発ツールを開き、対象となる要素（例：ナビゲーションバーのホームリンク）を検査し、CSSのカラー・プロパティに移動して、カラー・レクタングルをクリックしてカラー・ピッカーを開きます。このプロセスはFirefoxでもまったく同じですが、比率が少し異なるだけで、カラーピッカーの左下に表示されます。

コントラストについての詳細はこちらをご覧ください。 コントラストとカラー・アクセシビリティ.

リンクテキストの問題

リンクは最近のウェブの大きな部分を占めているので、アクセスしやすくすることはとても重要です。リンクは意味を持ち、ユーザーにその文脈を伝えなければなりません。そのため、「続きを読む」「ここをクリック」「詳細をチェック」といったテキストが入った情報量の少ないリンクはあまり役に立ちません。 製品 例えば、「The Mandalorian Helmet（マンダロリアンのヘルメット）」のような商品名を使用する方が、より情報量が多くなります。例えば ここをクリック または もっと詳しく は省略可能です。なぜなら、リンクはデフォルトでクリック可能であり、"more about today's news "のようなものは "today's news "と短縮できるからです。リンクの長さに特別なルールや制限はありません。 リンクは読みやすくなければならない そして、その目的を十分に説明できるだけの長さがある。

リンクとしての画像は広く使われているパターンなので、上記で説明したのと同じルールに従わなければなりません。画像のalt属性は、リンクテキストの役割を果たし、スクリーン・リーダーによってアナウンスされます。画像をリンクとして扱う場合、複数のケースがあります。画像がリンクの唯一のコンテンツである場合、alt属性を持たなければなりません：

<a href="/ja/notifications/">
  <img src="/img/notification.png" alt="お知らせ">
</a>

リンクのアクセシビリティについては、こちらのリンクをご覧ください：リンクテキストと外観, 機能イメージ.

フォーム入力にラベルがない

ラベルがなく、入力の目的を説明するプレースホルダだけがあるフォーム入力を見たことがあるでしょう。最初の注意点として、ユーザーがすべての入力を入力し、プレースホルダーが見えなくなると、入力の目的に関する視覚的なコンテキストがなくなりますが、ここではアクセシビリティに集中しましょう。

を関連付ける。 ラベル ユーザーがフォーム入力にフォーカスしているときにスクリーンリーダーがラベルを読み上げ、ラベルがクリックされたりタッチ/タップされたりすると、ブラウザは関連する入力にフォーカスを移します。このような状況を簡単に解決するには、次のようにラベルを追加するだけです：

    名前

    
  

    姓

    
  

    Eメール

    
  

    投稿する
  

```

これで、すべての入力に関連するラベルが付き、誰でもアクセスできるようになりました。入力の目的が重複しないようにプレースホルダーを削除することもできますが、現実のシナリオはそう簡単ではないことは誰もが知っています。ラベルなしのフォーム入力があるデザインを受け取ったばかりで、クライアントはその部分を変更したくないのです。最初に思いつく解決策は 表示：なし または visibility: hidden； をラベルに追加すると、ラベルは非表示になりますが、ラベルはまだそこにありますよね？これらのプロパティは、画面上だけでなく、スクリーン・リーダー・ユーザーに対しても要素を非表示にします。

を使うことができる。 クリップパターン を使えば解決する。そうすることで、コンテンツを視覚的に隠しながら、スクリーン・リーダーにコンテンツを提供することができます。次のようなCSSを作成します。 srのみ クラスを作成し、それをすべてのラベルに適用する：

 .sr-only:not(:フォーカス):not(:アクティブ) { { {
   clip: rect(0 0 0 0)；
   clip-path: inset(50%)；
   height: 1px；
   overflow: hidden；
   position: absolute；
   white-space: nowrap；
   width: 1px；
 }

これにより、ラベルが非表示になり、スクリーン・リーダーが利用できるようになり、私たちのデザインにマッチします。その not(:フォーカス):not(:アクティブ) 擬似クラスは a, ボタン, 入力 フォーカスを受けたときに隠れないようにする。

フォーカスインジケーターなし

昔々、グローバルCSSスタイルシートでこれをやったことがある：

* {
outline: none; /* ひどい間違い */
}

2020年頃、Google Chromeのフォーム入力にフォーカスが当たったときや、タブインしたときにボタンに黒いボーダーが表示されることに気づいた。

そのとき、何が正しい方法なのかまったくわかりませんでした。 アウトラインは要素のフォーカスインジケータであり、削除する場合は明らかなフォーカススタイルを提供しなければならない。フォーカス・インジケータは自由にカスタマイズできますが、ウェブサイトから完全に削除することはアクセシビリティの大きな問題です。例えば、要素のフォーカススタイルをカスタマイズするのはとても簡単です：

 a:focus {
   outline: 4px solid #ee7834；
   アウトラインオフセット4px；
 }

アクセシビリティ・ツール

特にアクセシビリティについては、まだまだカバーしなければならないことがたくさんあります。そこで、アクセシビリティに対応するために、2つの優れたブラウザ拡張機能を用意しました。

WAVE評価ツール は、ウェブコンテンツをよりアクセシブルにするための評価ツール群です。Google ChromeとFirefoxの両方でご利用いただけます。

ナビバーとラベルのない入力を含む小さなウェブページで試してみましょう。拡張機能をインストールしたら、拡張機能のアイコンをクリックするだけで使えるようになります。

Summaryタブには、1つのエラー（フォーム要素にラベルがない）、2つのコントラストエラー、1つのアラート（見出し構造がない）が表示されます。Detailsタブには、すべてのエラー、アラート、機能のリストが表示されます。また、エラーの説明や種類を確認するために、赤い四角をクリックしてページ上で直接対話することもできます。

Axe DevTools は強力で正確なアクセシビリティ・ツールキットです。Google ChromeとFirefoxの両方で利用できる。拡張機能をインストールしたら、ブラウザの開発ツールを開き、axe DevToolsタブに移動して、Scan all of my pagesをクリックします。

Axe DevToolsは、WAVE評価ツールで、コントラストの問題、フォーム要素のラベルの欠落、見出し要素の欠落など、同じ問題を報告していることがわかります。

アクセシビリティをテストするもう1つの方法は、スクリーンリーダーを使ってウェブサイトをテストすることです：

• エヌブイディーエー
• ボイスオーバー はmacOsデバイスで利用可能です。
• オルカ はフリーでオープンソースのLinux用スクリーンリーダーです。

概要

この記事では、ウェブ・アクセシビリティに関する一般的な問題やその解決方法、ウェブ・アクセシビリティをテストするための優れたツールについて見てきました。ダイアログ、アコーディオン、カルーセルなどの要素のアクセシビリティについては、まだまだ説明すべきことがたくさんありますが、この記事で見てきたように、アクセシビリティに対処するための文書やツールはたくさんあります。

覚えておくべき重要なポイントがいくつかある：

• 常にコントラスト比をチェックする。
• リンクには常に有益なコンテンツを提供する。
• フォーム要素にはラベルが必要です。
• 明らかなフォーカス・スタイリングを提供しなければならない。