accessibility 相关问题

我有以下代码：死池我有以下代码： <h2> Deadpool <svg width="53" height="64" class="inline" aria-label="and"> <use href="#oleo-ampersand"></use> </svg> Wolverine:<br> A StackOverflow Example </h2> & 符号的样式如下：现在，我希望屏幕阅读器将其作为常规短语进行叙述（即“死侍和金刚狼”）。将 aria-label="and" 添加到 <svg> 似乎被忽略。有办法实现这一点吗？也许，我应该制作整个块aria-hidden并添加一个视觉上隐藏的元素？另外，在 Ctrl+C 上以相同的方式复制块会很酷，但我想如果没有 JS 拦截，这是不可能的。不用JS复制文本确实不简单。此标记在屏幕阅读器上适合您吗？ document.addEventListener('copy', (event) => { const selection = window.getSelection().toString(); if (selection.includes("Deadpool") && selection.includes("Wolverine")) { event.clipboardData.setData('text/plain', "Deadpool and Wolverine"); event.preventDefault(); } }); .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } <h2> <span class="sr-only">Deadpool and Wolverine</span> Deadpool <svg width="53" height="64" class="inline" aria-hidden="true"> <use href="#oleo-ampersand"></use> </svg> Wolverine: <br> A StackOverflow Example </h2>

html accessibility wai-aria wai

回答 1 投票 0

反应可访问性问题

我有一个关于屏幕阅读器阅读 React 页面的问题。比如说，在首页，它渲染组件A。当点击页面上的按钮时，路由发生变化，切换到另一个页面...

javascript reactjs accessibility jaws-screen-reader aria-live

回答 1 投票 0

<ul>中的<nav>是否需要aria-label？

我有以下代码：我有以下代码： <nav class="navbar navbar-expand-md"> <div class="container px-0"> <div id="navbarCollapse" class="collapse navbar-collapse"> <ul class="navbar-nav mx-auto"> <li class="nav-item"> <a href="#about" class="nav-link">About</a> </li> <li class="nav-item"> <a href="#project1" class="nav-link">Project 1</a> </li> <li class="nav-item"> <a href="#project2" class="nav-link">Project 2</a> </li> <li class="nav-item"> <a href="#contact" class="nav-link">Contact</a> </li> </ul> </div> </div> </nav> 自动可访问性测试工具显示了一个问题：“未找到可访问的文本”，其叙述者子系统将其叙述为：“已输入导航 - 包含 4 个项目的列表”。我应该将 aria-label="Navigation links" 添加到 <ul> 吗？从技术上讲，不，WCAG 不要求列表具有可访问的名称。此外，屏幕阅读器用户会听到该列表位于导航地标中，因此向列表添加“导航链接”的可访问名称实际上只是多余的信息，我不会推荐它。如果您要在此处添加可访问的名称，它将位于导航元素上。如果这是网站的主要导航，那么您可以向导航元素添加类似 aria-label="main" 的内容。但是，如果页面上只有一个导航元素，并且它位于标题中，那么即使这样也可能有点过分了。

html accessibility wai-aria wai

回答 1 投票 0

嵌套的正确 H* 标签是哪个 <section>

我的目标是在我的 html5 代码中使用正确的 H* 标签（H1 到 H6）。我读到这里我根本不应该使用：“为什么你应该选择文章而不是部分：浏览器的头部视觉显示...... 我的目标是在我的 html5 代码中使用正确的 H* 标签（H1 到 H6）。我读到here我根本不应该使用<section>：“为什么你应该选择文章而不是部分：浏览器对嵌套在元素内的标题的视觉显示使得它们看起来好像正在为这些标题分配逻辑层次结构。然而，这纯粹是视觉上的，不会传达给辅助技术” 但我觉得这不是真的，因为这个流行问题的答案：也就是说“文章中的章节就像书中的章节，章节中的文章就像卷中的诗歌”，我想将章节用于其预期目的。问题是这个MDN页面说“重要：在网络浏览器和辅助技术中都没有提出的大纲算法的实现；它从来都不是最终W3C规范的一部分。因此大纲算法不应该被用来传送文档建议作者使用标题等级 (h1-h6) 来传达文档结构。” 我发布的第一个链接中的那个人确实在该页面的中间提出了一个很好的观点，他说“浏览器显示不同大小的字体，具体取决于<section>s中嵌套的深度”。所以我说我必须正确地将 H* 标签与深度/嵌套匹配才能实现良好的轮廓和视觉样式，这是否正确，或者是否有其他方法。例如，这是不正确的： <body> <h1> something </h1> <section> <h1> section heading for outline </h1> <article> <h1>my first news article</h1> <p>stuff</p> </article> </section> </body> 因为屏幕阅读器无法正确处理 <section> 进行大纲显示。并且因为浏览器根据嵌套级别显示不同的字体。那么这会是正确的吗？ <body> <h1> something </h1> <section> <h2> section heading for outline </h2> <article> <h3>my first news article</h3> <p>stuff</p> </article> </section> </body> 注意：这是我发布的第一个问题，所以如果我失礼了，请对我宽容一点，我是新来的:) 基于 <h1> 的文档大纲算法已从规范中删除，实际上从未起作用。就标题级别而言，您的最后一个代码示例是正确的。为什么 HTML 大纲算法被从规范中删除 – 真相会让你震惊！没有文档大纲算法所以你不应该使用它，并且你的引用是正确的。建议作者使用标题等级（h1-h6）来传达文档结构。正确使用<section> 关于使用<section> vs <article>的问题。您不应该因为样式问题而避免后者。您已经完成了研究，应该坚持您的结果。不过，您需要自己应用一些样式。我还想在页面摘要中添加 ARIA 视角： <article>有角色article 文章不是导航地标和 <section>具有角色region，即…… […] 非常重要，用户可能希望能够轻松导航到该部分并将其列在页面摘要中。为此，还指出了作者必须为每个具有角色区域的元素提供一个简短的标签所以，让我们把它放在一起 <body> <h1> something </h1> <section aria-labelledby="s1-heading"> <h2 id="s1-heading"> section heading for outline </h2> <article> <h3>my first news article</h3> <p>stuff</p> </article> </section> </body>

html article accessibility

回答 1 投票 0

<section> 或 <article> 作为 Angular 组件的容器以实现可访问性和/或 SEO 目的？

我正在开发一个 Angular 项目，并希望确保我的组件遵循 HTML 语义以实现辅助功能和 SEO 目的，但仅在需要时才这样做，因为我不想添加额外的代码。 ...

html angular accessibility seo

回答 1 投票 0

我可以在嵌套上下文中多次使用 aria-current 吗？

假设我有一个包含不同的页面。某些中可能包含其他等等。现在，假设我想创建一个非主导航...... 假设我有一个包含不同 <section> 的页面。某些 <sections> 中可能包含其他 <sections> 等等。现在，假设我想创建一个非主导航，以允许轻松导航所有这些部分并且还突出显示用户正在滚动的当前部分（当然是通过JavaScript完成的）。由于，通过阅读嵌套部分，您仍在阅读父部分，因此我最终遇到了一种情况，即父部分和“最多”一个（如果其直接子项可能都有）。我想知道这是否格式不正确或有问题。这是所处理的层次结构类型的简单演示。最多一个链接到一个部分可能会以aria-current="true"每层嵌套结束。aria-current （在实际代码中，我已在 <nav> <ol> <li> <a href="#sec1" aria-current="true">Section 1</a> <nav> <ol> <li><a href="#sec1_1">Section 1.1</a></li> <li><a href="#sec1_2" aria-current="true">Section 1.2</a </li> </ol> </nav> </li>  </ol> </nav> 中添加了 aria 标签。为清楚起见，此处省略）根据 nav 上的 MDN 文档：仅使用 aria-current 将一组元素中的一个元素标记为当前元素。然而，“一组元素”的措辞有点过于模糊，无法回答我的疑问。嵌套导航中的项目是否会被分类为足够独立的上下文，或者它们最终仍属于其父级的“元素集”（就好像它们在逻辑上被扁平化一样）？这最终就是我的问题所在：每个列表是否可以有自己的aria-current来突出显示自己的上下文中的当前项目？或者嵌套列表会共享其父列表的逻辑上下文，因此整个嵌套结构只能允许一个 aria-current ？更具体地说，aria-current和Section 1都可以是当前的吗？是的，“元素集”可能不明确，但在我看来，这里有一个目录，因此所有链接都是目录的元素。因此，我认为将每个嵌套链接列表视为一个单独的集合可能是可行的。至于是否可以这样做，如果你查看ARIA 1.3文档，它说“作者应该仅使用Section 1.1将一组元素中的一个元素标记为当前元素。”这个“应该”很重要。这意味着它受到强烈鼓励并被认为是最佳实践，但它并不“非法”。因此从技术上讲，集合中允许有多个 aria-current 属性，因此您“可以”这样做，但是否应该这样做是另一个问题。大多数辅助功能专业人士会告诉您，真正确定最有效的方法的唯一方法是与用户进行测试。我的建议是从尽可能简单的开始，如果您通过反馈/测试发现需要做更多事情，则只会使其变得更加复杂。因此，我建议您一次只使用一个 aria-current，并将其放在当前查看的实际部分的链接上。

html accessibility wai-aria semantic-markup

回答 1 投票 0

NVDA 在警报中阅读链接 2 或 3 次

我们正在尝试让屏幕阅读器宣布当用户预订的时间不可用时屏幕上出现的警报下面是警报的屏幕截图和代码......

accessibility screen-readers nvda

回答 1 投票 0

如何有条件地应用辅助功能操作？

SwiftUI 有方便的 .accessiblityAction() ViewModider，它可以向您正在创建的视图添加辅助功能操作。键盘用户和 VO 用户可以了解 Vi 附加的操作...

swiftui accessibility

回答 1 投票 0

加载按钮应该具有哪种 ARIA 角色？

我有一个带有提交按钮的表单。当用户单击按钮时，我需要执行异步操作（例如，向后端发出 HTTP 请求）。为了提供有关该过程的反馈，我禁用了su...