Firefox 114 でアクセシビリティパネルのロール表示が内部値から WAI-ARIA の値に変更

6月6日に公開された Firefox 114 で、DevTools のアクセシビリティパネルの表示が改善されました。

次の HTML を DevTools で表示した場合、

<body>
	<header>
		<h1>page title</h1>
	</header>
	<main>
		<section>
			<h2>section</h2>
		</section>
		<article>
			<h2>article</h2>
		</article>
	</main>
</body>

Firefox 113 までは以下のように Gecko 独自の内部ロールを表示しており、これは Web 開発者にとって分かりにくいものでした。

  • <header>role: "landmark"
  • <main>role: "landmark"
  • <section>role: "section"
  • <article>role: "article"
サムネイル画像
Firefox 113 のアクセシビリティパネルオリジナル画像

Firefox 114 では WAI-ARIA と同じ値が表示されるようになり、分かりやすくなりました。

  • <header>role: "banner"
  • <main>role: "main"
  • <section>role: "generic"
  • <article>role: "article"
サムネイル画像
Firefox 114 のアクセシビリティパネルオリジナル画像