WAI-ARIA 準拠には CSS Modules が最適という話

CSS と WAI-ARIA 「WAI-ARIA」はブラウザー・支援技術が認識できる「意味」を注釈することで、ユーザーの理解を助ける技術です。この与えられた注釈は CSS にも共有され、意味をたよりに装飾の手がかりとすることができます。 セマンティックな「状態」表現 特別な理由があり「セマンティックではない」以下の様なマークアップを行った場合をみてみます。spanタグの class 名に btnの名前が付与されていますが、ブラウザー・支援技術は、以下をボタンだと認識できません。

[hachibeechan]

styled-componentsだけがCSSinJSじゃないんだけど、もしそうだとしても.attrs()使えば定義側にaria属性をカプセル化できるからstyled-componentsのほうがむしろ優秀だという話になっちゃうかなー

[kimromi]

なるほど〜、styled-components使っててこの辺ごちゃごちゃすると感じてました。

[yarumato]

“WAI-ARIAはブラウザー・支援技術に「注釈」（「このspanタグはボタンである」とかボタンの押下状態）を（HTMLタグの属性を使って）与えること。CSS in JSだと注釈と乖離する可能性。CSS Modulesだと乖離しない。”