stylelint-a11yについて調べてわかったこと

created at:
この記事は公開から1年以上が経過しています。内容が一部古い箇所があります。

今回のテーマ「stylelint-a11y

https://github.com/YozhikM/stylelint-a11y

content-property-no-static-value

  • Disallow unaccessible CSS generated content in pseudo-elements

  • aria-label属性のコンテンツと空の文字列以外のCSSが生成したcontentを許可しない
.hoge {
  content: "見出し";
}

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

.foo {
  line-height: 12px;
}
.foo {
  line-height: 1.3;
}
.foo {
  line-height: 50px;
}

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;
  }
}

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: none property

  • コンテンツを隠す時に display: noneプロパティを使うのを許可しない
    • 視覚的に隠すときに使用すると、スクリーンリーダーで確認できないため
      • 目次用の見出しとか
  • 使い方を誤るとヤバそう
    • 本当に見せないようにしている時に引っかかるので
    • visibility: hiddenのチェックもほしい気がする

no-obsolete-attribute

body[link] {
  background-color: pink;
}
a, img[datasrc] {
  color: pink;
}
img[align], a[name] {
  color: pink;
}

no-obsolete-element

blink {
  color: pink;
}
marquee {
  font-size: 200%;
}

no-spread-text

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

selector-pseudo-class-focus

  • Require or disallow a pseudo-element to the selectors with :hover

  • セレクタ疑似要素で:hoverのとき:focusを追加するか、それのみを禁止する
a:hover {
  /* settings */
}

yamanoku が思ったこと・考えたこと

  • 機械チェックでの限界はやはりあると思った
  • あえて使うとするなら
    • 廃止属性やセレクタのチェッカーとしてはアリ?
      • レガシー環境での刷新とか
    • 文化を定着させるための1つのツールとしたい
      • 知識として蓄積することは良い

関連

タピオカは出ません!?「タピオカLT」を開催しました!|太田 良典|note

アーカイブ記事のため、内容に関する更新依頼は受け付けておりませんが、誤字や脱字などありましたらご連絡ください。

この記事に関する修正依頼
アーカイブ一覧へ戻る