HTMLのネイティブダイアログ要素(dialog・popover・details)の使い分けについて実装ガイド。各要素のセマンティクスと役割の違いを解説している。
シェアックリップ
シェアされたアックリップです。
そのほかの #WAI-ARIA ピックアップ
DEV Community
Shadow DOM を使用した Web コンポーネントでスクリーンリーダーが情報を正しく認識しない問題と、その解決方法を技術的に解説。delegatesFocus、ARIA 属性、aria-hidden の活用などの実装パターンを紹介。
Deque
自動化されたインテリジェント・ガイド・テストが、キーボード操作やフォーカス動作など手動では時間を要するテストを自動化。開発者が数秒で結果を確認でき、AIの判定を人間が検証・修正することで、テスト効率を劇的に向上させる。
Qiita
AIエージェントが画面を操作するとき、見た目よりセマンティックな構造が重要。意味を明示するとUIの操作成功率が43%から90%に向上する。
note
ブラウザが DOM から構築するアクセシビリティツリーの仕様と構造。Role・Name・State・Value の計算ルール、OS 別 API への変換、支援技術との連携メカニズムを技術的に解説。
note
noteエディタの見出し画像ボタンのaria-label欠落により、Playwright自動化テストが失敗。同じ欠落がスクリーンリーダーにも影響することを指摘し、位置・サイズで検索する回避策を解説。
DEV Community
React でメールフォームを状態管理(idle、editing、invalid、submitting、success、server error)で構築し、ARIA を用いてアクセシビリティを確保する実装パターン。ユーザーへの段階的情報提供を重視。