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

预期要求：我需要防止循环通过内部项目基本上是语音应用程序阅读这些，而不是扩展+动画

我所做的：我将display:none属性和我使用的max height动画一起添加到可展开列表中

问题：使用“显示：无”或“可见性：隐藏”时，动画不起作用

这是我的

我需要怎么做：：我更喜欢css补丁而不是js

谢谢。

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

然后，当用户单击按钮以允许屏幕阅读器访问元素时，您可以简单地将这些属性更改为aria hidden=false和tabindex=0

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

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

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

---

希望有帮助

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

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

键盘支持：仅使用键盘时，我无法激活节标题以展开/折叠节。看起来只实现了鼠标单击处理程序。这对于视觉和身体残疾的人来说很重要，因为他们可能依赖非鼠标输入法。 语义HTML。屏幕阅读器用户通过HTML语义学习交互提示，aria角色将覆盖HTML语义，从而潜在地模糊功能。例如 章节标题宣布为标题2，章节标题。这表明这是一个节标题，以下内容属于该节标题。视觉用户可以快速浏览页面，识别章节和章节标题，了解情况并了解可用选项，而屏幕阅读器用户则不能。为了适应这种情况，屏幕阅读器具有列出页面上所有标题元素并允许用户跳转到特定标题的功能。 节标题以按钮、节标题的形式发布。这表明这是一个按钮，可以通过单击、输入或空格激活。这将覆盖标题语义，并从屏幕阅读器提供的标题列表中删除标题。 节标题被宣布为标题级别2、节标题和按钮，从而表明元素既是节标题又是按钮。 屏幕阅读器无法传达区段已展开或折叠的事实。要传递此功能，可以使用下面参考资料中描述的aria扩展属性。 不幸的是，解决这些问题可能需要更多的js和css

我建议两件事：

读这本书。这描述了应该在JS中实现的所有键盘功能，以及应该使用的正确HTML语义和aria属性。 读这本书。这是一个惊人的工作，描述了所有的间隙，使可访问的折叠部分。

---

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

我的可扩展列表只有在手机上才有。否则，它只是一个列表。我是否需要检查屏幕的宽度才能做到这一点，或者是否有更好的解决方案？您可以通过媒体查询来完成。我已经更新了我的答案。是的，我也这么做了。但最终的目标是拥有可访问性+动画。不幸的是，可见性/显示将在动画之前首先生效。这有意义吗？但是你说扩展列表仅在移动设备中，因此如果元素在该模式下可见，动画不应该工作吗？可扩展列表：你可以在此处查看可扩展列表-页面底部。移动视图出现后，您必须按标题才能查看子对象的扩展版本。因此，在执行这些操作时，可见性/显示将在动画之前首先生效。