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」を指定します。
サンプルコード（サンプルページから抜粋）
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 |
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <title>開閉パネル(Disclosure)のアクセシビリティ</title> <style> /* 省略 */ [aria-hidden="true"] { display: none; } </style> </head> <body> <dl class="js-disclosure"> <dt> <button aria-expanded="false" aria-controls="panel0">開閉ボタン<span class="arrow"></span></button> </dt> <dd> <p id="panel0" aria-hidden="true">開いたときの本文<br>開いたときの本文<br>開いたときの本文</p> </dd> </dl> <script> $('.js-disclosure [aria-expanded]').on('click', function() { let expanded = $(this).attr('aria-expanded') === 'true', controls = $(this).attr('aria-controls'); $(this).attr('aria-expanded', !expanded); $('#' + controls).attr('aria-hidden', expanded); }); </script> </body> </html> |
「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だと書き方が決まっています。
保守管理の面でも優れているのでお勧めです。