セマンティックなマークアップ (divを多用しない&ARIAを活用する)

[knokmki612]

現在のスタイルの設計方針として

BEMとの比較

• Block: Component
• Element: クラスとしては定義しない。疑似要素、タグセレクタなどによって表現する
• Modifier: クラスとしては定義しない。Utilityとの組み合わせで表現するか、異なるComponentとして表現する

となっている。

この方針には .is-active のようなインタラクティブな要素で用いるModifierがカバーできないという問題点がある。

ARIAで提供されているロールの一部は aria-expanded などのような属性が用意されているので、それを使用して回避する。

[Hidetaro7]

tabsに関するWai-Areaの記事

https://www.w3.org/TR/wai-aria-practices-1.1/examples/accordion/accordion.html

[Hidetaro7]

閉じるボタンの例

https://developer.mozilla.org/ja/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-label_attribute

[Hidetaro7]

ここに日本語訳があって使用例もある
https://waic.jp/docs/2019/NOTE-wai-aria-practices-1.1-20190207/

[knokmki612]

#82 のドキュメンテーションにこのissueの内容を反映することをもってこのissueを完了する