WAI-ARIA是一个可访问的富Internet应用程序套件，它定义了一种使残障人士更容易访问Web内容和Web应用程序的方法。它特别有助于使用AJAX，HTML，JavaScript和相关技术开发的动态内容和高级用户界面控件。
为什么大多数聊天应用程序不使用 flex `*-reverse` 来显示消息？
我们即将使用 React 构建标准的聊天应用程序 消息列表将在底部包含最新的消息，在顶部包含较旧的消息，并且在战斗时无限滚动......
工具提示的常见用途是将其添加到 ⓘ 图标以显示“更多信息”。我目前正在努力使我的组件更易于访问，所以我想添加“工具提示”
所以，我将标题标签（h1、h2、h3、h4、h5、h6）包装在 和 中。问题是他们默认失去了“标题”ARIA 角色。来自 MDN 文档： 警告： 因此，我将标题标签（h1、h2、h3、h4、h5、h6）包装在 <details> 和 <summary> 中。问题是他们默认失去了“标题”ARIA 角色。来自MDN 文档： 警告：由于该元素具有按钮的默认角色（这会剥夺子元素的所有角色），因此此示例不适用于屏幕阅读器等辅助技术的用户。遗嘱的角色已被删除，因此不会被视为这些用户的标题。 但是你不能通过如下重写来轻松解决这个问题吗？我问的原因是我在谷歌搜索中没有看到这个技巧，只是有很多关于细节摘要元素被破坏和无法修复的抱怨。所以也许我错过了一些东西。 <details> <summary role="heading" aria-level="2"><h2>Heading</h2></summary> Lorem ipsum... </details> /元素是一个很好的语义元素，它为您提供了一些“免费”的内置可访问性，但正如您所注意到的，它确实有局限性。 本质上是一个。这是一个具有 aria-expanded 属性的按钮。如果您覆盖 的角色，那么它将不再作为按钮宣布，这意味着屏幕阅读器用户可能不知道它是一个交互式元素。 在 上听到“标题”会有点令人困惑，特别是因为内在的 aria-expanded 仍然被宣布。屏幕阅读器用户不会期望标题是可展开/可折叠的，因为标题不应该是交互式元素。 不建议覆盖元素的默认本机语义。也就是说，如果某个元素具有默认的 role，请勿覆盖该角色。 ARIA使用的第二条规则说： 不要更改本机语义，除非确实必须这样做。 一个有趣的旁注是，元素的“内容模型”表示可以在其中使用标题。 内容模型：短语内容，可选择与标题内容混合。 因此从技术上讲，您应该能够在 内包含标题，但并没有得到一致支持。 NVDA（PC 屏幕阅读器）will 宣布嵌入 中的标题。它还会宣布在 中嵌入 ，尽管我强烈反对这样做。 JAWS（另一种 PC 屏幕阅读器）将不会宣布嵌入 中的标题（或表格）。我认为这是一个 JAWS 错误，因为如上所述， 可以有标题。 总之（没有双关语），我不建议将标题或任何其他语义 html 元素放在 元素内。我不知道您的页面是如何组织的，但可能的替代方案是标题为 outside/before /。 <h2>important stuff here</h2> <details> <summary>normal text</summary> lorem ipsum </details>
FullCalendar v6.1 使用 SiteImprove 浏览器扩展在 GridCalendar 视图上产生 50 个“ARIA 属性不受支持或禁止”错误
错误 我正在开发一个法律要求保持一定水平的可访问性的网站。我们使用 SiteImprove（免费的浏览器扩展）来检查问题。我收到了 50 个错误...
FullCalendar v6.1 在使用 SiteImprove 免费 chrome 扩展的 GridCalender 视图上存在“表标题单元格缺少标题角色”ADA 问题
问题 我不知道如何解决日历页面问题，表标题单元格缺少标题角色。如图所示， 问题 我不知道如何解决日历页面问题，Table header cell is missing a header role。 <th role="presentation> 标签似乎存在问题，如下图所示。 我尝试过的事情 到目前为止，我已经尝试添加 scope="col"、scope="row"、role="columnheader" 以及 role="rowheader"，但这些似乎都没有使该错误消失。这是向 FullCalendar 提交的错误报告吗？如果我需要将其报告为错误，我还应该做什么来修复它？ 您对日历生成的 HTML 有多少控制权？该代码中指定了太多咏叹调。其中很多都是多余的，有些甚至是完全错误的。我认为有几个问题导致 siteimprove 标记错误。 首先，如果您对表使用本机语义 HTML，则大多数 role 属性都是不必要的。例如，<tr>不需要role="row"，因为默认情况下会得到它。与 <th> 相同，如果您使用 role="columnheader"，您将获得默认的 scope="col"。删除这些角色。 其次，语义表元素具有内置角色，如上所述，因此您不应该使用role="presentation"覆盖这些角色。这会删除该元素的语义值。例如，您有 <tr role="presentation">、<th role="presentation"> 和 <thead role="presentation">。删除所有role="presentation"。 主桌上还有<table role="grid">。如果您计划实现箭头键导航以在行和列之间移动（类似于在电子表格中导航），那么网格角色就可以。我尝试了一个简单的 FullCalendar 演示 ，但箭头键 无法 工作，所以 role="grid" 应该 not 被使用。日历中的日期是 tab 可聚焦的，这很好，但这只是一个常规表格，而不是网格。 由于生成的表代码存在很多问题，因此很难说是什么导致了 siteimprove 错误，但如果您可以控制的话，请先清理所有角色。如果您没有这种程度的控制权，我将不会使用该日历，因为它无法访问。
我用javascript生成了一些可折叠的div。我希望屏幕阅读器指示 div 是否折叠。我正在尝试使用 https://techservicesillinois.git 中的模板...
通过 javascript 动态添加 aria 标签的最佳方法是什么？
我正在开发一个具有预定义html的表单，我无法更改它，并且我想添加一个aria标签，但我遇到了困难。我尝试过使用类名和 id 但似乎没有
我有一个 django 模板，它通过循环一些数据来创建内容块 相关片段是： {% for c,v inlords.items %} {% with cloop=forloop.counter %} 我有一个 django 模板，它通过循环一些数据来创建内容块 相关片段是： {% for c,v in landlords.items %} {% with cloop=forloop.counter %} <section class="landlord" aria-labelledby="landlord_c_h3_{{ cloop }}"> <h3 id="landlord_c_h3_{{ cloop }}">{{ c }}</h3> {% for l in v %} {% with lloop=forloop.counter %} <section class="media" aria-labelledby="landlord_l_h4_{{ cloop }}_{{ lloop }}"> <section class="media-body" aria-labelledby="landlord_l_h4_{{ cloop }}_{{ lloop }}"> <h4 class="mt-0" id="landlord_l_h4_{{ cloop }}_{{ lloop }}">{{ l.name }}</h4> <p>{{ l.address }}</p> </section> <section role="presentation"> <img src="/media/{{ l.logo }}" alt=""/> </section> </section> {% endwith %} <hr> {% endfor %} </section> {% endwith %} {% endfor %} .... 这会产生一些 html： <section class="landlord" aria-labelledby="landlord_c_h3_1"> <h3 id="landlord_c_h3_1">Council Locality Offices</h3> <section class="media" aria-labelledby="landlord_l_h4_1_1"> <section class="media-body" aria-labelledby="landlord_l_h4_1_1"> <h4 class="mt-0" id="landlord_l_h4_1_1">North East Locality Office 1</h4> <p>123 North East Estate</p> </section> <section role="presentation"> <img src="/media/logo_a.png" alt=""> <section> </section> <hr> </section> 这违反了“唯一标签”规则......贵宾犬 有没有一种clean的方式来不同地标记<section class="media" ...和<section class="media-body" ..？ 我可以看到一个隐藏了几个元素以提供一些前置内容的小屋 - 但这确实感觉很麻烦！ 对于那些想了解我的hack解决方案的人： <div role="presentation" style="display: none" id="label_a">Card for</div> <div role="presentation" style="display: none" id="label_b">Details for</div> {% for c,v in landlords.items %} {% with cloop=forloop.counter %} <section class="landlord" aria-labelledby="landlord_c_h3_{{ cloop }}"> <h3 id="landlord_c_h3_{{ cloop }}">{{ c }}</h3> {% for l in v %} {% with lloop=forloop.counter %} <section class="media" aria-labelledby="label_a landlord_l_h4_{{ cloop }}_{{ lloop }}"> <section class="media-body" aria-labelledby="label_b landlord_l_h4_{{ cloop }}_{{ lloop }}"> <h4 class="mt-0" id="landlord_l_h4_{{ cloop }}_{{ lloop }}">{{ l.name }}</h4> <p>{{ l.address }}</p> </section> <section role="presentation"> <img src="/media/{{ l.logo }}" alt=""/> </section> </section> {% endwith %} <hr> {% endfor %} </section> {% endwith %} {% endfor %} （不聪明，不整洁，但有效）
我们需要在每个浏览器上进行辅助功能测试还是只需要在一种浏览器上进行测试就足够了？
我们需要在每个浏览器上进行辅助功能测试还是只需要在一种浏览器上进行测试就足够了？ A11y 需要进行浏览器兼容性测试吗？请建议。 让我知道...
我需要担心 WAI-ARIA 支持吗？我的意思是，HTML 不像编程语言那么严格，因此属性不会抛出错误。此外，WAI-ARIA 属性增强了可访问性...
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 会发生这种情况吗？或者..你该怎么做？