WAI-ARIA是一个可访问的富Internet应用程序套件，它定义了一种使残障人士更容易访问Web内容和Web应用程序的方法。它特别有助于使用AJAX，HTML，JavaScript和相关技术开发的动态内容和高级用户界面控件。
Google 审核在光滑的滑块代码中给出了可访问性错误 辅助技术（例如屏幕阅读器）无法解释具有无效值的 ARIA 属性 Google 审核在光滑的滑块代码中给出了可访问性错误 屏幕阅读器等辅助技术无法解释具有无效值的 ARIA 属性 <div class="slider-videos slick-slide slick-current slick-active" data-slick-index="0" aria-hidden="false" tabindex="-1" role="listitem" aria-labelledby="slick-slide40" style="width: 412px;"> <li class="slick-active" aria-hidden="false" aria-controls="navigation20" id="slick-slide20" aria-selected="true"><button type="button"data-role="none" tabindex="0">1</button></li> 我该如何修复它？我没有这些咏叹调和角色的信息 显然，目前无法手动更改它 - 您可以在 GitHub 上看到此讨论。 我在 Slip Carousel 中添加了这行代码，从而改进了可访问性： accessibility: false 希望能帮到你。 我遇到了 <input type="number"> 的问题，它是一个组合框 - 可能值的列表出现在输入下方，当用户在输入中键入时 - 选项会被过滤。 我想问题是类型是number但值是字符串......或者简单的数字类型输入与此类组合框不兼容。 我通过将其更改为 type="text" 并添加模式 + 输入模式解决了这个问题 - 这样在移动设备上用户仍然可以看到数字键盘： <input type="text" pattern="[0-9]*" inputmode="numeric"> 错误不再出现。 Google PageSpeed Insights 中出现错误 [aria-*] 属性与角色不匹配 每个 ARIA 角色都支持 aria-* 属性的特定子集。不匹配这些会使 aria-* 属性无效。了解如何将 ARIA 属性与其角色相匹配。 失败的元素 广告
https://codepen.io/hasan-uzzaman-sheikh/pen/xxmVqWO 你好呀， 我复制了上面的codepen ...
508 标准，第 1194.22 (a) 节规定： 每个非文本的等效文本 应提供元素（例如，通过 “alt”、“longdesc”或在元素中 内容）。 对于搜索框，使用...
我是 WAI-ARIA 的新手。我想知道如何根据现有角色创建自定义角色。 例如，我想从 aria 按钮角色创建自定义按钮角色。如果有的话那就太好了...
如果 aria-label 的内容发生变化，是否可以让屏幕阅读器重新读取 select 元素？ 我做了一个简单的片段，我知道我没有遵循大多数咏叹调约定，来展示我的内容
我有以下 HTML 代码： 搜索邮政编码/城市 ... 我有以下 HTML 代码： <div class="form-row"> <label for="zip-city">Search for ZIP/City</label> <div class="input-wrapper"> <input aria-autocomplete="list" id="zip-city" type="text" name="zip_city" aria-expanded="true" aria-owns="select-city-list"> <ul id="select-city-list" role="listbox" aria-hidden="true" class="city-selector" style="display: block; opacity: 1;"> <li role="option" id="zip_112" data-uid="112" tabindex="-1">9999 myCity</li> </ul> </div> </div> 当用户在输入字段中输入内容时，我正在执行 ajax 请求并用结果填充 <ul id="select-city-list" […] >。然后我在输入字段上设置属性 aria-expanded 以指示连接列表已展开。 但是，当我使用 ax DevTools 检查器时，它告诉我ARIA attribute is not allowed: aria-expanded="true"。 我不知道我做错了什么。输入字段用作列表的触发器，因此我无法将其设置为另一个元素。 我尝试使用 aria-controls 而不是 aria-owns，但没有成功。 有什么提示吗？ 如果它有一个下拉列表，听起来就像一个组合框。将 role="combobox" 添加到 将消除 Axe 警告。 aria-expanded的规范在“角色中使用”下有一个属性有效的元素类型列表。 “组合框”就是其中之一。默认 元素具有“文本框”角色，该角色不位于有效角色列表中。 如果您使用 role="combobox" 那么您应该查看创作实践指南 (apg) 中的 组合框设计模式中的其他建议属性。
如何在浏览器中的 javascript 中获取元素的可访问名称？
可访问的名称计算很复杂，HTML 有 17 个子情况。如何在浏览器中的 javascript 中获取元素的可访问名称？
我正在寻找一种方法，使用语音辅助功能从导航链接跳转到我连接的链接页面的内部部分。 例如： 我的网站上有一个链接列表...
如何在 iPhone 上使用 VoiceOver 制作<div>一组项目？
我正在尝试使用 React 创建一个可访问的阅读应用程序。我的目标是让用户在阅读时能够轻松地在章节之间导航。为了实现这一目标，我使用了 我正在尝试使用 React 创建一个可访问的阅读应用程序。我的目标是让用户在阅读时能够轻松地在章节之间导航。为了实现这一点，我使用 元素来包装文本内容。 像这样： <div> <button>previous</button> <div aria-label='content'> <p>paragraph 1</p> <p>paragraph 2</p> ... (many <p> tags) </div> <button>next</button> <div> 在 Mac 上使用 VoiceOver 功能时，我可以在选择“上一个”按钮时选择 元素，然后按“→”导航到 div，然后使用“Caps Lock + Shift + ↓”进入组。但是，在 iPhone 浏览器上执行相同操作时，选择仅选择 标签。 我尝试调整 aria 属性和角色属性，但无法复制我在 Mac 上经历的行为。 有没有办法修改 iPhone 上 元素的行为以匹配我在 Mac 上观察到的行为？ 在 Mac chrome 上 在 iPhone Safari 上 听起来您正在努力使您的阅读应用程序可以使用 React 进行访问，并且您在不同平台上面临着 VoiceOver 行为的一些问题。 VoiceOver 交互有时会在不同设备和浏览器之间表现不同。以下是一些注意事项和潜在的解决方案，可帮助您实现一致的可访问性行为： Using Semantic HTML Elements: Instead of using a <div> element to wrap the content, consider using semantic HTML elements that are specifically designed for grouping content. For example, you could use an <article> element for chapters and a <section> element for grouping paragraphs within each chapter. This can help screen readers interpret the content more accurately. <article> <button>previous</button> <section aria-label='content'> <p>paragraph 1</p> <p>paragraph 2</p> {/* ... */} </section> <button>next</button> </article> 使用角色=“区域”： 您可以尝试将 role="region" 添加到包装元素中。这一角色为辅助技术提供了一个额外的里程碑，以了解内容是一个独特的区域。 <div role="region" aria-label="Chapter"> {/* ... */} </div> Testing and Debugging: VoiceOver behavior can vary between devices and browsers. It's important to test your application on various platforms and browsers to identify inconsistencies. Use the Accessibility Inspector in browser developer tools to inspect the accessibility roles and properties being applied. Mobile-specific Behavior: VoiceOver behavior can be different on mobile devices due to the nature of touch interaction. Users might navigate content using swipe gestures instead of arrow keys. Consider providing clear instructions to users on how to navigate the content using VoiceOver on mobile devices. User Feedback and Testing: The best way to ensure that your application is accessible across various devices and browsers is to involve users with disabilities in the testing process. They can provide valuable feedback and insights into how your application works with different assistive technologies. 请记住，虽然追求一致性很重要，但您还应该优先考虑为残障用户创造清晰且用户友好的体验。如果您遇到持续存在的问题，请联系网络可访问性论坛或专家可能会提供有关如何处理特定情况的进一步指导。
我的公司正在做一些 ADA 一致性修订。我需要在用户与其交互时读取按钮文本。 aria-label 会发生这种情况吗？或者..你该怎么做？
我正在尝试让这段代码与 JAWS 屏幕阅读器一起正常工作。它在一个 CSHTML 文件中，我没有编写代码，我只是想修复它（我是该项目的 UI 设计师） 我正在尝试让这段代码与 JAWS 屏幕阅读器一起正常工作。它在一个 CSHTML 文件中，我没有编写代码，我只是想修复它（我是该项目的 UI 设计师） <div id="[email protected]"> <button class="btn btn-primary btnApprove btntooltipA" id="[email protected]" enttyddata="@i.EntryId" data-toggle="tooltip" data-original-title="Approve" value="@i.EntryId" onclick="CheckInHomeValidation(@i.EntryId);" aria-label="Approve">A</button> @if (i.Flags != Convert.ToString((int)clsEnum.enumEntryFlags.Compensated_Debited)) { <button class="btn btn-danger btnReject btntooltipR" id="[email protected]" data-toggle="tooltip" data-original-title="Reject" onclick="rejectPunchfuntion(@i.EntryId)" value="@i.EntryId" aria-label="Reject">R</button> } </div> 如果我使用 tab 键导航，按钮将在 JAWS 中读出为“批准按钮批准拒绝按钮拒绝” 如果我使用“b”键，这些按钮将在 JAWS 中读出为“批准按钮”和“拒绝按钮”，这是所需的结果。 我试着放一个 但它除了把我的按钮堆叠在屏幕上之外什么也没做。 以上代码的输出将在 Chrome 开发工具中生成此代码（感谢@slugolicious 的建议）： <div id="dvbtn_1888281"> <button class="btn btn-primary btnApprove btntooltipA" id="btnap_1888281" enttyddata="1888281" data-toggle="tooltip" title="" value="1888281" onclick="CheckInHomeValidation(1888281);" aria-label="Approve" data-original-title="Approve">A</button> <button class="btn btn-danger btnReject btntooltipR" id="btnrej_1888281" data-toggle="tooltip" title="" onclick="rejectPunchfuntion(1888281)" value="1888281" aria-label="Reject" data-original-title="Reject">R</button> </div> 我该怎么做才能解决这个问题？ 谢谢
我不应该在导航栏中当前页面的祖先链接上使用 aria-current="page" 吗？
在查看所述链接的页面或子页面时，在网站的主导航栏中突出显示链接是一种常见的做法，使用 aria-current="page" 来突出显示是不是很糟糕...
是否有 ARIA 属性的特征检测等效项，如 aria-owns？
Web 开发的最佳实践将使用浏览器功能检测来确定某个功能是否存在以及浏览器是否正确支持，而不是说版本检测。例如通过使用 CSS。
我正在修复灯塔。我制作了具有以下结构的选项卡： 我正在研究灯塔修复。我用以下结构制作了标签： <ul class="nav ms-5" role="tablist"> <li role="tab"> <a role="tab" class="tjs-tab__link text-dark active" href="#couponcode" data-bs-toggle="tab">Coupon Code</a> </li> <li role="tab"> <a role="tab" class="tjs-tab__link text-dark" href="#giftcards" data-bs-toggle="tab">Gift Cards</a> </li> </ul> 首先，我检测到与选项卡相关的 Lighthouses 问题 (ARIA)，我通过向 <ul> 和 <li> 添加角色来修复它们，这些问题已修复，但现在 Lighthouse 报告锚标记问题作为屏幕截图：https://www .screencast.com/t/pj0eAQPu3 我还在其中添加了role="tab并不能解决我的问题。请让我知道锚标签到底需要什么角色？ 提前致谢！ 我尝试了很多通过添加 role="tab 来解决这个问题，但可以做到，我也在网络 MDN 文档上进行了搜索，但他们没有带有锚标记的选项卡示例。 我建议遵循“Tabs 设计模式”。如果您查看该模式中的example，它们有按钮而不是链接。这允许用户在选项卡上按 SPACE 或 ENTER 来激活它。 简化后，看起来像： <div role="tablist"> <button role="tab">tab one text</button> <button role="tab">tab two text</button> <button role="tab">tab three text</button> </div> （代码中还有您需要的其他重要内容，例如 aria-selected 以及 role=tabpanel 部分，但为简单起见，我删除了它们。您可以查看 example 以获取所有信息。） 在您的代码示例中，<li> 不是键盘可聚焦的，因为列表项本身不是可聚焦的。你需要一个tabindex="0"。但是拥有 tabindex 只允许您对它进行 tab 并且不提供任何行为。您需要键盘事件处理程序以允许 ENTER/SPACE 选择它。我想这就是您的链接的用途，但现在每个选项卡都有两个可聚焦的元素 - <li> 和 <a>。现在越来越复杂了。我建议遵循前面提到的既定设计模式。 作为旁注，Lighthouse，内置于 Chrome 中的辅助功能检查器，使用axe 引擎。 Lighthouse 将您的<a role="tab"> 标记为无效实际上并不准确。它给你的错误是说带有role="tab"的元素必须是带有role="tablist"的元素的direct child。在您的代码示例中，与 tab 角色的链接是 tablist 的“孙子”而不是孩子。但是，role="tab"的官方规范说： 作者必须确保具有角色 tab 的元素包含在具有角色 tablist 的元素中，或由其拥有。 “包含在”并不意味着它必须是直接子代。可能是孙子或曾孙等 所以从技术上讲，你的代码遵循规范，尽管你实际上有双标签角色。一个在 <li> 上，一个在 <a> 上。你可以这样做，但可能不是你想要的。您的代码现在有 4 个选项卡，而不是 2 个。 在使用无序列表<ul>和列表项<li>实现的选项卡结构中，锚标记<a>通常用于提供可点击的选项卡标签。 <a> 标记的 href 属性设置为单击时选项卡打开的内容部分的相应唯一标识符。此标识符通常是分配给内容部分的 HTML id 属性。 例如，考虑以下 HTML 代码，它实现了一个带有两个选项卡的简单选项卡结构： <ul class="tabs"> <li><a href="#tab1">Tab 1</a></li> <li><a href="#tab2">Tab 2</a></li> </ul> <div id="tab1" class="tab-content">Content for Tab 1 goes here</div> <div id="tab2" class="tab-content">Content for Tab 2 goes here</div> 在此代码中，<a> 标签用作选项卡的可点击标签，而 href 属性设置为内容部分的相应 id。当用户单击选项卡时，浏览器将滚动到由 id 标识的内容部分，并且该部分变为可见。 总的来说，<a> 标签是实现具有无序列表和列表项结构的可点击选项卡的关键部分，它使用户能够与选项卡交互并查看相应的内容部分。
我读了几个关于这个主题的问题，所以我会问你是否有更好的想法。 基本上，我试图在以下 url 中抓取“价格/报价”表中的数据： https://www...
这个问题专门针对可访问性。我有一个表单，提交后，用户可以查看和打印。因为它必须在打印时看起来不错，所以我不只是...
通过 Python 中的 Selenium 单击包裹在 div 中的隐藏按钮
我正在使用 selenium 中的 Chrome webDriver 在 Workday 门户上自动登录，如何单击隐藏的登录按钮，该按钮定义为： 我正在使用 selenium 中的 Chrome webDriver 在 Workday 门户上自动登录，如何单击隐藏的登录按钮，该按钮定义为： <div class="css-1s1r74k"> <div font-size="14" height="40" aria-label="Sign In" role="button" tabindex="0" data-automation-id="click_filter" class="css-1n9xe37"> </div> <button type="submit" data-automation-id="signInSubmitButton" font-size="14" height="40" class="css-a9u6na" tabindex="-2" aria-hidden="true">Sign In</button> </div> 这是我正在使用的代码，但它无法对特定按钮执行点击操作： signInButton = driver.find_element(By.XPATH,'//*[@id="wd-Authentication-NO_METADATA_ID-uid6"]/div/div[1]/div/form/div[3]/div/div/div/div/button') driver.execute_script("arguments[0].click();", signInButton) 这是登录页面示例 - https://wd1.myworkdaysite.com/zh-CN/recruiting/snapchat/snap/login 也许你的定位器不正确 像这样尝试 xpath 定位器 //button[text()='Sign In'] 剧本 signInButton = driver.find_element(By.XPATH,"//button[text()='Sign In']")) driver.execute_script("arguments[0].click();", signInButton)
我想构建一个需要 aria-label 作为道具提供的组件。 // 我的组件.vue 定义道具<{ aria...
对于可访问性，您可以在表单中使用部分和字段集来避免嵌套字段集吗？
我研究了字段集的可访问性使用，并且共识似乎是不要嵌套字段集。但是在某些情况下，我需要单一形式的组内组。可以用吗
我有一个包含大量输入的表格。 其中有一组罕见的输入，按 Tab 键时不应关注这些输入。 但是，当焦点已经在组内时，按 TAB 键应该移动...