ユーザー補助

さまざまな画面サイズにページが対応できるようにすることは、できる限り多くの人がウェブサイトにアクセスできるようにするひとつの方法です。覚えておくべきその他の要因について、いくつか検討してください。

色覚異常

色の認識は人によって異なります。1 型 2 色覚の人は、赤色を明確に認識することはできません。2 型 2 色覚では、緑色がありません。3 型 2 色覚の人は青色です。

ツールによっては、さまざまなカラービジョンのユーザーに自分のカラーパターンがどのように表示されるかをおおまかに把握できるものがあります。

Firefox の [ユーザー補助] タブには [シミュレート] プルダウンがあり、オプション リストを確認できます。

Chrome DevTools の [Rendering] タブでは、視覚障がいをエミュレートできます。

これらはブラウザ固有のツールです。また、オペレーティング システム レベルでさまざまなビジョンタイプをエミュレートすることもできます。

Mac で次の URL にアクセスします。

1. システム環境設定
2. ユーザー補助
3. ディスプレイ
4. カラーフィルタ
5. カラーフィルタを有効にする

いずれかのオプションを選択します。

一般的に、色だけに頼ってさまざまな要素を区別することはおすすめしません。たとえば、リンクを周囲のテキストとは異なる色にすることができます（推奨）。ただし、リンクに下線を引く、太字にするなど、他のスタイル設定インジケーターも適用する必要があります。

a {
  color: red;
}

a {
  color: red;
  font-weight: bold;
}

色のコントラスト

色の組み合わせによっては問題が発生することがあります。フォアグラウンドの色と背景色のコントラストが十分でないと、テキストが読みにくくなります。色のコントラストが低いことは、ウェブ上でのアクセシビリティに関する最も一般的な問題の一つですが、幸いなことに、デザイン プロセスの早い段階でこの問題に気づくことができます。

テキストの色と背景色のコントラスト比をテストするためのツールをいくつかご紹介します。

• tota11y は、ブラウザのツールバーに追加できるブックマークレットです。
• VisBug は、すべての主要なデスクトップ ブラウザで利用できるブラウザ拡張機能です。
• Firefox のユーザー補助インスペクタでは、視覚的なコントラストの問題を確認できます。
• Chrome DevTools を使用して低コントラストのテキストを見つけて修正することもできます。
• Microsoft の Edge ブラウザでは、カラー選択ツールを使用してテキストの色のコントラストをテストできます。

CSS で常に color と background-color をまとめて宣言することをおすすめします。背景色がブラウザのデフォルトの色になるとは限りません。ブラウザで使用される色を変更できます。また、実際に変更することもできます。

body {
  color: black;
}

body {
  color: black;
  background-color: white;
}

高コントラスト

一部のユーザーは、オペレーティング システムで高コントラスト モードを使用するよう設定しています。この操作は、お使いのオペレーティング システムでお試しいただけます。

Mac で次の URL にアクセスします。

1. システム環境設定
2. ユーザー補助
3. ディスプレイ

コントラストを上げるオプションを選択します。

ハイ コントラスト モードが有効になっているかどうかを検出するメディア機能があります。prefers-contrast メディア特徴では、no-preference、less、more の 3 つの値をクエリできます。この情報を使用して、サイトのカラーパレットを調整できます。

オペレーティング システムで反転色を使用することもできます。

Mac で次の URL にアクセスします。

1. システム環境設定
2. ユーザー補助
3. ディスプレイ

色を反転するオプションを選択します。

ウェブサイトが、色を反転してブラウジングするユーザーにとっても理にかなっていることを確認します。箱の影に注意してください。色が反転したときに調整が必要になる場合があります。

フォントサイズ

ブラウザで調整できるのは色だけではありません。デフォルトのフォントサイズも調整できます。視力が弱くなると、ブラウザやオペレーティング システムのデフォルトのフォントサイズを調整し、年の経過とともに数値を増加させる可能性があります。

このような設定に対応するには、相対フォントサイズを使用します。px のような単位は使用しないでください。代わりに、rem や ch などの相対単位を使用してください。

ブラウザのデフォルトのテキストサイズ設定を変更してみてください。この操作はブラウザの設定で行うことができます。または、ウェブページを見ているときに拡大して表示することもできます。デフォルトのフォントサイズを 200%増やした場合、ウェブサイトは機能しますか？400% ならどうですか？

たとえば、フォントサイズが 400% に大きくなったデスクトップ パソコンでウェブサイトにアクセスすると、小画面のデバイスでサイトにアクセスするユーザーと同じレイアウトで表示されます。

キーボードの操作

一部のユーザーがマウスやトラックパッドを使用してウェブページ間を移動するわけではありません。キーボードはページを操作するもう 1 つの方法で、tab キーは特に便利です。ユーザーは、リンクまたはフォーム フィールドから次のフィールドにすばやく移動できます。

:hover および :focus の疑似クラスでスタイル設定されたリンクは、マウス、トラックパッド、キーボードのいずれを使用しているかにかかわらず、これらのスタイルを表示します。:focus-visible 疑似クラスを使用して、キーボード ナビゲーションだけのリンクのスタイルを設定します。これらのスタイルを特に目立たせることができます。

a:focus,
a:hover {
  outline: 1px dotted;
}
a:focus-visible {
  outline: 3px solid;
}

ユーザーがリンクやフォーム フィールドからフォーム フィールドに移動する際、これらの要素はドキュメント構造での表示順にフォーカスされます。また、表示順序と一致させる必要もあります。

CSS の order プロパティには注意が必要です。これを Flexbox や grid と組み合わせて使用すると、HTML 内での要素の表示順序とは異なる視覚的な順序で要素を配置できます。これは強力な機能ですが、キーボードでのナビゲーションが混乱する可能性があります。

キーボードの tab キーを使用してウェブページをテストし、タブでの移動順序が適切であることを確認します。

Firefox ブラウザのデベロッパー ツールの [ユーザー補助] パネルに、[タブの順番を表示する] オプションがあります。これを有効にすると、フォーカス可能な各要素に番号がオーバーレイされます。

モーションの軽減

アニメーションとモーションは、躍動感のあるウェブ デザインを実現するための優れた手法です。しかし人によっては、こうした動きが大きく方向感覚を失い、吐き気を引き起こすこともあります。

ユーザーが動きを少なくしたいかどうかを伝える特徴クエリがあります。これは prefers-reduced-motion と呼ばれます。 遷移やアニメーションを使用するあらゆる場所で使用します。

a:hover {
  transform: scale(150%);
}
@media (prefers-reduced-motion: no-preference) {
  a {
    transition-duration: 0.4s;
    transition-property: transform;
  }
}

prefers-reduced-motion メディアクエリは、特に画面上の移動に使用します。prefers-reduced-motion の影響を受けない要素の色に遷移を使用している場合。不透明度の移行やクロスフェードも適用できます。モーションが減ったからといって、必ずしもアニメーションがないわけではありません。

音声

ウェブの体験は人によって違います。画面上にウェブサイトが表示されていないユーザーもいます。スクリーン リーダーなどの支援技術は、画面に出力された情報を話し言葉に変換します。

スクリーン リーダーは、ウェブブラウザを含むあらゆる種類のアプリケーションで利用できます。ウェブブラウザがスクリーン リーダーと効果的に通信するには、現在アクセスしているウェブページに有用なセマンティック情報が含まれている必要があります。

これまでに、アイコンのみのボタンに、目の見えないユーザーに対するボタンの目的を指定するための属性を含める必要があることを学習しました。これは、強固な基盤 HTML の重要性を示す一例にすぎません。

見出し

<h1>、<h2>、<h3> などの見出しは適切に使用してください。スクリーン リーダーは、これらの見出しを基にドキュメントの概要を生成します。この概要はキーボード ショートカットで操作できます。

<div class="heading-main">Welcome to my page</div>

<div class="heading-secondary">About me</div>

<div class="heading-tertiary">My childhood</div>

<div class="heading-secondary">About this website</div>

<div class="heading-tertiary">How this site was built</div>

<h1>Welcome to my page</h1>
  <h2>About me</h2>
    <h3>My childhood</h3>
  <h2>About this website</h2>
    <h3>How this site was built</h3>

構造

<main>、<nav>、<aside>、<header>、<footer> などのランドマーク要素を使用して、ページのコンテンツを構造化します。スクリーン リーダーのユーザーは、これらのランドマークに直接ジャンプできます。

<div class="header">...</div>

<div class="navigation">...</div>

<div class="maincontent">...</div>

<div class="sidebar">...</div>

<div class="footer">...</div>

<header>...</header>
<nav>...</nav>
<main>...</main>
<aside>...</aside>
<footer>...</footer>

フォーム

すべてのフォーム項目に <label> 要素が関連付けられていることを確認します。<label> 要素の for 属性と、フォーム項目の対応する id 属性を使用して、ラベルをフォーム項目に関連付けることができます。

<span class="formlabel">Your name</span>
<input type="text">

<label for="name">Your name</label>
<input id="name" type="text">

画像

常に alt 属性を使用して、画像の説明テキストを入力します。

<img src="dog.jpg">

<img src="dog.jpg" alt="A golden retriever sitting on the grass looking happy.">

画像が単にプレゼンテーション用である場合は、alt 属性を含める必要がありますが、空の値を指定できます。

<img src="texture.png">

<img src="texture.png" alt="">

Jake Archibald 氏は、優れた alt テキストの書き方に関する記事を公開しました。

リンク

リンクにはできるだけ説明的なテキストを含めるようにしてください。「ここをクリック」や「その他」などの表現は使用しないでください。

<p>To find out more about our latest offers, <a href="/offers.html">click here</a>.</p>

<p>Find out more about <a href="/offers.html"> our latest offers</a>.</p>

ARIA

適切なセマンティック HTML を使用することで、スクリーン リーダーなどの支援技術や、音声アシスタントなどの音声出力からウェブページにアクセスしやすくなります。

対応する HTML 要素を持たないインターフェース ウィジェット（カルーセル、タブ、アコーディオンなど）。これらの機能は、HTML、CSS、JavaScript、ARIA を組み合わせてゼロから構築する必要があります。

ARIA は Accessible Rich Internet Applications の略です。この語彙を使用すると、適切な HTML 要素がない場合に、セマンティック情報を提供できる。

HTML 要素としてまだ利用できないインターフェース要素を作成する必要がある場合は、ARIA に慣れてください。

JavaScript で機能を追加すればするほど、ARIA に対する理解が深まります。ネイティブ HTML 要素のみを使用する場合、ARIA は不要な場合があります。

可能であれば、実際のスクリーン リーダーのユーザーでテストします。これにより、ユーザーがウェブをどう利用しているかを理解できるだけでなく、ユーザー補助を念頭に置いてデザインする際の当て推量の排除にもなります。

実際の人でテストすると、思い込みを目立たせることができます。次のモジュールでは、お客様のウェブサイトにおけるユーザーの操作方法について学びます。ここでご紹介するのは、推測するのが極めて困難な部分です。

理解度チェック

ユーザー補助機能に関する知識をテストする