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

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

Takepepe 2021/04/04に更新

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 2021/04/04

メニュー開閉箇所について、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 2021/04/04

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

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

Takepepe 2021/04/04に更新

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

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

yamanoku 2021/04/04

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

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

Takepepe 2021/04/04

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

yamanoku 2021/04/04

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

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

Takepepe 2021/04/04

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