WebAIM - Web Accessibility In Mind

E-mail List Archives

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

for

From: Cindy Duggan
Date: Oct 29, 2018 2:22PM

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