サブヘッダー (または必要に応じてグループ セパレーター/折りたたみ可能なヘッダー) を持つアクセス可能なアコーディオン/リストを作成する最善の方法を決定しようとしています。
説明のために、これはデフォルトのものが（概略的に）どのように見えるかです：
一部の項目はクリック可能 (背景色の変更とカーソルの変更によってヒントを提供) とそうでないもの (「List item 13」など) があります。
一部 (またはすべて) のサブヘッダーは折りたたむことができます (いくつかの追加のヒントが後で追加されます)。
現在、構造はいくつかの可能な方法で実装できます。
オプション 1. 標準とアクセシビリティで地獄へ
<ul>
<div class="header"><a href="...">Header 1</div>
<li><a href="...">List item 11</a></li>
<li><a href="...">List item 12</a></li>
<li><span>List item 13</span></li>
<div class="header"><a href="...">Header 2</div>
<li><a href="...">List item 21</a></li>
<li><span>List item 22</span></li>
</ul>
これは機能します。アクセスできず、HTML 検証に合格しませんが、機能します。
オプション 2. まあ、少なくともそれはバリデーターを通過します
<ul>
<li class="header"><a href="...">Header 1</a></li>
<li><a href="...">List item 11</a></li>
<li><a href="...">List item 12</a></li>
<li><span>List item 13</span></li>
<li class="header"><a href="...">Header 2</a></li>
<li><a href="...">List item 21</a></li>
<li><span>List item 22</span></li>
</ul>
これは検証に合格し、ある程度アクセス可能ですが、(スクリーン リーダーに関する限り) ヘッダーと通常のクリック可能なリスト項目を区別することはできません。
オプション 3.TL;DR
<ul>
<li>
<a class="header" href="...">Header 1</a>
<ul>
<li><a href="...">List item 11</a></li>
<li><a href="...">List item 12</a></li>
</ul>
</li>
<li>
<a class="header" href="...">Header 2</a>
<ul>
<li><a href="javascript:;">List item 21</a></li>
<li><span>List item 22</span></li>
</ul>
</li>
</ul>
これは、またはそれのいくつかのより考え抜かれたバリエーションのようです. 外側または内側の箇条書きがスクリーン リーダーによって適切に読み取られ、検証に合格する必要があると想定しているため、アクセス可能です。
コーディングして維持するには、もう少し PITA が必要です。JS と CSS の両方の観点から、特に拡張とカスタマイズを目的としたプラグインの場合。
したがって、問題は、上記のどれがより良いかということです。あるいは、最終的なアコーディオン/リストの実装は何でしょうか? （私の経験からすると、これは夢物語かもしれません）