使用最小高度的可扩展列表的可访问性问题

Posted 2023-03-12

【中文标题】使用最小高度的可扩展列表的可访问性问题

【英文标题】：Accessibility issue on expandable list using min-height

【发布时间】：2018-01-21 09:33:51

【问题描述】：

预期要求：我需要防止在内部项目未展开时循环播放（基本上是语音应用程序读取这些内容）+ 动画。

我做了什么：我把 display:none 属性与动画一起添加到可扩展列表中（我使用了 max-height）。

问题：：使用display:none或visibility:hidden时动画不起作用。

这是我的codepen

我需要如何完成：：我更喜欢 css 修复而不是 js。

谢谢。

【参考方案1】：

@jazzbrotha 给出了一个可靠的答案，但我认为根据您提供的代码笔，有些事情被忽略了。因为这是一个与可访问性相关的问题，所以我不得不提出我注意到的其他问题。我意识到 codepen 可能不是实际接口的 1:1 实现，所以这些实际上可能不是问题。话虽如此，我已经在野外看到了很多这些问题，并认为将它们浮出水面会很好。

我在 codepen 示例中注意到的可访问性问题：

键盘支持：仅使用键盘时，我无法激活部分标题以展开/折叠部分。看起来只实现了鼠标单击处理程序。这对于有视觉和身体残疾的人来说很重要，因为他们可能依赖非鼠标输入法。 语义 html。屏幕阅读器用户通过 HTML 语义学习交互提示，而 aria-roles 将覆盖 HTML 语义，因此可能会掩盖功能。例如 <h2>Section Title</h2> 被宣布为“标题级别 2，章节标题”。这表明这是一个节标题，以下内容属于该节标题。视觉用户可以快速扫描页面并识别部分和部分标题，以了解情况并了解可用选项，而屏幕阅读器用户则不能。 为了适应这种情况，屏幕阅读器具有列出页面上所有标题元素并允许用户跳转到特定标题的功能。 <h2 role="button">Section Title</h2> 被宣布为“按钮，章节标题”。这表明这是一个按钮，可以通过单击、输入或空格来激活。 这会覆盖标题语义并从屏幕阅读器提供的标题列表中删除标题。 <h2><button>Section Title</button></h2> 被宣布为“标题级别 2，部分标题，按钮”，因此表明该元素既是部分标题，又是按钮。 屏幕阅读器不会传达某个部分已展开或折叠的事实。要传达此功能，您可以使用以下资源中所述的aria-expanded 属性。

一个不幸的副作用是可能需要更多的 js 和 css 来解决这些问题。

我建议两件事：

阅读accordion pattern that is described the ARIA Best Practices document。这描述了应该在 JS 中实现的所有键盘功能，以及应该使用的正确 HTML 语义和 aria 属性。 阅读'collapsable sections' page on inclusive-components.design。这在描述制作可访问的可折叠部分的所有间隙方面做得非常出色。

这两个资源都包含代码示例，您不仅可以使用它们来解决您遇到的问题，还可以使界面更易于访问。

【参考方案2】：

如果您想对屏幕阅读器等辅助技术隐藏html 元素，您可以使用aria-hidden="true"。如果您希望在用户浏览网站时忽略这些元素，您可以添加tabindex=-1。

然后，您只需在用户单击时将这些属性更改为aria-hidden="false" 和tabindex="0"，即button 以允许屏幕阅读器访问这些元素。

假设您想要为移动设备上的屏幕阅读器用户和其他设备上的所有用户隐藏一个列表，一个简单的媒体查询就可以解决问题。如果display:none 给您带来麻烦，请尝试使用visability: hidden：

@media screen and (min-width: 768px) 
  [aria-hidden="true"]  visibility: hidden; 

您可以在官方 W3C 规范 here 中阅读有关 aria-hidden 的更多信息。如果您想了解更多关于移动可访问性的信息，请查看this MDN 文章。

希望对你有帮助！

【讨论】：

我的展开式列表只有在移动设备尺寸时才会出现。否则，它只是一个列表。我是否需要检查屏幕宽度才能做到这一点，还是有更好的解决方案？

您可以通过媒体查询来做到这一点。我已经更新了我的答案。

是的，我也这样做了。但最终目标是拥有可访问性+动画。不幸的是，可见性/显示都将在动画之前首先生效。这有意义吗？

但是你说扩展列表只在移动设备中，所以如果元素在该模式下可见，动画不应该工作吗？

可扩展列表 :) 您可以在此处查看可扩展列表 - shell.com 页面底部。移动视图出现后，您必须按标题才能查看子项的扩展版本。因此，在执行这些操作时，可见性/显示将在动画之前首先生效。