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

我有一系列的面板可以使用标签。我在选项卡上使用

aria控件

，

aria选择

，

role=“tablist”

，

role=“tab”

，在面板上使用

aria标签

，

aria隐藏

和

role=“tabpanel”

，一切看起来都不错

但是，在某个屏幕宽度以下，我希望相同的元素可以通过顶部的按钮折叠、展开和折叠。显然，我需要隐藏选项卡列表，并在每个面板的顶部包含隐藏在断点上方的按钮。我会对按钮使用

aria控件

，但两个布局的可访问性标记之间似乎有一些重叠/冲突

---

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

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

---

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

恐怕这不是一个真正的用户体验问题。你已经决定了你想要的用户体验是什么，所以现在你就要实现它了。恐怕这不在本网站的范围之内。@JonW我认为用户体验设计师是定义ARIA标签的人，而不是程序员。包容性设计模块在HCID学位中比在计算机科学中更为常见。这个问题是关于使用AT的用户的用户体验——在我看来，这更多的是UX而不是编程。