wai-aria 相关问题

如何让屏幕阅读器在宣布文本框的价值之前先宣布美元价值

在我的应用程序中，我有一个文本输入来获取金额值。然而，美元符号是作为图像给出的。因此，文本框中不会出现美元。现在，当用户选择此文本框时，我怎样才能...

Chakra ui typescript 强制图标按钮的 aria-label - 如何关闭

所以我有一个 Chakra UI 图标按钮 所以我有一个 Chakra UI 图标按钮 <IconButton aria-label="Left Arrow" 我想删除 aria 标签 - 为什么我要这样做？因为 IconButton 位于树的 aria-hidden 部分内，因此标签是多余的。 但是如果我删除它，我会收到以下打字稿投诉 ../../node_modules/@chakra-ui/button/dist/icon-button.d.ts:23:5 web:tsc: 23 "aria-label": string; web:tsc: ~~~~~~~~~~~~ web:tsc: '"aria-label"' is declared here. 如何制作脉轮图标按钮而不给它不必要的咏叹调标签。 出于可访问性目的，aria-label是开发人员应该使用的重要属性。根据 ChakraUI 官方文档，aria-label 是强制性道具，您必须通过它。 文档：https://v2.chakra-ui.com/docs/components/icon-button#usage

具有里程碑意义的div的tabindex，对还是错？

我从辅助功能专家那里得到反馈，称我在地标区域上使用选项卡索引会让屏幕阅读器用户感到恼火。我添加了选项卡索引，以便用户可以使用跳过链接...

我们应该如何使用最新的HTML标签辅助功能呢？

例如，直到 2023 年末，大多数浏览器才完全支持 标签。 所以我在等待更好的可用性和只是做之间保持平衡： ... 例如，<search>标签直到 2023 年末才在大多数浏览器上得到全面支持。 所以我在等待更好的可用性和只是做之间保持平衡： <div role="search"> ...search inputs... </div> 但我认为我们必须推广新的专用地标。 现代浏览器对未知标签非常宽容，因此在尚未实现的浏览器上使用 <search> 不会破坏任何内容。然而，它作为一个可访问的地标是没有用的。 我想过两种折衷的解决方案，但它们显然是多余的： <search> <div role="search"> ...search inputs... </div> </search> 或 <search role="search"> ...search inputs... </search> 就我而言，我需要一个相关的地标，因为我没有使用 <input type="search">，而是使用 <select>，这对于 <search> 标签规格来说非常好。 对此你有何看法？ <search role="search"> 是最好的方法。 一般来说，创建有弹性、面向未来的网站的最佳方法是基于当前规范进行工作，并使用 polyfills 来弥补浏览器支持的缺乏、不一致或浏览器错误。 这就是第一个 HTML 5 元素出现时的方法。 它允许逐渐减少并最终删除填充，同时具有相当干净的代码。 谈到角色时，只需添加（根据标准）冗余角色属性即可完成polyfill。 <search>元素没有定义任何浏览器行为，因此该属性就足够了。 从其他环境中学习： <label>Registration number <input type="text" inputmode="numeric" pattern="/d+">` </label> 是在触摸屏上触发数字键盘的最佳实践。 inputmode 还没有支持，所以模式解决了它。您仍然会包含它，因为它已经标准化了。这样，网站以后就能正常运行了。 <search> <div role="search"> 不是一种选择，因为它可能会添加 2 个搜索地标，一个在另一个内。它也不符合标准。

如何为 X/Y 文本添加辅助功能？

我有一个表，其中一列包含有关部署的信息：X/Y。 我怎样才能使这个元素更容易访问？ 我实际上是要求进行测试，但我也想让桌子变得更多

通过描述的角色区域获取不适用于反应测试库

我正在页面中的某个部分使用区域角色。 它通过 aria 标签进行了描述，说明了该部分的作用。 我正在编写单元测试以确保该部分存在，如codesandbox中所示。

aria-desiredby 的正确用法是什么？

假设我有以下代码： 你叫什么名字？* 请写下您的全名（... 假设我有以下代码： <div> <label for="name-input">What is your name?*</label> <p id="description">Please write down your full name (first and last)</p> <input id="name-input" type="text" name="name" aria-describedby="description"> </div> 在我的字段容器内，我有一个标签和描述。紧接着，我就有了 <input> 元素，其中 aria-describedby 引用了描述。这是此标签的正确用法吗？我在一些地方读到，aria-describedby最适合用于距离较远或位于输入元素之后的描述。有什么建议或改进吗？ 您在这里描述的本质上是上下文帮助信息，或者类似于工具提示的内容。 我认为您的示例的编码方式没有任何问题。我在 NVDA/Chrome 上测试了它，效果很好。您可以采取的另一种方法是将该信息作为子元素包含在 <label> 中，但您的方法也同样有效。 如果您不确定正确的用法，最好查阅规范： https://www.w3.org/TR/wai-aria-1.2/#aria-desiredby

如何使用 wai-aria 标签使相关复选框可访问？

我的 DOM 中有以下代码： 你懂什么语言？ ... 我的 DOM 中有以下代码： <fieldset> <legend id="language-legend">What languages do you know?</legend> <p id="language-description"> You can select one or more. </p> <div class="form-check"> <input name="language" class="form-check-input" type="checkbox" value="python" id="language-checkbox-1" aria-labelledby="label-1 language-legend" aria-describedby="language-description"> <label id="label-1" class="form-check-label" for="language-checkbox-1"> Python </label> </div> <div class="form-check"> <input name="language" class="form-check-input" type="checkbox" value="javascript" id="language-checkbox-2" aria-labelledby="label-2 language-legend" aria-describedby="language-description"> <label id="label-2" class="form-check-label" for="language-checkbox-2"> JavaScript </label> </div> <div class="form-check"> <input name="language" class="form-check-input" type="checkbox" value="c++" id="language-checkbox-3" aria-labelledby="label-3 language-legend" aria-describedby="language-description"> <label id="label-3" class="form-check-label" for="language-checkbox-3"> C++ </label> </div> </fieldset> 我正在做以下事情： 使用 <fieldset> 和 <legend> 对相关复选框进行分组 每个复选框都有相同的name，即name="language" 每个复选框都由 <legend> 和使用 <label> 标签的实际 aria-labelledby 元素进行标记。 每个复选框均由 <p> 使用 aria-describedby 标签进行描述。 我是否正确使用了所有 aria 标签？此表单字段是否完全可访问？ 编辑 Gemini 建议重写以下内容： <fieldset aria-describedby="language-description">  <legend>What languages do you know?</legend> <p id="language-description"> You can select one or more. </p> <div class="form-check"> <input name="language" class="form-check-input" type="checkbox" value="python" id="language-checkbox-1"> <label class="form-check-label" for="language-checkbox-1"> Python </label> </div> <div class="form-check"> <input name="language" class="form-check-input" type="checkbox" value="javascript" id="language-checkbox-2"> <label class="form-check-label" for="language-checkbox-2"> JavaScript </label> </div> <div class="form-check"> <input name="language" class="form-check-input" type="checkbox" value="c++" id="language-checkbox-3"> <label class="form-check-label" for="language-checkbox-3"> C++ </label> </div> </fieldset> 这实际上更好吗？ 唯一可以改变的是aria-labelledby aria-labelledby 字段中的 input 标签应引用 id 的 label，而不是 id 字段本身的 input。另外，除非您引用它，否则您不需要段落标签 id <p>。 使用字段集和图例元素对相关复选框进行分组真是太好了。这是增强表单语义结构和提高可访问性的好方法。 示例： <fieldset> <legend id="language-label">What languages do you know?</legend> <p>You can select one or more.</p> <div class="form-check"> <input name="language" class="form-check-input" type="checkbox" value="python" id="language-checkbox-1" aria-labelledby="language-label language-label-1" aria-describedby="language-description"> <label class="form-check-label" id="language-label-1" for="language-checkbox-1"> Python </label> </div> <div class="form-check"> <input name="language" class="form-check-input" type="checkbox" value="javascript" id="language-checkbox-2" aria-labelledby="language-label language-label-2" aria-describedby="language-description"> <label class="form-check-label" id="language-label-2" for="language-checkbox-2"> JavaScript </label> </div> <div class="form-check"> <input name="language" class="form-check-input" type="checkbox" value="c++" id="language-checkbox-3" aria-labelledby="language-label language-label-3" aria-describedby="language-description"> <label class="form-check-label" id="language-label-3" for="language-checkbox-3"> C++ </label> </div> </fieldset>

有没有办法让链接在屏幕阅读器上显示为纯文本，但明显是一个链接？

我们正在努力减少屏幕阅读器在我们的博客文章中读出的冗余链接。目前帖子的标题是可点击的链接，“阅读更多”也是可点击的

正确的 Aria 标签？

我有一个带有图标的按钮，可以打开移动导航。我在按钮上有： :aria-expanded="active" //用JS切换 aria-controls=“菜单” aria-label="打开菜单" ...

将 HTML 文本输入拆分为多个输入，同时保持可访问性

我的页面上有如下纯文本输入： 验证码 我的页面上有如下纯文本输入： <label for="tfa_code">Verification Code</label> <input type="text" name="tfa_code" id="tfa_code"/> <button type="submit">Submit</button> 这很简单，不需要为屏幕阅读器提供特殊的便利。但是，前端脚本可以将其转换为更典型的双因素身份验证条目，其中每个数字都输入到单个文本输入中。像这样的东西： <label for="tfa_code">Verification Code</label> <input type="hidden" name="tfa_code" id="tfa_code"/> <input type="text" id="regcode0" maxlength="1"/> <input type="text" id="regcode1" maxlength="1"/> <input type="text" id="regcode2" maxlength="1"/> <input type="text" id="regcode3" maxlength="1"/> <input type="text" id="regcode4" maxlength="1"/> <input type="text" id="regcode5" maxlength="1"/> <button type="submit">Submit</button> 输入上有 keyup 侦听器，用于在字段之间移动光标并更新隐藏输入的值。 我关心的是如何标记这一点，以便使用屏幕阅读器的用户受益。我的第一个想法是简单地将输入用 <fieldset> 包装在 <legend> 中，并完全删除 <label> 元素。这是否足以将输入识别为单个逻辑组的一部分，向这些用户正确描述其目的，并且不会向他们发送语音提示垃圾邮件？ <fieldset> <legend>Verification Code</legend> <input type="hidden" name="tfa_code" id="tfa_code"/> <input type="text" id="regcode0" maxlength="1"/> <input type="text" id="regcode1" maxlength="1"/> <input type="text" id="regcode2" maxlength="1"/> <input type="text" id="regcode3" maxlength="1"/> <input type="text" id="regcode4" maxlength="1"/> <input type="text" id="regcode5" maxlength="1"/> </fieldset> <button type="submit">Submit</button> 我查看了像 aria-labelledby 这样的属性，但我认为它不合适，因为（我认为）它会导致每次输入获得焦点时读取标签。像 role="group" 这样的东西似乎没有提供除 <fieldset> 元素之外的任何东西。 根据安迪对这个问题的评论，我决定根本不为屏幕阅读器用户分割该字段，从而避免了这个问题。单个字段对于标准浏览器来说是隐藏，而拆分字段对于屏幕阅读器来说是隐藏： <label for="tfa_code">Verification Code</label> <input type="text" name="tfa_code" id="tfa_code" class="visually-hidden" autocomplete="one-time-code"/> <div aria-hidden="true"> <input type="text" id="regcode0" maxlength="1"/> <input type="text" id="regcode1" maxlength="1"/> <input type="text" id="regcode2" maxlength="1"/> <input type="text" id="regcode3" maxlength="1"/> <input type="text" id="regcode4" maxlength="1"/> <input type="text" id="regcode5" maxlength="1"/> </div> <button type="submit">Submit</button> 计划进行测试，以确保视觉上隐藏的输入不会因为自动完成属性而试图抢走标准浏览器的注意力，但到目前为止似乎还不错。

我应该使用 role="button" 作为连接到复选框的标签吗？

MDN 对 ARIA 按钮作用有如下解释： 按钮角色适用于可点击元素，这些元素在被用户激活时会触发响应。添加 role="button" 告诉

对于链接到自身的标题有任何 ARIA 规则吗？

我有“自链接”标题，如下所示： 标题 我认为开发无障碍功能的人

包含选项卡以外的元素的 Aria tablist 角色

我有关于咏叹调角色列表的问题。选项卡元素是选项卡列表中唯一允许的元素。这是一个 DOM 示例。 我有一个关于咏叹调角色的问题tablist。选项卡元素是 tablist 内唯一允许的元素。这是一个 DOM 示例。 <ul role="tablist"> <li> <a role="tab" href="#">My Tab</a> <button class="close">X</button> </li> </ul> 由于 <button> 是一个交互式元素，它将被添加到可访问性树中。规范中规定“允许的辅助功能子角色”是 tab。这也适用于隐含角色吗？如果选项卡角色移至 <li> 那么问题就变得毫无意义了？ 你把矛头指向了 ARIA 的薄弱环节。 正在讨论解决 ARIA 中关闭选项卡等次要操作的问题 关于规范，您的陈述是正确的，但我会稍微改一下： tab 角色 tablist内唯一允许的子角色。 细微差别在于 ARIA 适用于角色，而不是 HTML 元素。您可以将任何 HTML 元素直接放置在选项卡列表下，只要它没有角色（或 role="none"）。同样重要的是，规范中提到了child角色，而不是可访问性树中更深层次的角色。因此，沿着 DOM 向下，下一个角色不是 none 的元素一定是 tab 的元素。 <li> 具有隐式角色 listitem，因此不允许它作为具有角色 tablist 的元素的子元素。您可以删除它的角色<li role="none">，但不建议这样做，它的使用毫无意义。 具有角色 tab 的元素应该是交互式的，因此您不能简单地将其添加到 <li> 元素上而不处理其上的所有交互。 任何交互元素都不能有交互子元素。这给模式带来了问题。 也许 Github 上的讨论会启发您找到一些解决方法。

如何用部分语义标记导航，其中部分标题不可单击

想象一个导航元素，它不是网站上的主要导航，而是将您导航到网站上某个区域的多个页面。这些页面按类别分组。 每...

转换只读字段以实现辅助功能

我正在转换应用程序以符合 W3 辅助功能指南。 我需要让屏幕阅读器一起读取标题和值，仅使用 标签。 这个网站... 我正在转换应用程序以符合 W3 辅助功能指南。 我需要让屏幕阅读器一起读取标题和值，仅使用 <p> 标签。 该网站有多个显示为只读的表单，如果用户希望编辑字段，则必须单击“编辑”按钮以打开模式。 我对只读字段的问题是，该网站的结构是标题显示在左侧，相应的值显示在右侧。像这样的东西： <div class="form-group" id="-serviceName"> <p id="-title" class="col-sm-4 form-control-title">Some text</p> <p id="-value" class="col-sm-8 form-control-static">Some value</p> </div> 最初我使用的是<label>，但是当我打开页面时，我的值不是输入，WAVE 评估工具向我发出警报： “孤立的表单标签：存在表单标签，但未与表单控件正确关联。” <div class="form-group" id="-serviceName"> <label class="col-sm-4 control-label" id="-label">Some text</label> <div class="col-sm-8 col-md-6 col-lg-4"> <p class="form-control-static" id="-value">Some value</p> </div> </div> 我尝试过使用aria-labeledby和aria-describedby，但是使用箭头键，屏幕阅读器始终独立地呈现信息。 首先它显示“一些文本”，然后我必须再次单击箭头键，它显示“一些值”。 我想让屏幕阅读器将两个值一起读取为：“某些文本某些值” 就屏幕阅读器的使用而言，您已有的代码不应该存在重大问题。 他们可以很好地访问键值对，并且它将按顺序读取它们，这将首先读取标题，然后读取值（向下读取时）。 当涉及到WCAG 标准信息和关系时，使用<p>可能不足以解释第二个文本是用户输入，而第一个文本是用户无法更改的静态标签。 可能有几种有效的方法可以解决这个问题。 推荐解决方案 如果这是表单数据，用户可能期望（取决于您的用例）以表单而不是阅读模式进行导航。因此，他们可能会使用 Tab 键从一个表单字段跳转到另一个表单字段。 目前“表单”中没有表单字段。我推荐的解决方案是真正的readonly形式： <form aria-labelledby="form-title"> <h2 id="form-title">Your form data</h2> <p> <label>Some text <input readonly type="text" value="Some value"> </label> </p> <p><button>Edit</button></p> </form> 这也将清楚地传达给任何辅助技术，我们正在处理表单数据，但在当前状态下无法更改。表单必须有一个可访问的名称，这就是为什么我用 aria-labelledby 来指代可见标题。 <label>元素必须与表单输入关联，可以通过for属性或通过包装输入来关联。 替代解决方案 将两篇文章放在一起<p>加强了它们的关系，并且在使用屏幕阅读器阅读时，标题和值之间的停顿更少 <p class="form-group" id="a2ba84-serviceName"> <div id="a2ba84-title" class="col-sm-4 form-control-title">Some text</div> <div id="a2ba84-value" class="col-sm-8 form-control-static">Some value</div> </p> <dl>描述列表旨在形成一组键和值，并且经常在这种情况下使用 <dl> <div class="form-group" id="a2ba84-serviceName"> <dt id="a2ba84-title" class="col-sm-4 form-control-title">Some text</dt> <dd id="a2ba84-value" class="col-sm-8 form-control-static">Some value</dd> </div> </dl> 补充说明 aria-labelledby 和 aria-describedby 不能仅用于任何元素。它们用于具有可访问名称的ARIA 角色，主要是交互式控件、地标和表格元素。

带有动画的无障碍手风琴

我正在尝试使这个可访问的手风琴具有打开关闭淡入/淡出动画，而不是默认的硬打开关闭功能。到目前为止还没有任何运气。 https://www.w3.org/WAI/ARIA/...

为什么剧作家认为 <th> 标签的 ARIA 角色是“cell”？

Playwright 强调使用“面向用户的属性和显式契约，例如 page.getByRole()”来定位页面上的项目。我想在我的页面上找到 th 标签。 Chrome 的 DevTools 有...

使垂直桌子易于使用

我有一些非常基本的数据，如下所示： { “姓名”：“约翰·多伊”， “城市”：“明尼阿波利斯”， “州”：“明尼苏达州”， “国家”：&...

aria 标签应该是唯一的吗？

如果我正在渲染一系列右侧带有编辑/删除图标的记录，这些图标是否应该具有独特的 aria 标签，例如“编辑记录 A”，或者它们是否可以具有通用的 aria-l。 ..