WebAIM - Web Accessibility In Mind

E-mail List Archives

Accessibility of responsive, repositioned sidebars?

for

From: Robert Fentress
Date: Oct 18, 2016 8:21AM

Hello, all.

Anybody got opinions on the accessibility of responsive designs where a
secondary menu appears as a column to the right of the main content on
desktop breakpoints, but, on mobile, the menu appears above the main
content, perhaps in a disclosure widget of some sort? In both cases, the
DOM order has the menu before the main content, with the visual changes
being accomplished using CSS.

From a design perspective, the fact that the main content dominates
visually on desktop is probably good and making the menu easier to get to
by preceding the content on mobile makes sense (though it gets complicated
when you consider ease of access and hand position). My question, though
is how bad it is that the DOM order now does not match the tab order for
keyboarders? Certainly, this is not an uncommon pattern on the web these
days. Perhaps, it would not terribly violate user expectations.

Beyond the tab order, simply having the visual order not match the DOM
order appears to be a no-no for various reasons, based on "C27: Making the
DOM order match the visual order"
<https://www.w3.org/TR/WCAG20-TECHS/C27.html>. However, this is but one
sufficient condition for meeting the related success criterion, 1.3.2
Meaningful Sequence
<https://www.w3.org/WAI/WCAG20/quickref/#qr-content-structure-separation-sequence>.
C27 says:

"If this is a sufficient technique for a success criterion, failing this
test procedure does not necessarily mean that the success criterion has not
been satisfied in some other way, only that this technique has not been
successfully implemented and can not be used to claim conformance."


So, it seems ambiguous to me.

Would it be better to actually move the content with JavaScript at smaller
breakpoints so the DOM order matches the visual order? That strikes me as
inelegant (though less so as matchMedia
<http://caniuse.com/#feat=matchmedia>; gains ground) and more likely to
break. It may also confuse users who move between devices.

What do you folks think about the relative advantages and disadvantages of
various approaches?

Thanks.

Best,
Rob