ARIA标记用于在桌面上标记但在移动设备上可折叠的元素

Question

我有一系列与标签一起使用的面板。我在标签页上使用aria-controls，aria-selected，role="tablist"，role="tab"，在aria-labelledby，aria-hidden和role="tabpanel"上使用面板 - 一切看起来都不错。

但是，在某个屏幕宽度以下，我希望相同的元素可以通过顶部的按钮进行折叠，展开和折叠。显然，我需要隐藏选项卡列表，并在每个面板顶部包含隐藏在断点上方的按钮。我会使用aria-controls作为按钮 - 但两个布局的辅助功能标记之间似乎存在一些重叠/冲突。

是否有正确的方法可以做到这一点，或者只是我应该忽略“移动”版本的可访问性标记，假设它与屏幕阅读器无关？是否存在响应式布局需要可访问性标记的情况？

Answer 1

正确的解决方案是在小屏幕布局中简单地将标签显示为按钮（即更改样式），但保留标记完全相同。如果你想同时扩展多个部分，那么你可以使用aria-multiselectable（它实际上将标签变成手风琴）。

不要忽略移动设备的辅助功能。移动设备与桌面版一样易于访问，并且正在成为用户访问许多网站和应用程序的主要方式。