找到你要的答案

Q:ARIA markup for elements that are tabs on desktop but collapsible on mobile

Q:咏叹调的标记,但在桌面折叠移动标签元素

I have a series of panels that work with tabs. I'm using aria-controls, aria-selected, role="tablist", role="tab" on the tabs and aria-labelledby, aria-hidden and role="tabpanel" on the panels - all seems good.

However, below a certain screen width I want the same elements to be collapsible, expanded and collapsed by buttons at the top. Obviously I need to hide the tabs list, and include buttons at the top of each panel which are hidden above the breakpoint. I would use aria-controls for the buttons - but there seems to be a few overlaps / clashes between the accessibility markup for the two layouts.

Is there a right way of doing this, or is it simply the case that I should ignore accessibility markup for the "mobile" version, assuming it's irrelevant to screen readers? Are there scenarios where the accessibility markup is necessary for responsive layouts?

我有一系列的面板,工作与标签。我用咏叹调唱段的选择,控制作用=“表示标签列表”,作用=“Tab”的标签和咏叹调labelledby,咏叹调隐藏角色=“表示标签面板”面板-似乎一切都好。

然而,在某个屏幕宽度以下,我希望相同的元素可以折叠,扩展和崩溃的顶部按钮。显然,我需要隐藏标签列表,并包括在每个面板上方隐藏在断点上方的按钮。我会用咏叹调控制按钮,但似乎有一些重叠/冲突性标记之间的两个布局。

是否有这样做的正确方法,或只是简单的情况下,我应该忽略的“移动”版本的可访问性标记,假设它是不相关的屏幕阅读器?是否有可访问标记对于响应布局是必需的?

answer1: 回答1:

The correct solution is to simply show the tabs as buttons (i.e. change the styling) in the small screen layout but leave the markup exactly the same. If you want to have multiple sections expandable simultaneously, then you can use aria-multiselectable (which essentially turns tabs into accordions).

Do not ignore accessibility for mobile. Mobile is as easy to make accessible as the desktop version and is becoming the primary way that users access many web sites and applications.

正确的解决方案是简单地将标签显示为按钮(即改变样式)在小屏幕布局,但留下的标记完全相同。如果你想有多段膨胀的同时,你可以使用咏叹调multiselectable(基本上转变成手风琴标签)。

不要忽视移动的可及性。移动是易于访问的桌面版本,并成为用户访问许多网站和应用程序的主要方式。

responsive-design  tabs  accessibility  wai-aria