アクセシビリティを改善するために、通常のCSSのリセットに加えるスタイルシート -a11y css reset

アクセシビリティを改善するために、通常のCSSのリセットに加えるスタイルシートを紹介します。コンテンツを視覚的に隠す際に見えなくするだけでなく、スクリーンリーダーにもアクセス可能にし、フォーカス時の振る舞いなどが定義されています。

サイトのキャプチャ

a11y css reset -GitHub

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。

2つ目のreset.cssは、簡易的なCSSリセットです。

3つ目のCSSは、上記2つを合わせたcombo.cssです。

a11y css resetの使い方

アクセシビリティのみ使用する場合

アクセシビリティに重点を置いたCSSルールが必要な場合は、他のCSSの前にa11y.cssを記述します。

CSSファイルにインポートすることもできます。

リセットのみ使用する場合

すぐに使える開発環境を提供することだけにフォーカスを当てたCSSルールが必要な場合は、他のCSSの前にreset.cssを記述します。

CSSファイルにインポートすることもできます。

両方を使用する場合

a11y.cssとreset.cssの両方を使用する場合は、他のCSSルールの前にcombo.cssを記述します。

CSSファイルにインポートすることもできます。

npm経由で使用する場合

webpackなどでCSSを組み込むことができるのであれば、npmからも利用できます。

sponsors

top of page

©2024 coliss