stylelint-a11yについて調べてわかったこと
今回のテーマ「stylelint-a11y」
https://github.com/YozhikM/stylelint-a11y
- VueConf US 2019の発表で取り上げられていた
- どのようなルールがあるのかについて調べたので発表
- 最後に個人的な総括
content-property-no-static-value
-
Disallow unaccessible CSS generated content in pseudo-elements
aria-label属性のコンテンツと空の文字列以外のCSSが生成したcontentを許可しない
.hoge {
content: '見出し';
}- content - CSS: カスケーディングスタイルシート | MDN
-
CSS の生成コンテンツは DOM に含まれません。そのため、アクセシビリティツリーに現れず、支援技術とブラウザーの組み合わせによってはアナウンスされません。
font-size-is-readable
-
Disallow font sizes less than 15px
- 15px 以下（11.25pt）を許可しない
.foo {
font-size: 10px;
}- ちなみに px 指定にするとブラウザ側のフォントサイズ変更が効かなくなるので相対指定にしましょう
- ％, em, rem
line-height-is-vertical-rhythmed
-
Disallow not vertical rhythmed line-height
- バーティカルリズムとなっていない
line-heightを許可しない- px 指定の場合、24 の倍数にする
- 整数値指定の場合、1.5 以上にする
-
主要な段落コンテンツでは、 line-height の値の最小値が 1.5 になるようにしてください。
-
-
Line spacing (leading) is at least space-and-a-half within paragraphs, and paragraph spacing is at least 1.5 times larger than the line spacing.
-
Success Criterion 1.4.8 Visual Presentation - Web Content Accessibility Guidelines (WCAG) 2.1
-
.foo {
line-height: 12px;
}
.foo {
line-height: 1.3;
}
.foo {
line-height: 50px;
}- バーティカルリズム対応には
line-height-stepが有用ではあるが、まだすべてのブラウザでは未対応
media-prefers-reduced-motion
-
Require certain styles if the animation or transition in media features
- ユーザー側でアニメーションのモーションを切れるようにする（していないとエラー）
.bar {
animation-name: skew;
}
@media screen and (prefers-reduced-motion: reduce) {
.bar {
animation: none;
}
}- MacOS
- 環境設定 > アクセシビリティ > ディスプレイ >
視差効果を減らすをチェック
- 環境設定 > アクセシビリティ > ディスプレイ >
- iOS
- 設定 > アクセシビリティ >
視差効果を減らすをオン
- 設定 > アクセシビリティ >
- Windows
- Windows の設定 > 簡単操作 >
Windowsでアニメーションを再生するをオフ
- Windows の設定 > 簡単操作 >
- Androidは Pie（ver. 9）から支援技術（アクセシビリティ）で視差効果減らすのができる
- 8 以前はデベロッパー機能を開放しないといけない
media-prefers-color-scheme
-
Require implementation of certain styles for selectors with colors.
- 色付きのセレクタに特定のスタイルの実装を要求
- メディアクエリでのダークモードの設定を忘れてないかチェック
.foo {
color: red;
}
@media screen and (prefers-color-scheme: dark) {
.foo {
color: white;
}
}- 色指定したときにメディアクエリでの指定をしていないとエラー
.foo {
color: red;
}
@media screen and (prefers-color-scheme: dark) {
.foo {
background-color: black;
}
}no-display-none
-
Disallow content hiding with
display: noneproperty - コンテンツを隠す時に
display: noneプロパティを使うのを許可しない- 視覚的に隠すときに使用すると、スクリーンリーダーで確認できないため
- 目次用の見出しとか
- 視覚的に隠すときに使用すると、スクリーンリーダーで確認できないため
- 使い方を誤るとヤバそう
- 本当に見せないようにしている時に引っかかるので
visibility: hiddenのチェックもほしい気がする
no-obsolete-attribute
-
Disallow obsolete attribute using
- 廃止された属性の使用を許可しない
- 一覧
body[link] {
background-color: pink;
}
a,
img[datasrc] {
color: pink;
}
img[align],
a[name] {
color: pink;
}no-obsolete-element
-
Disallow obsolete selectors using
- 廃止されたセレクターの使用を許可しない
- 一覧
blink {
color: pink;
}
marquee {
font-size: 200%;
}no-spread-text
-
Require width of text in a comfortable range
- テキストの幅を 45 文字より大きく 80 文字未満にする必要がある
- ディスレクシア 対応になりうる
-
テキストの長い行を読む際に、現在読んでいる位置を維持することが困難な読字障害や視覚障害のある利用者が、より効率よくコンテンツをを閲覧したり操作したりできるようになる。
-
この達成方法はまた、文字サイズの拡大に合わせてカラム幅を広くすることにもなり、それによって、文字サイズが大きくなるに従ってテキストの一部が欠けて読めなくなるような事態も発生しにくくなる。
-
- 英字だと 80 字、日本語 40 字あたりが良い
- 国際化、海外展開などを考えるときには有用
- ほか言語だとどうなるのかは気になる
- 中国語、韓国語
- アラビア語
no-outline-none
-
Disallow outline clearing
- アウトライン除去を許可しない
.foo:focus {
outline: 0;
}
.bar:focus {
outline: none;
}
.baz:focus {
outline: none;
border: transparent;
}- なぜ
outline: none;がいけないか- キーボード操作でフォーカス位置が分からなくなる
- 現在地がどこか確認できなくなる
- 詳細は記事参照 => outline: none;
no-text-align-justify
-
Disallow content with
text-align: justify - テキストの両端揃えをしたコンテンツを許可しない
- 余白 (隙間) の川ができてしまうのを防ぐ
-
認知障害のある利用者の多くは、両端揃え (左右両端を揃えた配置) されたテキストのブロックで重大なトラブルに陥ることがある
- 余白 (隙間) の川ができてしまうのを防ぐ
selector-pseudo-class-focus
-
Require or disallow a pseudo-element to the selectors with
:hover - セレクタ疑似要素で
:hoverのとき:focusを追加するか、それのみを禁止する
a:hover {
/* settings */
}yamanoku が思ったこと・考えたこと
- 機械チェックでの限界はやはりあると思った
-
残念ながら、Web ページのアクセシビリティを自動的にチェックできるのは、チェック作業全体の 20％前後といわれています。
-
display: none自体は悪くない。問題は使い方。- あくまでも Lint ツールであることを忘れない
- 逆にチェックを通したことによって不利益が生じる人はいないか？
- アクセシビリティ考慮したユーザーテストはしないといけない
-
- あえて使うとするなら
- 廃止属性やセレクタのチェッカーとしてはアリ？
- レガシー環境での刷新とか
- 文化を定着させるための１つのツールとしたい
- 知識として蓄積することは良い
- 廃止属性やセレクタのチェッカーとしてはアリ？