はじめに
この記事がWebアクセシビリティ対応の足がかりになればいいなと思い書きました。
記事自体は5分程度で読める内容です。
ターゲットは
- Webアクセシビリティについて苦手意識がある。
- なんとなくアクセシビリティの単語など知ってはいるけど、aria属性とか指定したこと無い
- WAI-ARIAをワイエリアと読んじゃう（正しくはウェイ-アリア）
小難しいことはあまり考えず、
まずはaria-expanded、aria-hidden、aria-controlsこの3つの使い方を覚えます。
※JavaScriptでの属性の値を変更したり、フォーカス切り替えの説明については今回省きます
※CSS設計は考慮していません
ハンバーガーメニューとドロワーにaria-expanded、aria-hidden、aria-controlsを使ってみる
まずは何もしてない状態（ハンバーガー）と完成形（チーズバーガー）を確認。
チーズバーガーはなんだかできる風に見えますね。
■ ハンバーガー
<button class="hamburger" type="button">メニュー</button>
<div class="drawer">
〜〜省略〜〜
</div>
■ チーズバーガー
<button class="cheeseburger" type="button" aria-controls="drawer" aria-expanded="false">メニュー</button>
<div id="drawer" class="drawer" aria-hidden="true">
〜〜省略〜〜
</div>
各aria属性の説明と設置方法を見ていきましょう。
aria-expanded
要素（またはグループ化された要素）が、現在展開されているか、折りたたまれているかどうかを示す状態を表します。
aria-expandedを付与する要素は？
◯ ボタンなど、展開を制御する要素に付与
◯ ボタン、折りたたまれる要素をラップする親要素に付与
✕ 折りたたまれている要素には付与しない
✕ NG
<button class="hamburger" type="button">メニューボタン</button>
<div class="drawer" aria-expanded="false">
〜〜ドロワー省略〜〜
</div>
◯ OK
<button class="hamburger" type="button" aria-expanded="false">メニューボタン</button>
<div class="drawer">
〜〜ドロワー省略〜〜
</div>
◯ OK
<nav aria-expanded="false">
<button class="hamburger" type="button">メニューボタン</button>
<div class="drawer">
〜〜ドロワー省略〜〜
</div>
</nav>
aria-hidden
aria-hidden="true"と指定することで、その部分だけ読み上げをスキップする。
aria-hidden="true"を指定すると要素が非表示になるというわけではない。
非表示にしたい要素はCSSで非表示にする。
◯ OK
<button class="hamburger" type="button" aria-expanded="false">メニューボタン</button>
<div class="drawer" aria-hidden="true">
〜〜ドロワー省略〜〜
</div>
CSS記述例
.drawer[aria-hidden=true] {
visibility: hidden;
opacity: 0;
pointer-events: none;
}
aria-controls
展開を制御する要素に付与。
展開・折りたたむ要素にid属性を付与し、紐付ける
✕ NG（折りたたまれた要素にidが付与されていない）
<button class="hamburger" type="button" aria-controls="drawer" aria-expanded="false">メニューボタン</button>
<div class="drawer" aria-hidden="true">
〜〜ドロワー省略〜〜
</div>
◯ OK
<button class="hamburger" type="button" aria-controls="drawer" aria-expanded="false">メニューボタン</button>
<div id="drawer" class="drawer" aria-hidden="true">
〜〜ドロワー省略〜〜
</div>
まとめ
Webアクセシビリティはたくさん覚えることがあって大変なイメージがありますが、
aria-expanded、aria-hidden、aria-controlsこの3つを覚えてまずはチーズバーガーを意識しましょう。
これを覚えると、モーダルや開閉式のトグルメニューなども自然とアクセシビリティ対応をすることができます。
aria-expanded、aria-hiddenのステートはJavaScriptで変更しますが、
trueとfalseを切り替えるだけなので難しくありません。
時間が無いから実装が難しいと言ってしまいがちですが、普段マークアップしていることと工数は変わらなかったりするので、
今回のように少しインプットするだけで次回からできることも増えていきます。
みんなで少しずつ知識をつけて、共有しあえるといいですね。