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

Question

预期要求:我需要防止在未展开 + 动画时循环遍历内部元素(基本上是应用程序的语音读取这些元素)。

我做了什么:我将 display:none 属性与动画一起添加到可扩展列表中(我使用了最大高度)。

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

这是我的 codepen

我需要如何完成::我更喜欢 css fix 而不是 js。

谢谢。

Answer 1

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

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

1. 键盘支持:仅使用键盘时，我无法激活章节标题来展开/折叠章节。看起来只实现了鼠标单击处理程序。这对于有视力和 body 障碍的人来说很重要，因为他们可能依赖非鼠标输入法。
2. 语义 HTML。屏幕阅读器用户通过 HTML 语义学习交互提示，而 aria-roles 将覆盖 HTML 语义，因此可能会模糊功能。例如
   • <h2>Section Title</h2>被宣布为“2 级标题，节标题”。这表明这是一个节标题，以下内容属于该节标题。视觉用户可以快速扫描页面并识别部分和部分标题以了解情况并了解可用的选项，而屏幕阅读器用户则不能。 为此，屏幕阅读器具有列出页面上所有标题元素并允许用户跳转到特定标题的功能。
   • <h2 role="button">Section Title</h2>宣布为“按钮，章节标题”。这表示这是一个按钮，可以通过单击、输入或空格激活。 这会覆盖标题语义并从屏幕阅读器提供的标题列表中删除标题。
   • <h2><button>Section Title</button></h2>被宣布为“2 级标题、章节标题、按钮”，因此表明该元素既是章节标题又是按钮。
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 .这在描述制作可访问的可折叠部分的所有间隙方面做得非常出色。

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