WAI-ARIA是一个可访问的富Internet应用程序套件，它定义了一种使残障人士更容易访问Web内容和Web应用程序的方法。它特别有助于使用AJAX，HTML，JavaScript和相关技术开发的动态内容和高级用户界面控件。
如果卡片也具有某种“状态”，我正在努力理解哪些内容应该属于标题。 这种情况发生在带有生成
我正在做的在线练习给出了构建时间线和有序列表的解决方案。 我使用描述列表构建了时间线，因为我认为麻木会看起来很奇怪......
我正在使用 WordPress 的主题生成器，并且我创建了一些面板，每个面板中都包含图像和一些文本。但是，使用主题的构建器工具不允许我将 aria 标签添加到 i...
我正在努力为网站添加可访问性。 现在我知道 aria-labels、aria-labelledby 等旨在为交互类型的元素提供可访问的名称，正如本节中明确提到的......
我使用 Unicode 星号显示产品评级。 iOS VoiceOver 无法正确朗读此内容，因此我想我应该在跨度上使用 aria-label 来告诉屏幕阅读器它的含义。 我使用 Unicode 星号显示产品评级。 iOS VoiceOver 无法正确朗读此内容，因此我想在跨度上使用 aria-label 来告诉屏幕阅读器它的含义。 <span aria-label="4.0 stars out of 5, 123 ratings">★★★★☆ 4.0 (123)</span> 它不起作用。 iOS VoiceOver 完全忽略我的 aria-label。 我做错了什么？我该如何解决这个问题？ 如果您放置的元素没有任何语义，则某些辅助技术有时会忽略 aria-label。 A 没有语义意义。如果您添加适合您的星星的 role，那么应该可以正确读取。 引用mdn web doc的aria-label文章： 并非所有元素都可以被赋予可访问的名称。 aria-label 和 aria-labelledby 都不应与非交互式元素或内联结构角色（例如代码、术语或强调）一起使用，也不应与语义不会映射到辅助功能 API 的角色一起使用，包括presentation、none 和hidden。 aria-label 属性仅适用于交互元素。 这就是为什么aria-label对<span>元素没有影响：<span>是一个没有语义的非交互式元素。 但是您可以这样做：提供两个<span>，每个表达相同的信息，但针对不同的“目标群体”： One <span> 是视觉无屏幕阅读器版本；属性 aria-hidden="true" 将确保它不会成为 辅助功能树 的一部分，因此屏幕阅读器不会将其传达给用户。 其中一个<span>是可访问的屏幕阅读器版本：CSS样式负责视觉上隐藏它。 重用Bootstrap 5的.visually-hiddenCSS类，你的示例可以像这样重写： .visually-hidden { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0,0,0,0) !important; white-space: nowrap !important; border: 0 !important; } <span aria-hidden="true">★★★★☆ 4.0 (123)</span> <span class="visually-hidden">4.0 stars out of 5, 123 ratings</span> 在视觉上，这将仅呈现“4个黑色Unicode星，1个白色Unicode星，4.0，以及括号中的123”。 对于屏幕阅读器，这将仅呈现“4.0颗星（满分5分，123个评分）”。 一种方法是添加 role=img <span aria-label="4.0 stars out of 5, 123 ratings" role="img">★★★★☆ 4.0 (123)</span> 关于在跨度中使用角色以便能够通过 VoiceOver 宣布 aria-label，我会使用 role=meter 检查Developer Mozzila中的选项 就您而言： 星级范围从 0 到 5。 使用 role=meter 将使 aria-label 能够由 AT 公布。 并且您可以获得“aria-valuetext”来帮助公告实施 <span role="meter" aria-valuemin="0" aria-valuemax="5" aria-valuenow="4" aria-valuetext="4 stars our of 5" aria-label="on total 123 ratings"> ★★★★☆ 4.0 (123) </span> 这是在不使用 aria-valuetext 属性的情况下显示的旁白字幕 这里使用 aria-valuetext 属性
在我的应用程序中，我有一个文本输入来获取金额值。然而，美元符号是作为图像给出的。因此，文本框中不会出现美元。现在，当用户选择此文本框时，我怎样才能...
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
我从辅助功能专家那里得到反馈，称我在地标区域上使用选项卡索引会让屏幕阅读器用户感到恼火。我添加了选项卡索引，以便用户可以使用跳过链接...
例如，直到 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。 我怎样才能使这个元素更容易访问？ 我实际上是要求进行测试，但我也想让桌子变得更多
我正在页面中的某个部分使用区域角色。 它通过 aria 标签进行了描述，说明了该部分的作用。 我正在编写单元测试以确保该部分存在，如codesandbox中所示。
假设我有以下代码： 你叫什么名字？* 请写下您的全名（... 假设我有以下代码： <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
我的 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-expanded="active" //用JS切换 aria-controls=“菜单” aria-label="打开菜单" ...
我的页面上有如下纯文本输入： 验证码 我的页面上有如下纯文本输入： <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" 告诉
我有关于咏叹调角色列表的问题。选项卡元素是选项卡列表中唯一允许的元素。这是一个 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 上的讨论会启发您找到一些解决方法。
想象一个导航元素，它不是网站上的主要导航，而是将您导航到网站上某个区域的多个页面。这些页面按类别分组。 每...