開閉パネルには「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やJAWSを使っている場合、「折りたたみ」「展開」という状態を読み上げてくれるようになります。

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

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

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

視覚障害者が笑う読み上げ

実際スクリーンリーダーを使っている視覚障害者にWAI-ARIA準拠の開閉パネルを使ってもらいました。

開閉パネルを操作して笑っていました。

聞きなれない「折りたたみ」「展開」の読み上げが面白いようです。

開閉状態を伝えることには成功しているようでした。

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

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

開閉パネルのHTMLをclassで指定すると、人によって名前の付け方や、操作するJavaScriptの書き方が変わってくると思います。

WAI-ARIAだと書き方が決まっています。

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