[2021/10/05] Frontend Night

[jjenko]

Policy

• 資料の準備をがんばらない
• 参加・途中退席は自由
• スキップしない

話したい・聞きたいネタを書いてく ✏️

ハッシュタグ #frontend_night

Prev: #165

Created from #65 by issue-creator

[kobayang]

Accessible Icon Buttons

Icon ボタンのアクセシビリティを高めるための話。

• Chrome Devtools で a11y を確認する方法について
• button または role="button" を追加する
• Icon の隣に Text を表示する

また、Text がない Icon についての Accessible な実装について3つ紹介している

• 1. width 1px で hidden な Text を差し込む
• 2. 完全に hidden(display: none) な Text と aria-labelledBy を組み合わせる
• 3. aria-label を設定する
  • aria-label は、a11y の contents を上書きしてしまうことに注意しなければならない

---

感想として、Text がない Icon ボタンの場合は aria-label をつける 3のパターン、そうでない場合は aria-labelledBy と hidden Text を組み合わせる 2のパターンが実装方針として良いのではないかと思った。

上記の実装が実現できていると、 https://testing-library.com/docs/queries/byrole/ で getByRole("button", { name: "label" } で DOM が指定できるようになるので、ボタンを実装する際には心がけたい。