CSSフレームワークからみる、フォーカス・インジケータの違いを考察

CSSフレームワークからみる、フォーカス・インジケータの違いを考察

フォーカスってなに？

「フォーカス」とは、パソコン画面上でウインドウや入力ボックス、アイコンやボタン、画像といった対象物が「次の操作」を受けられる（アクティブな、選択された）状態のことです。
引用：weblio辞書「フォーカス」（別窓でリンク）

上記の動作サンプルを例にすると、テキストフォーム、セレクトフォーム、ラジオボタン、チェックボックス、送信ボタンなど、選択時に色付きの枠（※Google Chrome上での場合）など、「選択中」ということが可視化できるよう装飾されます。
この装飾を「フォーカス・インジケータ」といいます。

フォーカスの可視化について

ユーザーの中には、運動障害のある人、盲目の人、手を持たない人、何らかの理由でマウスやトラックパッドを使用できない人もいます。

このようなユーザーは、キーボードのTabキーや、操作補助ツールなどでフォーカス・インジケータを頼りにWebサイトを閲覧、操作することがあります。

WCAG2.1では、Webサイトをキーボードで操作できるようにすること、キーボード フォーカスを持っている要素をユーザーが認識しやすくすること、などの達成基準の項目が存在します。
フォーカス・インジケータについては、[達成基準 2.4.7 フォーカスの可視化] で上げられています。

キーボード操作が可能なあらゆるユーザインタフェースには、フォーカスインジケータが見える操作モードがある。
(レベル AA)
引用： Web Content Accessibility Guidelines (WCAG) 2.1の達成基準 2.4.7 フォーカスの可視化（別窓でリンク）

フォーカスのスタイル

ここで問題なのは、ブラウザごとにフォーカス・インジケータのスタイルが異なることです。

この場合、ブラウザ間の差異を無くすために、CSSの:focus の擬似クラスでスタイルを変更することが可能です。

よく上げられる問題として、このフォーカス・インジケータがWebサイトのトンマナに合わない、視覚的に美しくない、などの理由で消されてしまうケースです。

:focus {
    outline: none; // DON’T DO IT!
}

この指定をしてしまうと、キーボードユーザーが要素にアクセスできなくなるために、絶対にやめましょう。

CSSフレームワークはどのような対応をしているのか？

業務でBULMAや、Bootstrapを使用することがあり、フォーカス・インジケータのスタイルが細かく設定されていてとても助かったことがあります。

フォーカススタイルをどう当てているのか気になったので、以下5つのフレームワークを比較してみたいと思います。

• BULMA（別窓でリンク）
• Bootstrap（別窓でリンク）
• Materialize（別窓でリンク）
• Pure.css（別窓でリンク）
• Sekeleton（別窓でリンク）

※各フレームワークの特徴はここでは省きます。 ※formで使われる代表的な要素（input や buttonなど）で比較します。

BULMA

BULMAの例をCode Penのレイアウトビューで見る（別窓でリンク）

特徴

// 一部抜粋
.input:focus {
    border-color: #3273dc;
    box-shadow: 0 0 0 0.125em rgba(50,115,220,.25);
    outline: none;
}

• input[type="text"], selectbox, button の:focus のスタイルはoutline: none;をしてbox-shadowプロパティで別でスタイル付与。
  • フォーカスリングは色がやや薄め。
• input[type=checkbox], input[type=radio]は、ブラウザデフォルトのスタイル。

Bootstrap

Bootstrapの例をCode Penのレイアウトビューで見る（別窓でリンク）

特徴

// 一部抜粋
.form-control:focus {
    color: #495057;
    background-color: #fff;
    border-color: #80bdff;
    outline: 0;
    box-shadow: 0 0 0 0.2rem rgba(0,123,255,.25);
}

• input[type="text"], selectbox, button, input[type=checkbox], input[type=radio] の:focus のスタイルはoutline: none;をしてbox-shadowと border-colorプロパティで別でスタイル付与。
  • 上記の要素はフォーカス・インジケータを全て独自スタイルで担保している。
  • フォーカスリングはやや太め。

Materialize

Materializeの例をCode Penのレイアウトビューで見る（別窓でリンク）

特徴

// 一部抜粋
input:not([type]) {
  outline: none;
}

input[type=タイプ別の記述]:not(.browser-default):focus:not([readonly]){
    border-bottom: 1px solid #26a69a;
    -webkit-box-shadow: 0 1px 0 0 #26a69a;
    box-shadow: 0 1px 0 0 #26a69a;
}

select:focus {
    outline: 1px solid #c9f3ef;
}

• input[type="text"], は独自スタイルでborder-bottomが変わるのみ。
• selectboxは独自スタイルでborder-bottomの色が変わるパターン（JavaScriptが使われている）と、ブラウザデフォルトスタイルでoutlineで色が変わる2パターン用意されている。
• button類のスタイルは全てbackground-colorが変わるのみ。outline: 0;されている。
• input[type=checkbox], input[type=radio] は独自スタイルで、:checkedの擬似クラスでフォーカス・インジケータが担保されている。

Pure.css

Pure.cssの例をCode Penのレイアウトビューで見る（別窓でリンク）

特徴

//　一部抜粋
.pure-form input[type=タイプ別の記述]:focus {
    outline: 0;
    border-color: #129fea;
}

.pure-form input:focus:invalid {
    color: #b94a48;
    border-color: #e9322d;
}

• input[type="text"], selectboxの:focus のスタイルはoutline: none;をしてborder-colorプロパティを別でスタイル付与。required 属性がある時は強制的に赤色。
• button類のスタイルは全てbackground-colorが変わるだけ。outline: 0;されている。
• input[type=checkbox], input[type=radio] はoutlineプロパティで独自の色を指定している。

skeleton

Skeletonの例をCode Penのレイアウトビューで見る（別窓でリンク）

特徴

// 一部抜粋
input[type=タイプ別の記述]:focus {
    border: 1px solid #33C3F0;
    outline: 0;
}

.button:focus {
    background-color: #1EAEDB;
    border-color: #1EAEDB;
    outline: 0;
}

• input[type="text"], selectboxの:focus のスタイルはoutline: none;をしてborder-colorプロパティで別でスタイルを付与。
• button類のスタイルは全てbackground-colorとborder-colorが変わるだけ。outline: 0;されている。
• input[type=checkbox], input[type=radio] はブラウザデフォルトのスタイル。

CSSフレームワークの総評

検証の結果、WCAG2.1 [達成基準 2.4.7 フォーカスの可視化] の配慮ができているであろうフレームワークの順位は以下のようになりました。

※あくまで個人の主観のもと、順位づけさせていただきました。

1. Bootstrap
2. BULMA
3. Pure.css
4. Skeleton
5. Materialize

1. Bootstrap

フォーカス・インジケーターがつく要素はほぼ独自スタイルで賄えており、且つ太めで見やすい。
ブラウザデフォルトの青枠に寄せているので、ユーザーも困惑しにくいと思われる。

2. BULMA

フォーカス・インジケーターのスタイルは控えめだが、視覚的な美しさは担保できている。
フォーカスリングの付け方はBootstrapと大差ないが、独自スタイルとブラウザデフォルトの混在が気になる。

3. Pure.css

buttonのフォーカスリングを消してしまっているのが残念。
inputのrequired属性がある時に勝手に赤色にしてしまうのは、ちょっとお節介かも？色だけで判断させるのは良くないので、補足のラベルを付ければベストかもしれない。

4. Skeleton

最低限のスタイル付与と軽さが売りのフレームワークなので、:focusスタイルも最低限。
Pure.css同様buttonのフォーカスリングを消してしまっているのが残念。

5. Materialize

独自スタイルが多く、UX重視な印象。
フォーカス・インジケータのスタイルに統一感がないのと、目立ちにくいため、認識のしやすさに欠ける。
Pure.css同様buttonのフォーカスリングを消してしまっているのが残念。

まとめ

Bootstrapはコンポーネントごとに細かい配慮が施されており、至れり尽くせりな感じでした。

スクラッチで書く場合は、:focusスタイルはbox-shadowプロパティでスタイル付与するのが良さそうです。 色はブラウザデフォルトの色に合わせるのがUX的にも無難ですが、Webサイトやサービス全体のトンマナに合わせるのでも良さそう。

フォーカスがどこにあるのかを見つけることができるようになることが目的なのでスタイルは付与は自由だけれども、塩梅は大事にしたいと思います。

Webアクセシビリティの中でも、フォーカスの可視化を100%担保することは難しく実装ではよく苦戦するため、今回のテーマを取り上げてみました。 是非、皆さんが日頃フォーカスのために行なっていること教えていただけると嬉しいです！