amp-lightbox でのアクセシビリティ戦略
はじめに
ちぇーす。
前回の記事で「何かの折に各コンポーネントのアクセシビリティ検証してみようかしらとか考えています」と書いたのでやってみました。
今回は当サイト未対応の amp-lightbox でやってみました。ちょっと使ってみようかなという気持ちはある感じです。
デモ
amp-lightbox a11y test - codepen
スタイル全くあててないのでわかりづらいかもですが、やりたかったのは基本的にはフォーカス管理です。
要件
- ボタンでパネルを開いたらフォーカスがパネル側に移ること
- パネル側で閉じるボタンをクリックしたら元の画面の開くボタンにフォーカスが戻ること
history.pushState()的なやつでブラウザバックでパネルが閉じられること
これが実現できました。
やりかた
1. は
<amp-lightbox id="myLightbox1" layout="nodisplay" on="lightboxOpen:myLightbox1.focus" role="dialog">
の on="lightboxOpen:myLightbox1.focus" で。
2. は
<button on="tap:myLightbox1.close, btnLightbox1.focus">close lightbox 1</button>
の on="tap:myLightbox1.close, btnLightbox1.focus" で。
3. は何もしていません。ビルトインですね。素敵。
おわりに
パネルが開いている時にフォーカス移動をパネル内に収めるのは、フル AMP サイトでは自前スクリプト書けないのでできなさそうですね。ここは残念ですけど、すでに issue は開いてるよう。
[A11Y] amp-lightbox should be a modal dialog · Issue #4892 · ampproject/amphtml
今回はここまで。冒頭で「シリーズ」と書いたので、またいつか別のコンポーネントでも検証してみますね。
それでは、ご確認のほど何卒よろしくお願いいたします。