使用min-height在可扩展列表上的辅助功能问题

Question

预期要求：我需要阻止循环内部项目（基本上是应用程序上的语音读取这些内容），而不是扩展+动画。

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

问题：：使用display:none或visibility:hidden时，动画无效。

这是我的codepen

我需要做什么：：我更喜欢css修复js。

感谢。

Answer 1

@jazzbrotha给出了一个可靠的答案，但我认为根据您提供的codepen忽略了一些事情。因为这是一个与可访问性相关的问题，我觉得有必要提出我注意到的其他问题。我意识到codepen可能不是实际接口的1：1实现，所以这些实际上可能不是问题。话虽这么说，我已经在野外看到了很多这些问题，并认为展示它们会很好。

我在codepen示例中注意到的辅助功能问题：

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

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

我建议两件事：

1. 阅读accordion pattern that is described the ARIA Best Practices document。这描述了应该在JS中实现的所有键盘功能，以及应该使用的正确HTML语义和aria属性。
2. 阅读'collapsable sections' page on inclusive-components.design。这对于描述制作可访问的可折叠部分的所有空隙来说是一项了不起的工作。

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

Answer 2

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

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

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

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

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

希望它有所帮助！