披露部件

披露小部件可以揭示 - 或披露 - 标题下的隐藏内容。它节省了屏幕空间并提供了页面内容的良好概览。

通常，可扩展标题旁边有加号 [+] 或向下的三角形 ▼ 等符号，表示可以显示更多内容。显示内容后，此符号通常会变为减号或向上的三角形 ▲。

披露部件的应用

键盘使用：无法聚焦和激活披露控件语音输入使用：无法通过语音激活披露控件

对显示下方内容的元素使用标题标记。通过这种方式，屏幕阅读器用户可以获得他们可以轻松浏览的内容概览。另一种方法可以是定义列表标记，例如，当您将披露小部件用于词汇表或常见问题解答时。
确保披露的内容紧跟在发现它的触发器之后——不仅在视觉上，而且在源代码 (DOM) 中。然后，屏幕阅读器用户只需向下箭头即可阅读公开的内容。
使用按钮元素作为披露的触发器。这样，交互式标题将自动接收键盘焦点。不要通过在触发器上放置 tabindex="0" 来使其可聚焦。
当它被激活时，将键盘焦点留在按钮上。然后，键盘用户可以轻松地在展开和折叠状态之间切换。
在按钮上使用 aria-expanded 属性。这个值表示内容是可见的 aria-expanded="true" 还是隐藏的 aria-expanded="false"
使状态保持最新。确保 aria-expanded 的值在用户与按钮交互时动态更改。
如果您使用链接作为触发器，请给它一个 role=button 。激活触发器不会去某个地方 - 它会做一些事情。这就是链接不太合适的原因。
确保符号具有良好的对比度（3:1 或更好）。
在按钮中包含符号，这样每个披露触发器只是一个制表位。在图像上使用空的替代文本；当你使用字体图标时，用 aria-hidden 隐藏图标本身。