アクセシビリティを改善するために、通常のCSSのリセットに加えるスタイルシート -a11y css reset
Post on:2019年7月1日
sponsors
アクセシビリティを改善するために、通常のCSSのリセットに加えるスタイルシートを紹介します。コンテンツを視覚的に隠す際に見えなくするだけでなく、スクリーンリーダーにもアクセス可能にし、フォーカス時の振る舞いなどが定義されています。
a11y css resetの特徴
a11y css resetはWebページをアクセシブルにするために、既定のスタイル定義をリセットするための小さなグローバルルールをまとめたCSSファイルです。
CSSにはアクセシビリティに有用なスタイルが定義されています。例えば、.visually-hiddenではコンテンツを視覚的に隠すのみでなく、スクリーンリーダーでもアクセス可能です。
参考: Writing CSS with Accessibility in Mind
.plain-listではSafariとVoiceOverにリストのスタイルを定義します。
参考: "Fixing" Lists
a11y css resetの中身
a11y css resetには3つのCSSファイルがあります。
まずは、アクセシビリティを改善するためのa11y.css。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 |
*:focus:not(:focus-visible), *:before:focus:not(:focus-visible), *:after:focus:not(:focus-visible) { outline: none; } /* https://medium.com/@matuzo/writing-css-with-accessibility-in-mind-8514a0007939 */ .visually-hidden { /* 通常のフローからアイテムを削除 */ position: absolute; /* 誤って発音されたテキストの回避策 */ white-space: nowrap; /* 可能な限り小さいサイズに設定（スクリーンリーダーの中には高さと幅が0の要素を無視するものがあります） */ width: 1px; height: 1px; /* サイズ変更後にオーバーフローしたコンテンツを隠す */ overflow: hidden; /* 要素サイズを変更する可能性があるプロパティをリセット */ border: 0; padding: 0; /* クリップは、要素のどの部分を表示するかを定義 */ /* 古いブラウザではclipプロパティは非推奨 */ clip: rect(0 0 0 0); /* clip-pathは、新しいブラウザ向け。 inset(50%)はコンテンツを消す矩形を定義 */ clip-path: inset(50%); /* margin: -1px;が必要な明確な理由は現時点では判明していません。(参考: https://github.com/h5bp/html5-boilerplate/issues/1985). */ margin: -1px; } /* https://www.scottohara.me/blog/2019/01/12/lists-and-safari.html */ .plain-list { list-style: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'/%3E"); padding-left: 0; } /* prettier-ignore */ @media(prefers-reduced-motion: reduce) { *, *:before, *:after { transition: none !important; animation: none !important; scroll-behavior: auto !important; } } |
2つ目のreset.cssは、簡易的なCSSリセットです。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
*, *:before, *:after { box-sizing: border-box; } html, body { margin: 0; padding: 0; height: 100%; width: 100%; } |
3つ目のCSSは、上記2つを合わせたcombo.cssです。
a11y css resetの使い方
アクセシビリティのみ使用する場合
アクセシビリティに重点を置いたCSSルールが必要な場合は、他のCSSの前にa11y.cssを記述します。
|
1 2 3 4 5 6 7 8 9 10 11 |
<!DOCTYPE html> <html> <head> <title>Hey y'all</title> <link rel="stylesheet" href="https://unpkg.com/a11y-css-reset/a11y.css" /> <link rel="stylesheet" href="main.css" /> </head> <body> <h1>Hi 👋</h1> </body> </html> |
CSSファイルにインポートすることもできます。
|
1 2 3 4 5 6 |
@import url("https://unpkg.com/a11y-css-reset/a11y.css"); /* more rules here! */ ul { list-style-type: disc; } |
リセットのみ使用する場合
すぐに使える開発環境を提供することだけにフォーカスを当てたCSSルールが必要な場合は、他のCSSの前にreset.cssを記述します。
|
1 2 3 4 5 6 7 8 9 10 11 |
<!DOCTYPE html> <html> <head> <title>Hey y'all</title> <link rel="stylesheet" href="https://unpkg.com/a11y-css-reset/reset.css" /> <link rel="stylesheet" href="main.css" /> </head> <body> <h1>Hi 👋</h1> </body> </html> |
CSSファイルにインポートすることもできます。
|
1 2 3 4 5 6 |
@import url("https://unpkg.com/a11y-css-reset/reset.css"); /* more rules here! */ ul { list-style-type: disc; } |
両方を使用する場合
a11y.cssとreset.cssの両方を使用する場合は、他のCSSルールの前にcombo.cssを記述します。
|
1 2 3 4 5 6 7 8 9 10 11 |
<!DOCTYPE html> <html> <head> <title>Hey y'all</title> <link rel="stylesheet" href="https://unpkg.com/a11y-css-reset/combo.css" /> <link rel="stylesheet" href="main.css" /> </head> <body> <h1>Hi 👋</h1> </body> </html> |
CSSファイルにインポートすることもできます。
|
1 2 3 4 5 6 |
@import url("https://unpkg.com/a11y-css-reset/combo.css"); /* more rules here! */ ul { list-style-type: disc; } |
npm経由で使用する場合
webpackなどでCSSを組み込むことができるのであれば、npmからも利用できます。
|
1 2 3 |
import "~a11y-css-reset/a11y.css"; import "~a11y-css-reset/reset.css"; import "~a11y-css-reset/combo.css"; |
sponsors
