WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Focus between the main content and left sidebar (Responsive site)

for

From: David Engebretson Jr
Date: Oct 29, 2018 2:57PM

I sure like this idea of displaying the main content first in a mobile
situation. I usually use the iPhone with Voiceover and find the rotor a bit
daunting at times because I like to have all of the rotor options
available... I've set up the rotor so it's full of navigation options in
Safari. If I navigate to a site I want to read the main content right away.
Usually. One nice thing about the IOS Safari browser is the Reader option.
That usually jumps me directly to the main content that I would be most
likely to want to read. While using JAWS or NVDA in a desktop situation,
with Chrome and Firefox running in responsive mode, I'd want to have the
same user experience as if I was not in responsive mode.

Thing is, if you change the navigation of your site while it is being
resized in response to the hardware screen size, you are requiring an
assistive technology user to learn a new user experience/interface. It can
be cognitively difficult, on a user, to change the user paridigm. For most
users you'd want to have a similar UX whether or not they navigate on a
mobile or desktop device. Semantic HTML design, then fun with ARIA and
JavaScript.

So, a quick and simple way to get to the main content is probably better
than changing your dom order based on screen size or browser preference,
IMHO.

Did the audit you referenced come with any pointers to the WCAG guidelines?
Might be handy for you while you debug the issues.
https://www.w3.org/

Best,
David


-----Original Message-----
From: Cindy Duggan
Sent: Monday, October 29, 2018 1:22 PM
To: <EMAIL REMOVED>
Subject: [WebAIM] Focus between the main content and left sidebar
(Responsive site)

Hi All,

Seeking some guidance / best practice on web accessibility as it applies to
Responsive Web Design.

Our website was developed to be responsive. All pages are set up with a
header (also containing search and site navigation) and a footer.

The central area of many pages consists of a main content region, and a
side region / sidebar containing section navigation and some links to
request information and links to social media.

The main content region comes first in the code, followed by the sidebar
region. It was set up that way so that viewers on smaller screens see the
main content prior to the sidebar "section links".

On Desktops, one sees the sidebar region on the left, with the main content
on the right. So when one uses a keyboard to navigate the site, they
encounter the main content followed by the sidebar links

An audit identified the following, and we are trying to understand how best
to deal with this issue, as we definitely do not want users on small
screens to see the section links before the main content of each page.

[Issue]
The sidebar links only gets keyboard focus after users have navigated
through the main content.

The focus order must be how the elements are place on the screen and must
start from top to bottom and left to right. They may find it confusing if
the side bar links do not get focus after the header and have to go through
the entire content before coming back to the sidebar links.

[Expected Behavior]

Developers must ensure that the focus order is logical and follows how the
elements are placed on the screen. In this context, the focus order must go
from the header to the sidebar links and then to the main content on the
page. The sidebar currently is placed on the DOM after the main content and
must be rearranged so that the main content follows the sidebar. Developers
can then use CSS to style it to look visually as it is currently being shown

Thanks for any insight.


*-----------------------*

Cindy Duggan, Ph.D., P.E.

*Director of Web ApplicationsInformation Technology Services*
[image: Manhattan College Logo/Shield]
Riverdale, NY 10471
Phone: 718-862-7413
<EMAIL REMOVED>
www.manhattan.edu