Open2021/04/04にコメント追加8

a11y由来のスタイリング考察

aria属性や role属性を用いたスタリング実例は、まだあまり聞くことがありません。例えば CSS Modules の場合次の様な指定が可能であり、a11yとスタイリングを両立できるため、アプローチとして良さそうと考えています。

.text {
  color: #000;
}
.text[aria-invalid=true] {
  color: #f00; /* エラーの表現とか */
}
.menu[aria-expanded=false] {
  display: none;  /* メニューの開閉表現とか */
}
.menu[aria-expanded=true] {
  display: block;  /* メニューの開閉表現とか */
}

実例や、属性と表現の組み合わせ例など。自由に投稿いただけると嬉しいです。

yamanoku

メニュー開閉箇所について、aria-expanded 自体は

「要素、または要素が制御する別のグループ化要素が、現在展開されるまたは折りたたまれるかどうかを示す。」ステート

なのでそのもの自体に display: block や display: none をつけるのは誤りみたいです。
（参考：aria-expandedのよくある間違い / masuP.net）

<button type="button" aria-expanded="false" aria-controls="section1">開く</button>
<section id="section1" aria-hidden="true">
  コンテンツ
</section>

として使う形なので、上のスタイルを適応するとボタン部分が消えちゃう感じになります。

yamanoku

[aria-hidden=true] {
  display: none;
}

もありそうです。hiddenと同じ感じで

Takepepe

.is-current 等で表現していたものはこちらが良さそう。page のほか、step / location はよく使いそう。

.nav li a[aria-current="page"] {
  ...
}

yamanoku

span[role=checkbox][aria-checked=true] {
  ...
}
button[aria-pressed=true] {
  ...
}

チェックボックスやトグルボタンの状態変化のスタイル付与とかに使えそう

Takepepe

:active や :checked など擬似クラスを用いて表現するよりも、aria属性を付与したマークアップの方がアクセシビリティ観点としては良いのでしょうか？

yamanoku

aria属性を付与したマークアップの方がアクセシビリティ観点としては良い

ということはないのですが（使わないほうがベター）、適切なタグが使えない状況で <span role="checkbox"> みたいになっていたときのスタイル手段として有効、という感じでした。

Takepepe

なるほど、そういう状況もありそうですね