Lock in $30 Savings on PRO—Offer Ends Soon! ⏳

UI 開発における ヘッドレス UI ライブラリの重要性とデザインシステムへの取り入れ方

azukiazusa
November 22, 2024
5.9k

UI 開発における ヘッドレス UI ライブラリの重要性とデザインシステムへの取り入れ方

昨今の Web 開発における UI はますます複雑化し、アクセシビリティの重要性が高まっています。ブラウザの標準機能だけでは実現できない複雑な UI を実装する際、アクセシビリティに関する誤った実装が原因で、ユーザー体験を損なう可能性があります。ヘッドレス UI ライブラリは、あらかじめアクセシビリティに配慮されたコンポーネントを提供することで、開発者がこれらの問題に悩まされることなく、高品質な UI を構築できるようになります。本セッションでは、ヘッドレス UI ライブラリを活用し、デザインシステムの一部として、アクセシブルでカスタマイズ可能な UI を構築する方法を紹介します。

azukiazusa

November 22, 2024
Tweet

Transcript

  1. UI 開発の難しさ • ネイティブアプリのような UI が求められている • ブラウザに組み込まれている UI は非常に少ない

    ◦ `<select>` のようにスタイリングが困難なことも • 多くの UI は JavaScript を使用して、1 から作り直す必 要がある • アクセシビリティのため、セマンティクスを失ってはな らない
  2. セマンティクスを保つ • 1 から作られた UI の多くは `<div>` 要素で構築される • `<button>`

    要素は button ロールを持っているため、支 援技術にこれはボタンでありクリック可能なことが伝わる • `<div>` 要素はロールを持たないため、支援技術にどのよ うな UI なのか伝わらない ◦ WAI-ARIA による適切な意味付けとインタラクション が必要
  3. 例えば Tab UI なら • ← → キーでタブ間のフォーカスを移動できる • コンテナ要素には

    `tablist` ロール • タブには `tab` ロール • タブのコンテンツには `tabpanel` • タブとコンテンツは `aria-controls` で紐づける • and more…
  4. ヘッドレス UI ライブラリのメリット • 同一の UI コンポーネントを 1 から実装する車輪の再発明 を防げる

    • プリミティブなパーツとしてヘッドレス UI ライブラリを 使うことで、最低限のアクセシビリティを担保できる ◦ とりあえず使っておけば、無知の無知の問題を防げる
  5. • React Aria ◦ OSS としてコミュニティに共有し Web 全体の水準を高め ようとしている •

    Radix UI ◦ 私たちの目標は、コミュニティがアクセシブルなデザイン システムを構築するために使用できる、十分な資金のある オープンソースコンポーネントライブラリを作成すること です。 ヘッドレス UI ライブラリの目的とも一致
  6. 従来の UI ライブラリとの比較 • スタイルをカスタマイズことに労力が割かれる ◦ ライブラリの実装の詳細を知る必要がある ◦ 気がつけば CSS

    が !important だらけになった経験な ど... • デザインの自由度が制約されることも • ヘッドレス UI ライブラリはカスタマイズ性の高さが利点 で、用意に再利用できる
  7. • 近年の UI 開発では 1 から 実装する必要があり、アクセ シビリティのことを考慮にいれると多大な労力がかかる • ヘッドレス

    UI ライブラリは高機能なインタラクションを 提供し、Web 全体のアクセシビリティの水準を担保する • ヘッドレス UI ライブラリをプロダクトに組み込む場合に は、コンポーネントライブラリの一部として使用すると 良い まとめ