Chrome Dev Summit 2018 is happening now and streaming live on YouTube. Watch now.

見やすいスタイル

アクセシビリティの 2 つの重要な柱であるフォーカスとセマンティクスについて説明しました。ここでは、3 つ目のスタイル設定について説明します。この広範なトピックは、次の 3 つのセクションに分けて説明することができます。

  • フォーカスやさまざまな ARIA 状態にスタイルを追加して、アクセシビリティを活用できるように要素のスタイル設定をする。

  • UI のスタイル設定によって柔軟性を高め、ズームやサイズ変更を可能にして、小さな文字を読み取るのが難しいユーザーに対応する。

  • 適切な色とコントラストを選択し、色だけで情報を伝えることは避ける。

フォーカスのスタイル設定

一般に、要素のフォーカスを扱うときは必ず、組み込みのブラウザのフォーカス機能(CSS の outline プロパティ)を利用して要素のスタイルを設定します。フォーカス リングはとても便利です。フォーカス リングがなければ、ユーザーはフォーカスのある要素を見分けられません。{: .external }WebAIM チェックリスト でも、この点が指摘されています。「現在、どのページ要素にキーボードのフォーカスが存在するのかを視覚的に明確にする(たとえば、ページのタブ間を移動する場合、どこにいるのかがわかるようにする)」必要があります。

フォーカス リングのあるフォーム要素

しかしときには、フォーカス リングが歪んで見えたり、ページのデザインに合っていないことがあります。一部のデベロッパーはこの要素の outline0none を設定して、このスタイル自体を削除しています。しかしフォーカスのインジケーターがなければ、キーボードのユーザーはどうやって操作しているアイテムを識別すればよいのでしょうか。

警告:フォーカスの代わりになるものを提供できない限り、決して outline に 0 や none を設定しないでください。

CSS :hover 疑似クラスを使用して、コントロールにホバー状態を追加する方法はよく知られています。たとえば、リンク要素に :hover を使用すると、その上にカーソルを移動したときに色や背景が変化します。 :hover と同様に、:focus 疑似クラスを使用して、フォーカスのあるときに要素をターゲットにすることができます。

/* At a minimum you can add a focus style that matches your hover style */
:hover, :focus {
  background: #c0ffee;
}

フォーカス リングの削除の問題を解決するもう 1 つの方法として、同じ hover スタイルと focus スタイルを要素に設定すると、キーボード ユーザーの「フォーカス行方不明」問題を解決できます。これまでと同様、アクセシビリティを改善すれば、あらゆるユーザーのエクスペリエンスの向上につながります。

入力モダリティ

フォーカス リングが存在するネイティブ HTML ボタン

button などのネイティブ要素についは、マウスやキーボード押下によるユーザー操作の発生をブラウザで検出でき、通常、フォーカス リングはキーボードで操作した場合にのみ表示されます。たとえば、ネイティブ button をマウスでクリックしたときはフォーカス リングは表示されませんが、キーボードでタブ移動するとフォーカス リングが表示されます。

これは、マウス ユーザーはクリックした要素を把握しているため、フォーカス リングを表示する必要性が低いという考えに基づいています。残念ながら現在のところ、これと同じ動作を実現するクロスブラウザ ソリューションはありません。そのため、任意の要素に :focus スタイルを設定すると、要素をクリックしたとき、またはキーボードで要素にフォーカスが移動したときにそのスタイルが表示されます。次のダミーのボタンをクリックしてみてください。:focus スタイルが常に適用されていることがわかります。

<style>
  fake-button {
    display: inline-block;
    padding: 10px;
    border: 1px solid black;
    cursor: pointer;
    user-select: none;
  }

  fake-button:focus {
    outline: none;
    background: pink;
  }
</style>
<fake-button tabindex="0">Click Me!</fake-button>

これではやや過剰な主張になってしまうため、多くの場合、デベロッパーは JavaScript とカスタム コントロールを駆使して、マウスとキーボードのフォーカスを区別できるようにします。

Firefox では、:-moz-focusring CSS 疑似クラスを使用すると、要素がキーボードでフォーカスされた場合にのみ適用される focus スタイルを記述できます。これは非常に便利な機能です。この疑似クラスは現在 Firefox のみでサポートされていますが、現在、この機能を標準にするための作業が進められています

また、Alice Boxhall と Brian Kardell によるこのすばらしい記事では、モダリティに関するトピックが取り上げられており、マウスとキーボードの入力を区別するためのプロトタイプ コードが紹介されています。当面はこのソリューションを使用し、フォーカス リング疑似クラスは幅広くサポートされた時点で組み込むとよいでしょう。

ARIA による状態のスタイル設定

コンポーネントを作成するときは、JavaScript で制御される CSS クラスを使用して、状態を反映し、次に外観へと進むのが通例です。

例として、一度クリックされると「押された」視覚的状態になり、もう一度クリックされるまではその状態が保持される切り替えボタンについて考えましょう。この状態のスタイルを設定するには、JavaScript で pressed クラスをボタンに追加する方法も考えられます。すべてのコントロールに適切なセマンティクスを設定するため、さらにボタンの aria-pressed 状態も true に設定するかもしれません。

ここで採用すべき有用な方法は、ARIA 属性を使用して要素のスタイルを設定することです。そうすれば、ボタンの押された状態の次の CSS セレクタを更新して

.toggle.pressed { ... }

次のようにできます。

.toggle[aria-pressed="true"] { ... }

これにより、ARIA 状態と要素の外観の間に論理的な関係とセマンティク(意味論的)な関係の両方が構築され、外部のコードも削減できます。

さまざまな端末に対応したレスポンシブ デザイン

ご存知のとおり、さまざまな端末で最高のエクスペリエンスを実現するにはレスポンシブ デザインの採用が推奨されますが、レスポンシブ デザインはアクセシビリティの面でも優れています。

Udacity.com のサイトを例にとって考えてみましょう。

倍率 100% の Udacity.com

小さな印字を読み取るのが難しい視覚障害のある方はページをズームすることがあり、最大倍率は 400% に及ぶ場合があります。サイトがレスポンシブにデザインされていれば、UI 自体が「小さいビューポート」(つまり大きく表示されたページ)に合わせて再配置するため、画面の拡大が必要なデスクトップ ユーザーやモバイルのスクリーン リーダーのユーザーにとっても読みやすくなり、どちらにとってもメリットがあります。以下は、同じページを 400% に拡大したものです。

倍率 400% の Udacity.com

実際、レスポンシブにデザインすると、WebAIM チェックリストのルール 1.4.4 で定義された「テキストのサイズは 2 倍にしても読むことができ、機能できるようにする必要がある」という要件を満たすことができます。

レスポンシブ デザイン全般についてはこのガイドの範囲外なので省略しますが、レスポンシブな処理に役立ち、ユーザーがコンテンツに快適にアクセスできるようにするための重要なポイントをいくつか紹介します。

  • まず、常に適切な viewport meta タグ
    を使用してください。 <meta name="viewport" content="width=device-width, initial-scale=1.0">
    width=device-width に設定すると、デバイス非依存ピクセルの幅に合わせることができます。initial-scale=1 に設定すると、CSS ピクセルとデバイス非依存ピクセル間に 1:1 の関係を構築できます。

これにより、ブラウザでコンテンツを画面サイズに適合させるため、ユーザーは小さく見づらいテキストに悩まされずに済みます。

viewport meta タグがない場合とある場合の端末画面

警告:viewport meta タグを使用する場合は、maximum-scale=1 や set user-scaleable=no に設定していないことを確認してください。ユーザーが必要に応じてズームできるようにする必要があります。

  • 別のテクニックとして、レスポンシブ グリッドのデザインがあります。Udacity サイトでご覧のように、グリッドを使用してデザインすると、ページのサイズが変更されるたびにコンテンツのリフローが発生します。このようなレイアウトは多くの場合、ハードコードしたピクセル値ではなくパーセント、em、rem のような相対単位を使用して作成されます。このような方法を使うメリットは、テキストとコンテンツを拡大して、その他の項目をページの下部に移動できる点です。 倍率によってレイアウトが変更されても、DOM 順序と読み取りの順序は変わりません。

  • また、テキスト サイズのような要素にもピクセル値ではなく emrem を使用することを検討してください。一部のブラウザは、ユーザー プリファレンスでテキストのサイズ変更のみをサポートしています。テキストにピクセル値を使用している場合、この設定はコピーに反映されません。ただし、全体にわたって相対単位を使用した場合は、サイトのコピーでユーザー プリファレンスが反映されます。

  • 最後に、デザインがモバイル端末に表示されたときに、ボタンやリンクのようなインタラクティブな要素のサイズを大きくして周囲にもスペースを確保し、意図しない他の要素との重なりを回避し、簡単に押せるようにする必要があります。こうすれば多くのユーザー、特に運動障害のあるユーザーにとってメリットがあります。

推奨される最小のタッチ ターゲット サイズは、適切にモバイル ビューポートが設定されたサイトで 48dip(デバイス非依存ピクセル)です。たとえば、アイコンの幅と高さが 24px の場合、追加のパディングを使用してタップ ターゲット サイズを 48px にまで拡大します。48x48 ピクセル領域は約 9mm に相当します。これは、指の腹部分と同じくらいのサイズです。

1 組の 48 ピクセルのタッチ ターゲットを示す図

タップターゲットは、約8ピクセルの水平方向と垂直方向に間隔を置かなければならず、ユーザの指が1タップターゲットを押しても、意図せずに別のタップターゲットをタップすることはありません。

色とコントラスト

視覚に問題がない方は、誰もが自分と同じように色やテキストの読みやすさを認識していると思いがちですが、当然ながらそれは正しくありません。最後に、色やコントラストを効果的に使用して、誰もがアクセスできる快適なデザインを作成する方法を見ていきましょう。

ご想像どおり、色の組み合わせによっては、一部のユーザーにとっては読みづらかったり、まったく読めないこともあります。これは通常、色のコントラスト、つまり前景色と背景色の輝度の関係の問題になります。同系色の場合、コントラスト比は低く、異なる色にするとコントラスト比が高くなります。

WebAIM のガイドライン では、すべてのテキストで AA(最小)コントラスト比 4.5:1 を推奨しています。例外は、非常に大きなテキストです(デフォルトの本文テキストより 120~150% 大きい)。この場合、推奨されるコントラスト比は 3:1 です。以下に、コントラスト比の違いを示します。

さまざまなコントラスト比の比較

コントラスト比 4.5:1 は、レベル AA 向けに指定された値です。これは、約 20/40 の視力に相当する低視力のユーザーが通常経験するコントラスト感度において、認識できない色を補うためです。20/40 は、約 80 歳の人の一般的な視力といわれています。低視力の障がいを持つユーザーや色覚に障がいを持つユーザー向けに、本文テキストのコントラストを 7:1 に上げることができます。

Chrome の Accessibility DevTools 拡張機能を使用して、コントラスト比を特定できます。Chrome Devtools を使用するメリットの 1 つは、現在の色に対して AA および AAA(拡張)の代替色を提案する機能を使えることです。値をクリックすると、アプリでプレビューできます。

色 / コントラストの検証を実行するには、次の基本的なステップを実行します。

  1. 拡張機能をインストールしたら、Audits をクリックします。
  2. Accessibility 以外のチェックをすべてはずします。
  3. Audit Present State をクリックします。
  4. コントラストの警告を確認します。

devtools のコントラストの検証ダイアログ

WebAIM 自体にも、便利なカラー コントラスト チェッカーがあり、色のペアのコントラストを確認するために使用できます。

色だけで情報を伝えない

色覚に障がいを持つユーザーは約 3 億 2 千万にのぼります。男性は 12 人に 1 人、女性は 200 人に 1 人の割合で、なんらかの「色覚異常」を抱えています。つまり、1/20(5%)のユーザーは、あなたが意図したとおりにサイトを見ることができません。色のみに頼って情報を伝えようとすると、それだけの数のユーザーが情報を認識できなくなります。

注: 「色覚異常」とは多くの場合、色を識別できない問題を抱えた人の視覚的な状況を指しますが、実際には、完全な色覚異常の方はごくわずかです。色覚異常の方の多くは、一部またはほとんどの色を識別できますが、赤と緑(最もよくあるパターン)、茶とオレンジ、青と紫など、特定の色の区別が困難です。

たとえば、入力フォームで電話番号に赤色の下線を引き、無効な番号であることを示しても、色覚異常の方やスクリーン リーダーのユーザーには、その情報が完全には伝わりません。したがって、重要な情報については複数のアクセス手段を提供する必要があります。

赤色の下線でエラーを示している入力フォーム

WebAIM チェックリストのセクション 1.4.1 には、「色はコンテンツを伝えたり、視覚要素を区別する単独の手段として用いないこと」と記載されています。さらに、特定のコントラスト要件を満たしていない限り、「色だけを使用して周囲のテキストとリンクを区別しないこと」とあります。このチェックリストでは、アクティブなリンクを示すには、下線などのその他の標示を追加することを推奨しています(CSS の text-decoration プロパティを使用)。

前述の例を修正する簡単な方法は、フィールドに、値が無効であることおよびその理由を示すメッセージを追加することです。

明確にするためにエラー メッセージを追加した入力フォーム

アプリを作成するときは、このようなことを念頭に置き、色に過度に依存して重要な情報を伝えている箇所がないかをチェックしてください。

自分のサイトがさまざまなユーザーにどう見えるのか興味がある方や、過度に色に依存した UI を作成している方は、NoCoffee Chrome 拡張機能を使用すると、さまざまな色覚異常など、各種の視覚障がいがある方の視覚をシミュレートできます。

高コントラスト モード

高コントラスト モードを使用すると、前景色と背景色を反転できます。こうすると多くの場合、テキストが際立ち、読みやすくなります。低視力の障がいを持つ方は、高コントラスト モードにするとページ上のコンテンツをかなりナビゲートしやすくなります。マシンで高コントラストに設定する方法はいくつかあります。

Mac OSX や Windows のようなオペレーティング システムには、システムレベルですべてに対して有効化できる高コントラスト モードが備わっています。または、Chrome High Contrast 拡張機能のような拡張機能をインストールして、特定のアプリでのみ高コントラストを有効にできます。

実際に、高コントラストの設定を有効にして、アプリのすべての UI を見ることができ、使用できるかを確認するとよいでしょう。

たとえば、ナビゲーション バーで、現在選択しているページを示すために薄い背景色を使用する場合があります。これを高コントラスト拡張機能で表示すると、かすかな違いは完全に失われ、どのページがアクティブなのかわからなくなります。

高コントラスト モードのナビゲーション バー

同様に、前のレッスンで取り上げた無効な電話番号フィールドを示す赤色の下線は、区別のつきにくい青や緑の色で表示される可能性があります。

高コントラスト モードで表示したフォームのエラー フィールド

前のレッスンで説明したコントラスト比の条件を満たしていれば、高コントラスト モードをサポートしたときでも適切に表示されるはずです。さらに、Chrome High Contrast 拡張機能をインストールして、全体を一通りチェックし、ページの動作と外観が想定どおりであることを確認してください。