WebAIM - Web Accessibility In Mind

E-mail List Archives

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

for

From: Jonathan Avila
Date: Oct 29, 2018 2:42PM

HI Cindy, a collapse/expand option for the About Us section links between the header and main content may be one option.

This page has an example of a show/hide sidebar.
https://www.w3.org/WAI/WCAG21/quickref/?hidesidebar=true

Jonathan

Jonathan Avila, CPWA
Chief Accessibility Officer
Level Access
<EMAIL REMOVED>
703.637.8957 office

Visit us online:
Website | Twitter | Facebook | LinkedIn | Blog

Looking to boost your accessibility knowledge? Check out our free webinars!

The information contained in this transmission may be attorney privileged and/or confidential information intended for the use of the individual or entity named above. If the reader of this message is not the intended recipient, you are hereby notified that any use, dissemination, distribution or copying of this communication is strictly prohibited.

-----Original Message-----
From: WebAIM-Forum < <EMAIL REMOVED> > On Behalf Of Cindy Duggan
Sent: Monday, October 29, 2018 4: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