如何在 puppeteer 中正确使用 aria 选择器定义列表
How to properly use aria selectors for definition lists in puppeteer
我正在使用 puppeteer 编写一些 UI 功能测试。发现后"Puppetaria" article, I decided that whenever it's possible, I want to use aria selectors. This has been working OK in many cases, but I'm struggling to figure out how to properly do this using a <dl/> definition list。我正在使用 <dl/> 来显示有关对象的详细信息，希望它是一种可访问的呈现方式。例如：
<dl>
<dt>ID</dt>
<dd>6234</dd>
<dt>Name</dt>
<dd>Yo Mama</dd>
</dl>
语义上，<dt/> 元素 label <dd/>。但是，当我使用人偶选择器 aria/ID 时，我返回 nothing 并且等待选择器超时。
我确实看到，如果我 明确地 描述一个元素标记另一个元素：
<dl>
<dt id="id-label">ID</dt>
<dd aria-labelledby="id-label">6234</dd>
</dl>
...然后 aria/ID 选择器起作用。
我假设 dt 和 dd 在没有显式注释的情况下在语义上对齐，我是否做错了可访问性？我是否错误地使用了 Puppeteer？或者这是 Chrome 的辅助功能树的错误？
定义列表在可访问性方面有点糟糕。在您的示例中，您有两个术语和两个定义。当您使用屏幕 reader 浏览列表时，某些屏幕 reader 会说该列表有 2 个项目，有些会说它有 4 个项目，有些会说没有列表。
从技术上讲，<dl> 没有 list 角色 by default 所以屏幕 reader 说没有列表是正确的。
我没有使用过 puppeteer，但据我了解，aria selector is looking for the accessible name. The accessible name calculation 遵循一套规则（本质上是一个大的 if-then-else 语句）。 <dt> 和 <dd> 元素没有可访问的名称，除非您使用 aria-label 或 aria-labelledby。它们不像 <button> 元素，其中按钮可以从按钮的“内容”（<button> 和 </button> 之间的文本）获取其可访问的名称，步骤 2.F 在计算中。因此 <dt> 和 </dt> 之间的文本是 而不是 可访问的名称，因此不会在 puppeteer aria 选择器中返回。
我正在使用 puppeteer 编写一些 UI 功能测试。发现后"Puppetaria" article, I decided that whenever it's possible, I want to use aria selectors. This has been working OK in many cases, but I'm struggling to figure out how to properly do this using a <dl/> definition list。我正在使用 <dl/> 来显示有关对象的详细信息，希望它是一种可访问的呈现方式。例如：
<dl>
<dt>ID</dt>
<dd>6234</dd>
<dt>Name</dt>
<dd>Yo Mama</dd>
</dl>
语义上，<dt/> 元素 label <dd/>。但是，当我使用人偶选择器 aria/ID 时，我返回 nothing 并且等待选择器超时。
我确实看到，如果我 明确地 描述一个元素标记另一个元素：
<dl>
<dt id="id-label">ID</dt>
<dd aria-labelledby="id-label">6234</dd>
</dl>
...然后 aria/ID 选择器起作用。
我假设 dt 和 dd 在没有显式注释的情况下在语义上对齐，我是否做错了可访问性？我是否错误地使用了 Puppeteer？或者这是 Chrome 的辅助功能树的错误？
定义列表在可访问性方面有点糟糕。在您的示例中，您有两个术语和两个定义。当您使用屏幕 reader 浏览列表时，某些屏幕 reader 会说该列表有 2 个项目，有些会说它有 4 个项目，有些会说没有列表。
从技术上讲，<dl> 没有 list 角色 by default 所以屏幕 reader 说没有列表是正确的。
我没有使用过 puppeteer，但据我了解，aria selector is looking for the accessible name. The accessible name calculation 遵循一套规则（本质上是一个大的 if-then-else 语句）。 <dt> 和 <dd> 元素没有可访问的名称，除非您使用 aria-label 或 aria-labelledby。它们不像 <button> 元素，其中按钮可以从按钮的“内容”（<button> 和 </button> 之间的文本）获取其可访问的名称，步骤 2.F 在计算中。因此 <dt> 和 </dt> 之间的文本是 而不是 可访问的名称，因此不会在 puppeteer aria 选择器中返回。