问题标签 [web-accessibility]

正如问题所说，我可以在同一个元素上使用aria-label和吗？aria-hidden="true"

我想要实现的是拥有一个<span>带有 aria-label 的元素（a 中的打开图标），但忽略其内容。

这种用法是否正确，或者 aria-hidden 试图忽略元素和 aria-label 试图赋予它意义之间存在冲突？

我遇到了 Pa11y 操作的问题，其中“单击元素...”操作不会触发 JavaScript“onclick”函数运行。有什么方法可以使用 Pa11y 的 Actions 功能在页面上调用 JavaScript 函数？

我正在创建一个时间线。时间线代表博客的一系列帖子，中心是当前帖子。时间线中的每个项目都是一个锚点，而不是中心。

我想知道哪种方式更适合屏幕阅读器和辅助技术。为列表的每个项目创建一个标签索引，或者只为 p 甚至什么都不做！

提前致谢！

我有一个<img>，当点击时应该执行一个动作，所以我把它包装在这样的里面<button>：

关于可访问性，可访问性树中的按钮应具有与其关联的角色和标签。该角色是使用<button>标签完成的，通常，按钮的标签是它在开始和结束标签内的内容，但在我们的例子中只有一个图像。

那么在这种情况下如何使按钮可访问？alt属性够吗？

我需要在内部应用程序的标题中创建一个 switch 元素，让您可以在两个用户角色之间切换。其余内容是根据所选角色呈现的——例如，角色 A 和角色 B 有不同的导航项和操作。同样重要的是要注意更改角色会使页面重新加载。

到目前为止，我无法仅使用输入（复选框/收音机）或按钮找到可访问的解决方案，因此我将这两种想法结合在一起（请忽略按钮的样式，仅用于演示目的）：

所以基本上我显示了一个带有两个选项的字段集作为屏幕阅读器用户的无线电输入和浏览器中的类似开关的按钮。

关于页面重新加载——WCAG 技术 G13要求通知用户如果表单元素的更改导致上下文的更改（如我们的示例中的重新加载）会发生什么。不幸的是，由于设计要求，我无法在按钮周围放置视觉信息，所以我只将它添加到屏幕阅读器的字段集中。但是，据我了解，如果页面是 Intranet 应用程序并且用户将接受培训（如我们的案例），这应该不是问题。

我的解决方案是否还有其他可访问性问题？有谁知道如何在不使用两个单独元素的情况下实现这一目标？提前致谢。

编辑：解决了标签问题。

如果我有两个元素一起描述一个元素，我可以aria-describedby像这样在属性上使用两个 id 吗？

使用 Enter 键确保所有元素都可点击，我使用以下方法：

对于大多数点击来说，它的效果非常好。问题在于没有直接绑定点击事件但可以通过冒泡点击的元素。例如：

以这种方式绑定的可点击元素将不会使用第一个示例触发。我发现 NVDA 以某种方式使所有元素都可以使用键盘点击，无论使用何种方法绑定它们。如果打开 NVDA，将触发像示例 2 中那样绑定的元素。

我想了解 NVDA 是如何做到这一点的（或者如果你有其他想法来解决这个问题），以便我可以将该行为复制到我的应用程序中，该应用程序正在被有运动障碍的人使用并且必须单独使用键盘，没有屏幕读者。

解决方案必须是纯 JS 或 jQuery。

我目前正在尝试通过扩展谷歌地图的覆盖视图类（通过在此示例上构建）来制作更易于访问的信息窗口版本。在我的 Web 应用程序中，当用户单击标记或侧边栏中显示的位置列表中的项目时，将在相应标记的位置打开一个信息窗口并显示有关所选位置的补充信息，这可能包括从另一个 API 检索到的描述、图像、评级、提示等。在任何给定时间，最多只能打开一个信息窗口。

我感到困惑的是使用哪个语义元素或角色属性或其他什么来描述信息窗口，从而如何相应地管理焦点？我目前的想法是：

1. 使用该role = 'dialog'属性并将信息窗口开发为非模态类型对话框，以便仍然可以访问信息窗口之外的外部内容。在这种情况下，标记和列表项可以具有aria-haspopup = 'dialog'很好地提醒信息窗口打开的属性。这种方法的问题在于它本质上是破坏性的，并且它不是显示在信息窗口中的关键信息，也不是用户需要对其做出响应的信息。
2. 使用一个<aside>元素，因为它包含与单击的标记或侧栏列表项互补的信息。信息窗口将具有单击位置的标题，因此信息窗口可以被视为独立信息。但是，在这种情况下我不能使用该aria-haspopup属性。我想我可以标记标记和列表项按钮，以提醒用户使用aria-label.
3. 使用role = 'tooltip'信息窗口并将其描述为工具提示小部件。但这意味着焦点必须被困在信息窗口中，直到它关闭。在谷歌地图信息窗口的实际实现中，用户可以与页面上的任何其他内容进行交互，而无需关注信息窗口以关闭，我认为更改该默认行为没有意义。还有关于是否可以在鼠标悬停/悬停事件之外触发工具提示的争论，我希望信息窗口出现在单击事件或输入/空格键事件上。
4. 将信息窗口实现为“可折叠内容”，将关联的标记和列表项按钮实现为“披露”按钮。这样，用户就会收到以非破坏性方式出现的额外内容的警报，并且焦点不会被困在信息窗口中。尽管样式不会遵循可折叠内容的典型样式实践/DOM 顺序，因为信息窗口的 html 不会立即出现在触发信息窗口打开的按钮的 html 之后。

哪个选项是合适的，还是有更好的方法更有意义？

根据选择的方法，焦点是否应该被困在信息窗口中？如果信息窗口已关闭并且焦点没有被困在信息窗口中，则使用单击事件或键盘快捷键关闭它后焦点应该在哪里：

1. 打开信息窗口的按钮？
2. 关闭信息窗口之前的最后一个焦点元素（假设最后一个焦点元素在信息窗口之外）？但是如果最后一个焦点元素是信息窗口中的一个元素呢？
3. body元素还是map元素？

此外，焦点应该在打开时立即移动到信息窗口中，还是应该保留在触发它打开的按钮上？

在我们的 Web 应用程序中，我们使用了多个“响应式”HTML 表格——如果它们的内容太宽，它们可以水平滚动（CSS 规则：）width:100%; overflow-x: auto;。这允许在表格中显示所有必要的信息，而不会破坏布局并使整个页面水平滚动。

在我们的例子中，这仅适用于小屏幕（在调整大小的浏览器窗口或用户将字体大小增加超过 200% 时），因为我们的表格不是那么大（请注意，应用程序是内部的，只会被使用在笔记本电脑/台式机屏幕上）。

不幸的是，键盘用户无法访问水平滚动内容overflow-x——滚动内容的唯一方法是使用鼠标。仅当整个页面可滚动或元素具有焦点时，使用箭头键才有效。

所以，为了使我们的表格可以用键盘控制，我正在考虑添加tabindex="0"它们，从而允许使用箭头键。如果表格是可滚动的，这似乎可以正常工作，但也意味着非交互式元素（大屏幕上的表格）可以获得焦点，这可能会导致键盘用户感到困惑。

这是一个小例子（用 Bootstrap 制作，省去写一些 CSS）。调整浏览器窗口的大小来测试它：

您是否认为此解决方案可能是可访问性的问题，是否有人对我如何解决它有更好的了解？谢谢

大多数浏览器与其显示的网站共享用户定义的语言（例如在 JavaScript 中：navigator.language || navigator.userLanguage）。

但是，如果您的母语是例如手语，或者您需要简单的语言，该怎么办。如果您需要高对比度怎么办？虽然现在通过响应式网页设计或浏览器功能可以很好地处理字体大小，但从浏览器的角度来看，额外的要求很难实现。

到目前为止，是否有任何实现允许用户自动向网站发送信息，表明额外的可访问性要求？

我的愿景是向网站发送额外的标头（类似于不跟踪标头），允许开发人员根据这些要求编写 css 媒体查询，从而隐藏或显示其他元素或增加网站上的对比度。

我感谢任何形式的建议、提示或任何正在进行的讨论，或向 w3c 或其他机构提出的想法。