aria-expanded-state-mismatch
aria-expandedは、制御されるコンテンツが表示されているかどうかと一致させることが推奨されます
aria-expandedの値が、aria-controlsで示す要素が表示されているかどうかと食い違う要素を検出し、手動レビューに回します。
適用範囲：ページが表示している、aria-expanded="true"またはaria-expanded="false"を持ち、aria-controlsが同じツリー内の要素を少なくとも1つ示している要素です。次のものは対象外です。
- combobox。その
aria-controlsはポップアップを示しており、ポップアップは閉じている間もページに残されていることが多いためです。 - 要素自身を含む、制御される要素（自身のグループの親を示すツリー項目）。
期待される結果：aria-expandedは、要素が制御するコンテンツが表示されているかどうかを支援技術に伝えます。それがページの表示と逆のことを示していると、スクリーンリーダーのユーザーは、開いているパネルを閉じていると、またはその逆を伝えられます。
aria-expanded="false"で、aria-controlsが示す要素がすべて表示されている場合：cantTell（EXPANDED_FALSE_CONTROLLED_SHOWN）。aria-expanded="true"で、aria-controlsが示す要素がすべて隠れている場合：cantTell（EXPANDED_TRUE_CONTROLLED_HIDDEN）。- それ以外：pass。
要素が隠れているとみなすのは、アクセシビリティツリーの外にある場合です。つまり、要素自身または祖先のdisplay: none、visibility: hidden、hidden、閉じた<details>、content-visibility: hidden、inert、aria-hidden="true"、そしてブラウザーでは、要素自身のボックスが高さまたは幅のない大きさに縮み、overflowが切り取られている場合（height: 0でアニメーションするアコーディオンのパネル）です。ほかの方法（transformや祖先の高さ）で縮められたパネルは表示されているとみなします。また、コントロールが展開するコンテンツは、閉じている間も見えたままの場合があります（line-clampで2行に切り詰めた段落）。そのため、検出結果は確認の依頼になります。
検出結果が報告する内容：
ariaExpanded：属性が示すとおりのtrueまたはfalseです。controlledCount：aria-controlsが示す要素のうち、比較したものの数です。
これらのdata.detailsのフィールドは、検出結果を読み解き、再現するのに役立ちます。reasonCodeと、出力スキーマで安定と明記された一部のフィールドを除き、安定した契約ではありません。マイナーリリースで名前が変わったり、なくなったりすることがあるため、これらに依存した実装はしないでください。
例
<button aria-expanded="false" aria-controls="shipping">Shipping</button><div id="shipping" hidden>Orders ship within two working days.</div>
aria-expanded="false"が示すとおり、パネルは隠れています。
<button aria-expanded="false" aria-controls="shipping">Shipping</button><div id="shipping">Orders ship within two working days.</div>
aria-expanded="false"はスクリーンリーダーにパネルが閉じていると伝えますが、パネルは表示されています。パネルが開いているのか、それともコントロールが見えたままのコンテンツを展開するだけなのかを、人が確認します。
確認方法
このルールが判断できない場合はcantTellを報告し、判断を人に委ねます。ルールが投げかける各質問を、理由コードごとに、答えるための手順とともにここに示します。検出結果にも同じ手順がhowToCheckとして、スキャンの言語で含まれます。出力スキーマを参照してください。
EXPANDED_FALSE_CONTROLLED_SHOWN
- レポートに示されたトグルを見つけてください。折りたたまれていると伝えています。
- トグルが制御するコンテンツを確認し、全体が表示されているか、数行に切り詰められたようなプレビューだけかを確認してください。
- EnterまたはSpaceでトグルを操作し、アクセシビリティペインを確認してください。展開状態は表示内容に従う必要があります。
満たす場合：トグルが折りたたみ状態を伝えている間、コンテンツは折りたたまれているかプレビューだけで、コンテンツが開くと状態が変わります。
満たさない場合：トグルがスクリーンリーダーの利用者に折りたたまれていると伝えている間もコンテンツが完全に表示されているため、WCAG 4.1.2を満たしません。
EXPANDED_TRUE_CONTROLLED_HIDDEN
- レポートに示されたトグルを見つけてください。展開されていると伝えています。
- トグルが制御するコンテンツを探し、アニメーションが終わるのを待ってから、画面上に表示されているか確認してください。
- EnterまたはSpaceでトグルを操作し、アクセシビリティペインで展開状態が表示内容に従っていることを確認してください。
満たす場合：トランジションが終わった後、トグルが展開状態を伝えている間はコンテンツが表示されています。
満たさない場合：トグルがスクリーンリーダーの利用者に展開されていると伝えている間もコンテンツが隠れたままのため、WCAG 4.1.2を満たしません。