ユーザー補助

ページがさまざまな画面サイズに対応できるようにすることは、できるだけ多くのユーザーがウェブサイトにアクセスできるようにするための方法の 1 つにすぎません。考慮すべきその他の要素を以下に示します。

色覚異常

色の見え方は人によって異なります。赤色覚異常の人は、赤を明確な色として認識できません。2 型 2 色覚では、緑色が欠落しています。3 型 2 色覚の方には青色で表示されます。

一部のツールでは、さまざまな色覚を持つユーザーに配色がどのように見えるかを確認できます。

Firefox の [ユーザー補助] タブには、[シミュレート] というラベルの付いたプルダウンとオプションのリストがあります。

Chrome DevTools の [レンダリング] タブでは、色覚異常をエミュレートできます。

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

Mac で、次の操作を行います。

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

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

一般的に、異なる要素を区別するために色のみに頼るのはおすすめできません。たとえば、リンクを周囲のテキストとは異なる色にするとよいでしょう。ただし、リンクに下線を引いたり、太字にしたりするなど、他のスタイル設定のインジケーターも適用する必要があります。

a {
  color: red;
}

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

色のコントラスト

色の組み合わせによっては問題が発生することがあります。前景色と背景色のコントラストが不十分な場合、テキストが読みにくくなります。色のコントラストが低いことは、ウェブで最も一般的なアクセシビリティの問題の 1 つですが、幸いなことに、設計プロセスの早い段階で検出できます。

テキストと背景色のコントラスト比をテストするために使用できるツールを以下に示します。

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

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

body {
  color: black;
}

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

高コントラスト

オペレーティング システムでハイコントラスト モードを使用するように設定しているユーザーもいます。この機能はオペレーティング システムで試すことができます。

Mac で、次の操作を行います。

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

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

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

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

Mac で、次の操作を行います。

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

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

色反転でブラウジングしているユーザーにとっても、ウェブサイトが意味のあるものになっていることを確認します。ボックス シャドウに注意してください。色を反転させると、調整が必要になることがあります。

フォントサイズ

ブラウザで調整できるのは色だけではありません。デフォルトのフォントサイズも調整できます。視力が低下すると、ブラウザやオペレーティング システムのデフォルトのフォントサイズを調整し、年々数値を上げていくことがあります。

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

ブラウザのデフォルトのテキストサイズの設定を変更してみてください。この設定はブラウザの設定で行うことができます。ウェブページを閲覧中に拡大して行うこともできます。デフォルトのフォントサイズを 200%に拡大しても、ウェブサイトは正常に動作しますか？400% ではいかがですか？

フォントサイズを 400% に拡大してパソコンでウェブサイトにアクセスしたユーザーには、画面の小さいデバイスでサイトにアクセスしたユーザーと同じレイアウトが表示されるようにします。

キーボード ナビゲーション

ウェブページの操作にマウスやトラックパッドを使用するユーザーばかりではありません。キーボードもページを移動する手段の一つです。特に 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 と呼ばれます。CSS トランジションやアニメーションを使用している場所であればどこでも使用できます。

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 が必要ないことがあります。

可能であれば、スクリーン リーダーの実際のユーザーでテストしてください。これにより、ユーザーがウェブをどのように操作しているかをより深く理解できるだけでなく、アクセシビリティを考慮した設計を推測で行う必要もなくなります。

実際にユーザーにテストしてもらうと、自分が抱いている仮説を明らかにすることができます。次のモジュールでは、ユーザーがウェブサイトを操作するさまざまな方法について説明します。これも、思い込みが起こりやすい分野です。

理解度をチェックしましょう

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