Zenn
Open4

リンクでもボタンでもないけどフォーカス可能である必要がある要素

HTML
アクセシビリティ
ゆうてんゆうてん

インタラクティブ要素を内包しないスクロール可能なコンテナ

.scrollable {
  overflow: scroll; // or auto
}

<sction class="scrollable" tabindex="0">
  ...
</section>
  • フォーカスが当たらないとキーボードでスクロール操作ができない
    • ブラウザのバグ？もしくは仕様として定義されていない？
    • Firefoxはフォーカスが当たらなくても操作可能
  • スクリーンリーダーやカーソルブラウジングだけでいうと必要ない
ゆうてんゆうてん

モーダルダイアログウィジェット

  • ダイアログ内にインタラクティブ要素がない場合は絶対必要
    • 基本的に「閉じる」ボタンを用意するのでインタラクティブ要素がないことはほとんどないはず
  • インタラクティブ要素があっても、そこにフォーカス移動してしまうと
    • フォーカスの始点がまずい
    • ダイアログの全体が把握しにくい
  • ダイアログにフォーカスを移動させて、ダイアログの見出しを aria-labelledby で紐付けると美味い
<!-- 開いた際にちゃんとdialog要素にフォーカスがあたる -->
<dialog aria-modal="true" tabindex="0" aria-labelledby="modal-dialog-label">
  <h2 id="modal-dialog-label">ダイアログ</h2>
  ...
  <!-- dialog要素にtabindexがないとイキナリここにフォーカスされてしまう場合がある -->
  <button type="button">閉じる</button>
</dialog>