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

投稿: 2023年6月11日

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

1572512 - Many implicit and explicit ARIA roles are not recognized(bugzilla.mozilla.org)

次の 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"