この記事ではSvelteで作られたUIコンポーネントライブラリの中で以下の条件に当てはまるライブラリを紹介します。
- アクセシビリティが高い
- APGで推奨されているキーボード操作が可能
- マークアップがそれなりに正しい
- スターが1k以上
- Svelte5に対応されている
- 例がSvelte5に移行されている
- 依存しているSvelteのバージョンが5以上
全てのコンポーネントをチェックする時間はなかったので、
- Tabs
- Combobox
- Accordion, Disclosure
- Dialog
この辺りを特にチェックしました。
候補に残ったライブラリ
について、それぞれ軽く紹介します。
候補に上がらなかったライブラリに関しては一部それなりに対応されているものもありましたが、主に以下の2点で候補から外しています。
- キーボードでの操作が実装されていない
- roleなどは設定されているが、マークアップ上おかしいものが多い
「マークアップ上おかしいものが多い」に関しては今回たまたま選ばれたライブラリがヘッドレスに使えるものになっている関係で、あまり気にしなくてもいいものになってはいます。
Bits UI
Svelte5が出てきて割と早い段階で登場したUIコンポーネントライブラリです。
TOPページにも「Accessible」の文字が登場しており、アクセシビリティを意識して実装されていることが伺えます。
このライブラリに関しては一部「roleなどは設定されているが、マークアップがおかしい」に当てはまるものがあり、ほとんどスクリプトの必要ないチェックボックスなどのコンポーネントがそういう実装になっているため、余計なスクリプトが書かれているのが少し気になりました。
Melt UI
Svelte5への対応は遅れているようですが、以前から個人的に好みだったライブラリです。
こちらも一部「roleなどは設定されているが、マークアップがおかしい」に当てはまるものがありますが、他に比べて比較的品質が高いです。
更新頻度が少し低めなのでその点が少し気になるところです。
また、サンプルコードでaria-labelが使われているのはちょっと気になりました。
Zag
こちらはSvelte以外でも使えるように作られているライブラリです。
Bits UIに続き、こちらもTOPページに「Accessible」の文字が登場しており、アクセシビリティを意識して実装されていることが伺えます。
こちらも一部「roleなどは設定されているが、マークアップがおかしい」に当てはまるものがありますが、これだけのボリュームのものを比較的アクセシブルな状態で維持されているのはすごいと思います。
まとめ
先ほどあげたライブラリは他のライブラリと比べると比較的ちゃんと実装されているので、大体のコンポーネントはキーボードでも問題なく操作できました。
ただ全てに言えることですが、JavaScript（とaria）がないとまともに動きません。
これはつまり実装にバグが含まれる可能性や、特殊な支援技術で動かない可能性があり、また余計なJavaScriptが書かれていることでバンドルサイズが増えているかもしれないということです。
昨今たくさんのUIコンポーネントライブラリがリリースされており、アクセシビリティに配慮されたものも増えてきました。
ただ、今回見てきたように「これさえ使っておけば安心」というものはまだ出てきていないようです。
社内にマークアップやアクセシビリティにくわしいエンジニアがいる場合はあえてこれらを使う必要はないかなというのが現時点での感想です。
すこし厳しめのレビューにはなりましたが、アクセシビリティに配慮されたライブラリの人気が高まってきてWeb全体でアクセシビリティが高くなってきていることはいいことだと思っています。
また、デザインの再現という観点でUIコンポーネントライブラリ側としてはdivなどを使わざるを得ないケースも多分あるんだろうなとも感じました。
今回たまたま選ばれた3つともがヘッドレスなUIコンポーネントライブラリだったのですが、
ヘッドレスなライブラリであればHTML部分を自由に書くことができるのでそういう意味では選ぶ理由になるかも？と思いました。
ぜひ使ってみてください！