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

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

今回のテーマ「stylelint-a11y

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

content-property-no-static-value

.hoge {
  content: '見出し';
}

font-size-is-readable

.foo {
  font-size: 10px;
}

line-height-is-vertical-rhythmed

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

media-prefers-reduced-motion

.bar {
  animation-name: skew;
}
@media screen and (prefers-reduced-motion: reduce) {
  .bar {
    animation: none;
  }
}

media-prefers-color-scheme

.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

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

.foo:focus {
  outline: 0;
}
.bar:focus {
  outline: none;
}
.baz:focus {
  outline: none;
  border: transparent;
}

no-text-align-justify

selector-pseudo-class-focus

a:hover {
  /* settings */
}

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

関連

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

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

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