frontendmemo

このサイトは、「html、css、js、ツールなどについて、自分が覚えたこと、またはいつも忘れて調べることを書き溜め、それが結果といて勉強したての初心者の方や自分と同じような技術レベルの人の助けになることを目的とするWebログ」、略してブログです。挨拶→http://frontendmemo.hatenablog.com/entry/2016/06/25/115845

トグルのarea-*は何を指定するか。

スポンサードリンク


スポンサードリンク


area-*属性はJSで変更された要素の役割と状態をブラウザに伝える働きをします。

トグルでの使用例

トグルでは主に下記を使用します。

  • aria-controls・・・ボタンと開閉要素の関連付け
  • aria-expanded・・・開閉の状態

主に下記のようにします。

<div class="toggle-01 js-toggle is-open">
<button type="button" class="toggle-hook js-toggle-hook" aria-controls="toggle-content-01"><span>閉じる</span></button>
<div id="toggle-content-01" class="toggle-content js-toggle-content">
<p>トグルコンテンツ</p>
</div>
<!-- toggle-01 --></div>

また、JSオフ時も考慮し、JSでボタンと開閉要素にaria-expanded="true"(開いてる場合)を指定します。

<div class="toggle-01 js-toggle is-open">
<button type="button" class="toggle-hook js-toggle-hook" aria-controls="toggle-content-01" aria-expanded="true"><span>閉じる</span></button>
<div id="toggle-content-01" class="toggle-content js-toggle-content" aria-expanded="true">
<p>トグルコンテンツ</p>
</div>
<!-- toggle-01 --></div>