ARIA 标记在桌面上是选项卡但在移动设备上可折叠的元素

Question

我有一系列使用标签的面板。我在选项卡上使用aria-controls、aria-selected、role="tablist"、role="tab"，在面板上使用aria-labelledby、aria-hidden 和role="tabpanel" - 一切似乎都很好。

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

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

Answer 1

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

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