content-visibility: auto のアクセシビリティツリーについて

概要

　MDNの記述とChrome・Firefoxの実装が違う。

説明

　MDNによると以下のようになっています。

オフスクリーンコンテンツのスタイルはレンダリングされないので、display: none や visibility: hidden で意図的に非表示にした要素はアクセシビリティツリーに現れます。 要素をアクセシビリティツリーに現れたくない場合は、 aria-hidden="true" を使用してください。
content-visibility - CSS: カスケーディングスタイルシート | MDN

(英語版)

Since styles for off-screen content are not rendered, elements intentionally hidden with display: none or visibility: hidden will still appear in the accessibility tree. If you don't want an element to appear in the accessibility tree, use aria-hidden="true".

　最初に読んだときは、『display: none や visibility: hidden で意図的に非表示にした要素はアクセシビリティツリーに現れる』という意味かと読んで、そんなわけないじゃん！となってました。
　MDNのIssueにも同様の内容がありました。

　つまり、content-visibility: autoでオフスクリーンとなっている場合、レンダリングされないから、display: noneやvisibility: hiddenを含めたCSSが適用されずアクセシビリティツリーから除去されない、という意味なのだそうです。（わかりづらい……）

現実

除去されてるじゃん……

.auto {
    content-visibility: auto;
}

.hidden {
    visibility: hidden;
}

.none {
    display: none;
}

<div class="auto">content-visibility: auto</div>
<div class="hidden auto">visibility: hidden</div>
<div class="none auto">display: none</div>
<div>display: block</div>

document.querySelectorAll('.auto').forEach(x => x.addEventListener("contentvisibilityautostatechange", console.log));

See the Pen https://github.com/mdn/content/issues/37894 by lhankor_mhy (@lhankor_mhy) on CodePen.

補足

　Chrome 133、Firefox 135 で確認。

　なお、仕様でどうなっているのかは確認未了です。