我正在使用puppeteer编写一些UI功能测试。在发现"Puppetaria"文章后，我决定只要有可能，我就想使用咏叹调选择器。这在许多情况下一直工作正常，但我正在努力弄清楚如何使用<dl/>定义列表正确执行此操作。我正在使用<dl/>来显示有关对象的详细信息，希望这是一种可访问的呈现方式。例如：
<dl>
<dt>ID</dt>
<dd>6234</dd>
<dt>Name</dt>
<dd>Yo Mama</dd>
</dl>
似乎在语义上，<dt/>元素标记了<dd/>。但是，当我使用木偶选择器时aria/ID我什么也没得到，并且等待选择器超时。
如果我明确描述一个元素标记另一个元素，我确实看到：
<dl>
<dt id="id-label">ID</dt>
<dd aria-labelledby="id-label">6234</dd>
</dl>
。然后aria/ID选择器工作。
我是否做错了可访问性，假设dt和dd在没有显式注释的情况下在语义上对齐？我是否错误地使用木偶师？或者这是Chrome可访问性树的错误？
定义列出了可访问性方面的一种糟糕。 在您的示例中，您有两个术语和两个定义。当您使用屏幕阅读器浏览列表时，有些屏幕阅读器会说该列表有 2 个项目，有些会说它有 4 个项目，有些会说没有列表。
从技术上讲，默认情况下，<dl>没有list角色，因此说没有列表的屏幕阅读器是正确的。
我没有使用木偶师，但据我了解，咏叹调选择器正在寻找可访问的名称。 可访问名称计算遵循一组规则(本质上是一个大的 if-then-else 语句)。<dt>和<dd>元素没有可访问的名称，除非您使用aria-label或aria-labelledby。 它们不像<button>元素，其中按钮可以从按钮的"内容"(<button>和</button>之间的文本)中获取其可访问的名称，计算中的步骤 2.F。 因此，<dt>和</dt>之间的文本不是可访问的名称，因此不会在木偶咏叹调选择器中返回。