WAI-ARIA是一个可访问的富Internet应用程序套件，它定义了一种使残障人士更容易访问Web内容和Web应用程序的方法。它特别有助于使用AJAX，HTML，JavaScript和相关技术开发的动态内容和高级用户界面控件。
我正在努力使带有 aria-label 的 div 易于访问。 标题 Lorem ipsum 我正在努力使 div 与 aria-label 易于访问。 <main> <h1>Heading</h1> <input type="text" placeholder="text"> <p>Lorem ipsum dolor sit amet labore culpa! Ipsam.</p> <div role="region" aria-label="content summary"> summary </div> <button>Go back</button> </main> 我尝试了aria-describedby和aria-labelledby，但这些也不起作用。 如果没有 tabindex 属性，<div> 元素本身就不是可聚焦的。这意味着大多数屏幕阅读器（包括 VoiceOver）可能无法导航到它。 以下是如何确保 VoiceOver 读出 div： <div role="region" aria-label="content summary" tabindex="0"> summary </div>
我正在使用 XML 安全的 HTML5，并且想知道记录额外提示/警告/错误框的语义方式（就像技术手册中常见的那样）： 我正在使用 XML 安全的 HTML5，并且想了解记录额外提示/警告/错误框的语义方式（如技术手册中常见的内容）： <div class="info-tip" role="contentinfo"> <p><strong>Tip:</strong> Holding the control key when doing this will make life easier.</p> </div> 除非可能的话我想使用更合适的元素。我什至不确定 contentinfo 是否是一个合适的选择。 添加：我正在寻找 DITA 中 <note> 元素的 HTML5 替代品。 一些背景信息：我将使用样式表（XSLT2 和 CSS）来重新格式化内容以实现多个输出。 在developer.mozilla.org上他们只使用常规的div。 <div class="notecard note" id="sect1"> <p><strong>Note:</strong> This is the content.</p> </div> 他们页面上的示例：<dialog>元素 语义上最接近的似乎是 <details> 元素 - usage
aria-描述的无法通过 VoiceOver 在 Safari 上使用 role="listitem"
我正在尝试使用 role="list" 作为项目的父级和 role="listitem" 来访问列表。我希望每个列表项都在添加中使用 aria-descriptedby 进行描述...
我有以下输入字段，但是当我使用 AX 或 ARC 工具进行测试时，出现以下错误：“通用角色不允许使用 aria-required 属性”。有人可以告诉我这是什么吗
标签到 2023 年末才在大多数浏览器上得到全面支持。 所以我在等待更好的可用性和只是做之间保持平衡： ...搜索... 到 2023 年末，大多数浏览器才完全支持 <search> 标签。 所以我在等待更好的可用性和只是做之间保持平衡： <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只需添加一个冗余（根据标准）role属性即可完成。 <search>元素不定义任何浏览器行为，因此添加role就足够了。 从其他环境中学习： <label>Registration number <input type="text" inputmode="numeric" pattern="/d+">` </label> 是在触摸屏上触发数字键盘的最佳实践。 inputmode 还没有支持，所以模式解决了它。您仍然会包含它，因为它已经标准化了。这样，网站以后就能正常工作了。 <search> <div role="search"> 不是一种选择，因为它可能会添加 2 个搜索地标，一个在另一个内。它也不符合标准。
我正在尝试让屏幕阅读器读取已禁用的数字微调器/文本框的值，以便它们不可编辑。这些盒子的价值在上下文中很重要，但是......
如果卡片也具有某种“状态”，我正在努力理解哪些内容应该属于标题。 这种情况发生在带有生成
我正在做的在线练习给出了构建时间线和有序列表的解决方案。 我使用描述列表构建了时间线，因为我认为麻木会看起来很奇怪......
我正在使用 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>
有没有办法让链接在屏幕阅读器上显示为纯文本，但明显是一个链接？
我们正在努力减少屏幕阅读器在我们的博客文章中读出的冗余链接。目前帖子的标题是可点击的链接，“阅读更多”也是可点击的