stylelint-a11yについて調べてわかったこと
メニューのドキュメントアイコンより「Start presentation」クリックでプレゼンテーションが始まります
自己紹介
大山奥人 , おおやまみちのく a.k.a やまのく 得意領域：マークアップ・フロントエンド・UIデザイン
既婚で1児の父と猫🐈🐈🐈の飼い主
Webアクセシビリティに関する本
今回のテーマ「stylelint-a11y」
VueConf US 2019の発表で取り上げられていた
どういうルールがあるのかについて調べたので発表
最後に個人的な総括
content-property-no-static-value > Disallow unaccessible CSS generated content in pseudo-elements
error.css.hoge {
content: "見出し";
}支援技術＝スクリーンリーダーに認識されない場合がある
font-size-is-readable > Disallow font sizes less than 15px
15px以下（11.25pt）を許可しない
error.css.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.
error.css.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
ok.css.bar {
animation-name: skew;
}
@media screen and (prefers-reduced-motion: reduce) {
.bar {
animation: none;
}
}環境設定 > アクセシビリティ > ディスプレイ >
視差効果を減らす をチェック設定 > アクセシビリティ >
視差効果を減らす をオンWindows の設定 > 簡単操作 >
Windowsでアニメーションを再生する をオフAndroidはPie（ver. 9）から支援技術（アクセシビリティ）で視差効果減らすのができる
8以前はデベロッパー機能を開放しないといけない
media-prefers-color-scheme >Require implementation of certain styles for selectors with colors.
色付きのセレクタに特定のスタイルの実装を要求
メディアクエリでのダークモードの設定を忘れてないかチェック
ok.css.foo {
color: red;
}
@media screen and (prefers-color-scheme: dark) {
.foo {
color: white;
}
}色指定したときにメディアクエリでの指定をしていないとエラー
error.css.foo {
color: red;
}
@media screen and (prefers-color-scheme: dark) {
.foo {
background-color: black;
}
} no-display-none >Disallow content hiding with display: none propertyコンテンツを隠す時に
display: none プロパティを使うのを許可しない視覚的に隠すときに使用すると、スクリーンリーダーで確認できないため
目次用の見出しとか
本当に見せないようにしている時に引っかかるので
visibility: hidden のチェックもほしい気がする no-obsolete-attribute >Disallow obsolete attribute using
廃止された属性の使用を許可しない
一覧
例
error.cssbody[link] {
background-color: pink;
}
a, img[datasrc] {
color: pink;
}
img[align], a[name] {
color: pink;
} no-obsolete-element >Disallow obsolete selectors using
廃止されたセレクターの使用を許可しない
一覧
例
error.cssblink {
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
アウトライン除去を許可しない
error.scss.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 を追加するか、それのみを禁止するerror.cssa:hover {
/* settings */
}機械チェックでの限界はやはりあると思った
> 残念ながら、Webページのアクセシビリティを自動的にチェックできるのは、チェック作業全体の20％前後といわれています。
display: none 自体は悪くない。問題は使い方。あくまでもLintツールであることを忘れない
逆にチェックを通したことによって不利益が生じる人はいないか？
あえて使うとするなら
廃止属性やセレクタのチェッカーとしてはアリ？
レガシー環境での刷新とか
文化を定着させるための１つのツールとしたい
知識として蓄積することは良い
関連