WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Accessibility of responsive, repositioned sidebars?

for

From: Robert Fentress
Date: Oct 26, 2016 6:45AM

Bummer. Nobody has an opinion, or was I just not clear in my explanation
of the issue?

On Tue, Oct 18, 2016 at 10:21 AM, Robert Fentress < <EMAIL REMOVED> > wrote:

> 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
>