開閉パネルには「aria-expanded」と「aria-controls」

FAQページで見かける開閉パネル。アクセシビリティを確保してコーディングするのであれば、「aria-expanded」と「aria-controls」を使います。サンプルコードを掲載します。

WAI-ARIAに準拠しよう

コーディングでアクセシビリティが気になったら、W3CのWebアクセシビリティ仕様「WAI-ARIA」に準拠しましょう。

WAI-ARIAは日本のWeb業界では、あまり知られていない印象があります。

ただ、GoogleやAmazonなどのコードを見ると、WAI-ARIA準拠が進んでいることが分かります。

世界に後れを取るわけにはいきません。

開閉サンプルページ

FAQページをサンプルにした開閉パネルのコードを、W3Cのページ(英語)で見ることができます。

もう少し実用的なCSSを適応し、WAI-ARIAに準拠した開閉パネルのサンプルを作ってみました。あわせてご確認ください。

開閉のトリガーになるボタンに「aria-expanded」と「aria-controls」を指定します。

サンプルコード(サンプルページから抜粋)

「aria-expanded」は開閉の状態をユーザーに伝えます。開いているならtrue。閉じているならfalse。

スクリーンリーダーNVDAを使っている場合、「折りたたみ」「展開」という状態を読み上げてくれるようになります。

「aria-controls」には開閉させる要素のidを指定します。

もう一つ「aria-hidden=”true”」という、表示状態を表すWAI-ARIAを使っています。これは必須ではなく、styleの「display: none;」でもよいです。

W3Cのサンプルコードでは、styleで表示状態を切り替えていましたが、個人的には統一してaria-hiddenを指定したほうが扱いやすく感じます。

保守管理の面でもWAI-ARIAはお勧め

WAI-ARIAを準拠すると、コードが属人的になりにくくなるメリットがあります。

保守管理の面でも優れているのでお勧めです。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)