スタッフブログ

モーダルやタブ、アコーディオンなど「動き」のあるUIは、デザイン性や利便性を高める一方で、支援技術ユーザーにとっては操作や理解が難しくなることがあります。
そのため、動きを伴うコンポーネントを実装する際は「アクセシビリティ対応」が欠かせません。

参考ガイドライン

W3C が公開している ARIA Authoring Practices Guide (APG) では、実際のUIパターンごとに「ロールや属性の付け方」「キーボード操作の仕様」などが整理されています。

タブ、モーダル、ツリー、メニューなど、多くのケースで 実装コード例 が紹介されており、開発者が迷わず対応できるようになっています。
ARIA Authoring Practices Guide (APG)
このガイドを参考にすることで、動きのあるUIをアクセシブルに作るための基本を把握することができます。

実際にどう活かすか

実務では、APGが全て正解として見るだけでなく、

• 実装しているUIが 想定された操作と一致しているか

• ロービングタブインデックスやaria属性の相互参照が抜けていないか

• スクリーンリーダーで操作が伝わるか

• スクリーンリーダー読み上げに無理はないか

• キーボード操作で操作できるか

といった観点でチェックするのも大事なポイントです。

自社の取り組み：ハンドブックとブログ

私たち、ましじめでも、社内外の方に役立つよう「ウェブアクセシビリティハンドブック」と「アクセシビリティ連載ブログ」を公開しています。
日本語で考え方もまとめていますので、ぜひ参考にしてみてください。
ウェブアクセシビリティハンドブック
ブログ：アクセシビリティ連載

おわりに

「動きのあるUI」をアクセシブルにすることは、単に基準に適合させるためだけではなく、誰にとっても「自然に使いやすい」体験につながります。
APGを基盤としつつ、私たちのハンドブックやブログも実装の一助になれば幸いです。