WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Accessibility of responsive, repositioned sidebars?

for

From: Jonathan Avila
Date: Oct 26, 2016 6:54AM

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

CSS Flexible box has the ability to allow programmatic ordering that does not match the DOM order. There is some disagreement on whether it should or not. But this would likely help you solve the issue if people can agree. Browsers implement it differently now.

https://www.w3.org/TR/css-flexbox-1/

Right now since the DOM order is it -- you would have to change the DOM itself to control the order in some situations like you discuss. I'd think that people have been flexible in interpreting 1.3.2 meaningful sequence to allow for the visual order to be different as long as it is still meaningful.

Jonathan

Jonathan Avila
Chief Accessibility Officer
SSB BART Group 
<EMAIL REMOVED>
703.637.8957 (Office)

Visit us online: Website | Twitter | Facebook | Linkedin | Blog
Check out our Digital Accessibility Webinars!


-----Original Message-----
From: WebAIM-Forum [mailto: <EMAIL REMOVED> ] On Behalf Of Robert Fentress
Sent: Wednesday, October 26, 2016 8:45 AM
To: WebAIM Discussion List
Subject: Re: [WebAIM] Accessibility of responsive, repositioned sidebars?

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
>