今年の４月に入社したBacklogのUXエンジニアのヨーナスです。もともとフロントエンドエンジニアとして働いていましたが、ユーザビリティとアクセシビリティがどうしても気になって、割と自然にUXの方に移動しました。
前からずっとアクセシビリティを大事にしてきたと思っていましたが、ある日、Backlogのコントラストテーマ対応が足りていないというフィードバックを目にしました。ふわっとしたイメージがあったけど、一回も使ったことがなくて、まだまだ意識が足りないところがあるなーとしみじみ感じました。その対応で学んだことを元に、ウェブサイトにおけるコントラストテーマ対応について簡単に書こうと思っています。
コントラストテーマってそもそも何なんだ？
少し思い出してみたら、コントラスト設定を、Windowsの設定の中で確かに見たことがあったが、コントラストテーマは実際に何をするかは正直に言えばよく分かりませんでした。簡単に説明すると、コントラストテーマはMicrosoft Windowsに備わっている、画面の内容をもっとわかりやすくするためOSの色を置き換える機能のことです。Windows 10まで「ハイコントラストモード」と呼ばれていました。
説明だけでは少し分かりづらいかもしれませんので、コントラストテーマを選ぶと画面がどうなるかは、次の画像をご覧ください。
左）通常表示 右）コントラストテーマ
見ての通り、表示が大きく変わりました。背景色と壁紙がすべてコントラストテーマのままになって、文字が同じ色に統一されます。リンク、ボタン、タブなど選択可能な要素がすべてそれが伝わるように変色されたりします。こういった配色で、画面に映る要素の役割がひと目で分かります。
誰が使うの？
コントラストテーマの主な対象は、視力低下でコントラストが付かないユーザーです。しかし、利用されているのは視覚障害者だけではありません。さまざまな方に利用されているBacklogは、眩しい野外、照明不足、コントラストが優れていないモニターなど、多様な環境での利用も想定できます。そして、コントラストテーマの見た目が好きなだけで利用している人もいます。
コントラストテーマを利用しているユーザーの数は今のところ分かりませんが、ウェブのアクセシビリティのリサーチや向上のためのツールを提供する機会WebAIMが2018年に行ったロービジョン（視覚障害者）のインターネットユーザー向けの調査「Survey of Users with Low Vision #2」の回答者の中で、約５割のユーザーがハイコントラストモードもしくはなんらかのコントラストを高める設定を利用していることが分かりました。つまり、Backlogのユーザーの中でも、コントラストテーマの利用者は少なくないと言えるでしょう。
個人的には、コントラストテーマサポートを実装することの一番大きなメリットは、なるべく多くの方にサービスを利用してもらえることだと思っています。そして、利用者自体に別に障害がなくても、さきほど記述した多様なユースケースを考えてみると、実装した甲斐があるのではないかと思います。
Webはどう変わるの？
では、コントラストテーマが選択されたとき、OSの見た目は大きく変わることは知っているけど、ウェブサイトには具体的にどういうふうな影響が与えられますか？次の要素とCSSスタイルに及ぶ主な影響は以下の通りです：
- CSSのbackground-colorはコントラストテーマに指定された背景色になります
- CSSのcolor、border-color、outline-colorはコントラストテーマに指定された文字色になります
- CSSのbox-shadow、text-shadowなど装飾のためのプロパティはnoneになります。
- そのほかに、HTMLのa、buttonなどクリック可能な要素が、コントラストテーマの「選択可能」色になります。
- 全リストはMDNを参考にしてください
結果、重要な情報が残り、無駄なスタイルのほとんどがなくなります。その一方で、強調のために付けられた文字色、ハイライトなどが目立たなくなってしまいます。サイトの全体的なレイアウトには、基本的に影響はありません。
forced-colorsメディアクエリー
forced-colorsとは、OSによって画面に表示されるカラーパレットを強制的に上書きする場合に読み込まれるメディアクエリーです。現在の用途のほとんどはWindowsのコントラストテーマだけです。なので、この記事では、Windows以外のOSの対応について書きません。
forced-colorsは以下のように使います。
// SCSS
@media (forced-colors: active) {
border: 1px solid;
}
使い方は他のメディアクエリーと特に変わりません。中に入るCSSルールが、コントラストテーマが有効なときにだけ適用されます。それ以外の場合、表示への影響がありません。
forced-colorsはもともとMicrosoftの-ms-high-contrastベンダープレフィックスとして使われていましたが、これから使う場合が増えそうになったため、CSSのMedia Queries Level 5のWorking Draftに追加されました。Can I Useを参考にすると、Chrome、Edge、Firefoxがforced-colorsをサポートしていることが確認できます。メジャーなブラウザの中で、対応していないのがSafariだけです。その理由は、macOSに固有のハイコントラストモードが備わっているからです。macOSの場合アクセシビリティ設定の「コントラストを上げる」に対応するのは、forced-colors: activeではなくprefers-contrast: highになります。
落とし穴に注意！
コントラストテーマは、サイトのスタイルに大きな影響を与えるので、UXに力を入れる余裕があるサイト以外のウェブサイトのほとんどには、なんらかの表示バグがあります。特に多いのは、要素の区別ができなくなったり、アイコンなどが表示されなくなったりするようなバグです。
一つの例として、要素を目立たせるためにbackground-color、box-shadowなどを使うパネルをたまに見ます。両方はコントラストテーマによってリセットされますので、パネルの領域が分からなくなってしまいます。こういうときは、forced-colors: activeの時だけborderを付けるのが効果的です。
上記のパネルのような、軽くてふわっとしたデザインは特に壊れやすいので、サイトの内容がコントラストテーマ利用者にも正しく伝わるために注意が必要です。
「では、せっかくこんな便利なメディアクエリーが導入されたし、別CSSファイルでコントラストテーマ専用レイアウトを作ろう！」と思ってしまうかもしれませんが、MDN Web Docsを見てみると、
一般的に、ウェブ制作者は `forced-colors` メディア特性を使用して、この機能が有効になっているユーザー向けに個別のデザインを作成することはすべきではありません。この機能は、既定の強制カラーの適用ではページの一部がうまく機能しない場合に、使いやすさや読みやすさを向上させるための細かい調整を行うことを目的としています。
と書いてあります。つまり、使いすぎるともともとの意味と違う使い方になってしまいます。
Backlogの事例
ようやく、序章に書いてあったコントラストテーマのユーザーからのフィードバックに移ります！フィードバックの主な内容は、ガントチャートが見にくいということです。当時のBacklogは、コントラストテーマ対応がまだされていなかったので、いい勉強の機会になりました。
復習のため、Backlogのガントチャートを開きましょう：
ガントチャートの通常表示
多くの読者の方が見慣れた画面でしょう。まずは、問題を再現しましょう。ChromeのDevToolsのRenderingタブの下にあるforced-colorsメニューでactiveを選択します。これで、コントラストテーマの時の表示が確認できます。
そうすると、ガントチャートがこうなります。
修正前のガントチャート
確かに、分かりづらいですね。親課題の範囲は分かりますが、子課題がいつ終わるかは全くわからない状態になっています。では、なぜこうなったのでしょうか？
普通表示のガントチャートを見ると、親課題以外のタスクにはborderプロパティが付いていないということが分かります。そして、先ほど説明した通り、ハイコントラストモードがすべてのbackground-colorプロパティを統一するので、ガントチャートの背景と課題の背景は両方同じ色になってしまいます。これでタスクとチャートの背景の区別が付けられなくなります。同じ理由で、今日の日付を示すオレンジ色の要素が消えてしまって、さらに分かりにくくなっています。
修正作業開始！
コントラストテーマが利用されていない時のデザインを変更したくなかったので、コントラストテーマ専用のフィックスを入れることにしました。主な修正箇所は３つあります。
- ボーダーがなくなった課題
- 親課題の開始マーカーと終了マーカー
- 今日の日付の表示
最初に、範囲が見えなかった課題を修正します。
// SCSS
.gantt-item {
/*中略*/
border-width: 0;
@media (forced-colors: active) {
border-width: 2px;
border-color: ButtonBorder;
}
}
border-widthを0以上にすると、ボーダーが表示されるようになります。border調整のときに、box-sizingの値によって位置修正も必要かもしれませんので、確認しながら進めるといいでしょう。border-topの値になっているButtonBorderは、forced-colorsのときに使われる、色をコントラストテーマのパレットに合わせる特殊なシステムカラーです。利用可能なカラー名はMDNのSystem color keywordsページで見られます。
次は、親課題のマーカーを修正します。たまに、forced-colorsは意図しない効果を与えることもあります。今回の表示問題はその一つです。ガントチャートの親課題の下部にある開始と終了を示す三角形はborderで実装されているので、残念ながらコントラストテーマに上書きされて、四角くなってしまいます。こういったときに役に立つのは、forced-color-adjustプロパティです。forced-color-adjustをnoneにすると、対象要素にコントラストテーマが適用されなくなります。forced-colorsメディアクエリーと同様に、forced-color-adjustは新しい機能を作るものではなく、修正のためのものです。
// SCSS
.marker {
@media (forced-colors: active) {
forced-color-adjust: none;
border-top: ButtonBorder;
}
}
まずは、forced-color-adjust: none;で元々のボーダーを戻します。そして、borderに色を付けます。
最後に、今日の欄を表示する要素にボーダーを付けます。
// SCSS
.today {
@media (forced-colors: active) {
border-left: 2px solid;
border-right: 2px solid;
}
}
上記の修正を合わせて、ガントチャートはこうなりました：
修正後のガントチャート
だいぶ分かりやすくなりましたね！
最後に
意外と利用されているコントラストテーマの紹介と確認方法はいかがでしたか？これからもできるだけ多くの方々にBacklogをスムーズにご利用いただけるよう、アクセシビリティを随時改善していきます。わずかな修正でも好影響を与えられますので、あなたのサービスもデジタルバリアフリーになっているかを、ぜひチェックしてみてください！