Upgrade to Pro — share decks privately, control downloads, hide ads and more …

チームで開発する際にアクセシビリティを保つ施策

azukiazusa
August 22, 2024

 チームで開発する際にアクセシビリティを保つ施策

この発表はすでにアクセシビリティに興味を持っていて、ソフトウェア開発の現場にアクセシビリティを取り入れたい人を対象としています。

開発チーム全体でアクセシビリティに意識を持つ状態が理想ですが、全員が詳細な実装を行うのは実際には難しいでしょう。そこで、特に意識をせずともある程度のアクセシビリティを保つ状態にするための施策について紹介いたします。

azukiazusa

August 22, 2024
Tweet

More Decks by azukiazusa

Other Decks in Technology

Transcript

  1. まずは個人の小さな改善から始める • プロジェクト外の時間を使い、小さな改善から進めて、 成果をアピールする ◦ onclick がついてる要素を <button> にする ◦

    <img> 要素の alt 属性を設定する ◦ フォーカスリングが表示されるようにする • 画面をキーボードのみで操作できるか試してみるとよい • 数行の小さなコードの修正でも、大きな改善となる
  2. ESLint • alt 属性のない <img> 要素や、間違った aria-* 属性を 使っている箇所を検出してくれる •

    即座にフィードバックを得ることができる • なぜ検出されたエラーを修正する必要があるのか、と いった会話からアクセシビリティへの興味を広げられる こともあった
  3. Markuplint • HTML Standard や WAI-ARIA などの仕様を踏まえた上 でHTML の構文エラーを検出してくれる ◦

    許可されていない子要素 ▪ <button> の子要素にインタラクティブな要素は 許可されていない ◦ 要素にアクセシブルな名前が必要
  4. • axe-core はアクセシビリティ検証ツールのコアエンジン で、様々なツールと連携できる ◦ Chrome の Devtools など •

    @axe-core/playwright はブラウザを立ち上げて自動テス トを実行する @axe-core/playwright
  5. • タブやモーダルといった複雑な UI は、アクセシビリティ 上求められていることが多い ◦ 適切な role, aria-* 属性を設定し、キーボード操作を

    提供する • `<Tab>`、`<Modal>` のような形で使えようにすること で、実装の詳細を隠蔽できる コンポーネントライブラリ
  6. • 画面を実装しているときに、各 UI パーツのアクセシビリ ティの詳細な実装を頭の隅においておける ◦ コンポーネントを使っていればアクセシブルに • role や

    aria-* 属性がコンポーネントの外に漏れないよう なインターフェースが望ましい コンポーネントライブラリによるアクセ シビリティ実装の抽象化
  7. • ヘッドレス UI ライブラリを使うのがおすすめ ◦ Headless UI ◦ Radix UI

    ◦ Ark UI ◦ React Aria コンポーネントライブラリの実装