みなさん、普段アクセシビリティを意識してwebサイトを作っていますか？
HTMLは意識をしている場合が多いと思いますが、CSSはよく忘れがちになるところもあるかと思います。。（実際に筆者もちゃんと意識していないと忘れがちです。。）
そこで、今回はCSSを用いてアクセシビリティを意識して作るためのポイントを2つ紹介します。
（今後他の方法についても紹介していきたいと思っています。）
クリッカブルエリアの調整
スライダーのページネーションなどデザイン都合上、小さくしないといけないがちゃんとクリックできるようにしたいと思ったことはありませんか？
UIとしては以下の状態です。
参考: SwiperのPagination
クリッカブルなエリアが小さいと、本来タップしたかったものがタップできない、誤タップが発生してしまうことがあります。
（例として、本来はページネーションの2番目をタップしたかったが、3番目をタップしてしまったなど）
詳しくは以下の「Web Content Accessibility Guidelines (WCAG)」を参照してください。
対応方法について
::beforeや::afterの擬似要素を用いて見た目はそのままでクリッカブルなエリアを大きくすることができます。
HTML, CSSのコードとしては以下になります。
（今回は検証のため、buttonと擬似要素の両方に色を追加しています。）
<button class="button" type="button" aria-label="1枚目へ移動">
<!-- 12pxのボタンでクリッカブルなエリアも12pxの場合 -->
</button>
<button class="button clickable" type="button" aria-label="1枚目へ移動">
<!-- 12pxのボタンでクリッカブルなエリアは44pxに変更 -->
</button>
.button {
width: 12px;
height: 12px;
cursor: pointer;
background: #00f; /* 検証用として色を追加しています。 */
}
.clickable {
position: relative;
&::before {
content: '';
position: absolute;
width: 44px;
height: 44px;
top: -16px;
left: -16px;
background: #f004; /* 検証用として色を追加しています。 */
}
}
カーソルのポインターについての結果も共有します。
12pxのボタンでクリッカブルなエリアも12pxの場合
12pxのボタンでクリッカブルなエリアは44pxに変更
今クリッカブルなエリアのサイズを確認したい時に
ブラウザのDevToolsで確認したり、Figmaなどに貼り付けて要素のサイズを測ることも可能ですが、もっと簡単に確認する方法としてfreeeさんで配布している以下のブックマークレットを利用すると便利です。
ブックマークレットを登録して実行すると以下のようにweb上で確認することができます。
アニメーションが不要な人にはアニメーションをさせない
@media (prefers-reduced-motion: reduce) {
* {
transition-duration: 1ms !important;
animation-duration: 1ms !important;
animation-iteration-count: 1 !important;
scroll-behavior: auto !important;
}
}
このCSSについて見たことはありますか？
最近のreset.cssでよく見かけるようになったと思います。
設定しているreset.cssの例としては以下のものがあります。
アニメーションが過度にあると画面酔いをしてしまったり、利用している端末によってはカクついてしまうことも！！
そのため、アニメーションを減らすためにprefers-reduced-motionを利用してアニメーションの時間を調整することができます。
詳しくは以下の「Web Content Accessibility Guidelines (WCAG)」を参照してください。
設定を行なっているCSSについて
視差効果をなくしたい場合に設定を行う@mediaやCSSプロパティについて解説します。
prefers-reduced-motion: reduce
視差効果がONの時にのみ、実行されるCSSのメディア特性です。
ここのメディア特性の中でアニメーションの動きを最小化するための設定を行います。
transition-duration: 1ms
すべてのtransitionで行われている処理を1ミリ秒で終わらせ、変化をほぼ瞬時にします。
animation-duration: 1ms
すべてのanimationで行われている処理を1ミリ秒で終わらせ、変化をほぼ瞬時にします。
animation-iteration-count: 1
アニメーションを1回だけ実行してすぐ終了させ、ループを防ぐために使用します。
scroll-behavior: auto
スムーズスクロールを無効にし、リンクの移動やJavaScriptでスクロールされる際に即座に行われるようにします。
視差効果の検証を行いたい時に
視差効果をOFFにした状態の検証を行いたい時に、以下のサイトで簡単に確認することができます。
アニメーションの設定がOFFになっている場合、画面下にCSSアニメーションが無効になっているメッセージが表示され、右側のアニメーション名をクリックしてもアニメーションは最小限になります。
Macで設定する
Macで視差効果をOFFにしたい場合、以下の手順を参考にしてください。
- メニュー → システム設定 を開く
- 左サイドバーで アクセシビリティ を選択
- 右ペインの ディスプレイ をクリック
- 「視差効果を減らす」 をオンにする
iOSで設定する
iOSで視差効果をOFFにしたい場合、以下の手順を参考にしてください。
- 設定アプリを開く
- アクセシビリティをタップ
- 動作をタップ
- 「視差効果を減らす」 をオン
CSSの小さな改修でより良い体験を
クリックしづらいボタンや過度なモーションは、気付かぬうちにユーザーを離脱させる大きな要因になります。
CSSを利用してアクセシビリティを意識することは、ユーザーにとってより良い体験を提供するために重要なので、意識してみると良いかもしれません。
今後も他の方法についても紹介していきたいと思いますので、ぜひ楽しみにしていてください♪
最後までお読みいただき、ありがとうございました！！
Discussion