stylelint-a11yについて調べてわかったこと
https://gyazo.com/27deb2915e6ea5367f3d30975812c68b
https://gyazo.com/5510d4e88c34b7dc94f91817952946e7
メニューのドキュメントアイコンより「Start presentation」クリックでプレゼンテーションが始まります
自己紹介
yamanoku.icon @ yamanoku
大山奥人, おおやまみちのく a.k.a やまのく
得意領域：マークアップ・フロントエンド・UIデザイン
既婚で1児の父と猫🐈🐈🐈の飼い主
https://gyazo.com/68a19f11b771c82a7887ede7791af040
どういうルールがあるのかについて調べたので発表
最後に個人的な総括
content-property-no-static-value
Disallow unaccessible CSS generated content in pseudo-elements
aria-label属性のコンテンツと空の文字列以外のCSSが生成したcontentを許可しない code:error.css
.hoge {
content: "見出し";
}
CSS の生成コンテンツは DOM に含まれません。そのため、アクセシビリティツリーに現れず、支援技術とブラウザーの組み合わせによってはアナウンスされません。 https://gyazo.com/c4f785d430b250de7aea70937190f29e
font-size-is-readable
Disallow font sizes less than 15px
15px以下（11.25pt）を許可しない
code:error.css
.foo {
font-size: 10px;
}
ちなみにpx指定にするとブラウザ側のフォントサイズ変更が効かなくなるので相対指定にしましょう
%, em, rem
line-height-is-vertical-rhythmed
Disallow not vertical rhythmed line-height
https://gyazo.com/2d3fc8a922e2c0d63bf9ae26bc8d64f5
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.
code:error.css
.foo {
line-height: 12px;
}
.foo {
line-height: 1.3;
}
.foo {
line-height: 50px;
}
yamanoku.icon バーティカルリズム対応にはline-height-stepが有用ではあるが、まだすべてのブラウザでは未対応
media-prefers-reduced-motion
Require certain styles if the animation or transition in media features
code:ok.css
.bar {
animation-name: skew;
}
@media screen and (prefers-reduced-motion: reduce) {
.bar {
animation: none;
}
}
https://www.youtube.com/watch?v=-7ENwVFOh_I
環境設定 > アクセシビリティ > ディスプレイ > 視差効果を減らすをチェック Windows の設定 > 簡単操作 > Windowsでアニメーションを再生する をオフ
AndroidはPie（ver. 9）から支援技術（アクセシビリティ）で視差効果減らすのができる 8以前はデベロッパー機能を開放しないといけない
media-prefers-color-scheme
Require implementation of certain styles for selectors with colors.
色付きのセレクタに特定のスタイルの実装を要求
code:ok.css
.foo {
color: red;
}
@media screen and (prefers-color-scheme: dark) {
.foo {
color: white;
}
}
色指定したときにメディアクエリでの指定をしていないとエラー
code: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プロパティを使うのを許可しない
視覚的に隠すときに使用すると、スクリーンリーダーで確認できないため
目次用の見出しとか
yamanoku.icon 使い方を誤るとヤバそう
本当に見せないようにしている時に引っかかるので
visibility: hiddenのチェックもほしい気がする
no-obsolete-attribute
Disallow obsolete attribute using
廃止された属性の使用を許可しない
一覧
例
code:error.css
background-color: pink;
}
color: pink;
}
color: pink;
}
no-obsolete-element
Disallow obsolete selectors using
廃止されたセレクターの使用を許可しない
一覧
例
code:error.css
blink {
color: pink;
}
marquee {
font-size: 200%;
}
no-spread-text
Require width of text in a comfortable range
テキストの幅を45文字より大きく80文字未満にする必要がある
テキストの長い行を読む際に、現在読んでいる位置を維持することが困難な読字障害や視覚障害のある利用者が、より効率よくコンテンツをを閲覧したり操作したりできるようになる。 この達成方法はまた、文字サイズの拡大に合わせてカラム幅を広くすることにもなり、それによって、文字サイズが大きくなるに従ってテキストの一部が欠けて読めなくなるような事態も発生しにくくなる。
英字だと80字、日本語40字あたりが良い
国際化、海外展開などを考えるときには有用
yamanoku.icon ほか言語だとどうなるのかは気になる
中国語、韓国語
アラビア語
no-outline-none
Disallow outline clearing
アウトライン除去を許可しない
code:error.scss
.foo:focus {
outline: 0;
}
.bar:focus {
outline: none;
}
.baz:focus {
outline: none;
border: transparent;
}
なぜoutline: none;がいけないか
キーボード操作でフォーカス位置が分からなくなる
現在地がどこか確認できなくなる
no-text-align-justify
Disallow content with text-align: justify
テキストの両端揃えをしたコンテンツを許可しない
余白 (隙間) の川ができてしまうのを防ぐ
https://miro.medium.com/max/1400/1*yCJ2EkFtsYyKJ9K2FTDW6g.png
認知障害のある利用者の多くは、両端揃え (左右両端を揃えた配置) されたテキストのブロックで重大なトラブルに陥ることがある
selector-pseudo-class-focus
Require or disallow a pseudo-element to the selectors with :hover
セレクタ疑似要素で:hoverのとき:focusを追加するか、それのみを禁止する
code:error.css
a:hover {
/* settings */
}
yamanoku.icon が思ったこと・考えたこと
残念ながら、Webページのアクセシビリティを自動的にチェックできるのは、チェック作業全体の20％前後といわれています。
display: none自体は悪くない。問題は使い方。
逆にチェックを通したことによって不利益が生じる人はいないか？ あえて使うとするなら
廃止属性やセレクタのチェッカーとしてはアリ？
レガシー環境での刷新とか
文化を定着させるための１つのツールとしたい
知識として蓄積することは良い
関連