WebAIM - Web Accessibility In Mind

E-mail List Archives

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

for

Number of posts in this thread: 5 (In chronological order)

From: Cindy Duggan
Date: Mon, Oct 29 2018 2:22PM
Subject: Focus between the main content and left sidebar (Responsive site)
No previous message | Next message →

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 ADDRESS REMOVED =
www.manhattan.edu

From: Jonathan Avila
Date: Mon, Oct 29 2018 2:42PM
Subject: Re: Focus between the main content and left sidebar (Responsive site)
← Previous message | Next message →

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 ADDRESS 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 ADDRESS REMOVED = > On Behalf Of Cindy Duggan
Sent: Monday, October 29, 2018 4:22 PM
To: = EMAIL ADDRESS 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 ADDRESS REMOVED =
www.manhattan.edu

From: David Engebretson Jr
Date: Mon, Oct 29 2018 2:57PM
Subject: Re: Focus between the main content and left sidebar (Responsive site)
← Previous message | Next message →

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 ADDRESS 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 ADDRESS REMOVED =
www.manhattan.edu

From: glen walker
Date: Mon, Oct 29 2018 6:00PM
Subject: Re: Focus between the main content and left sidebar (Responsive site)
← Previous message | Next message →

Technically, you don't have to do anything. Your audit report isn't
completely accurate. You quoted it as saying:

> "The focus order must be how the elements are placed on the screen and
must start from top to bottom and left to right. "

There is nothing in WCAG that dictates the tab order. While I agree that
the order is normally top to bottom and left to right (for LTR languages),
WCAG 2.4.3 just says:

> "If a Web page can be navigated sequentially and the navigation sequences
affect meaning or operation, focusable components receive focus in an order
that preserves meaning and operability."

From your description, it doesn't sound like navigating to the main before
the left nav "affects the meaning or operation". That is, whether you
navigate to the main first or the left nav first doesn't affect how the
page is understood. Granted, navigating to the left nav area is the norm,
but there's nothing that says it must be before the main.

Glen

From: Isabel Holdsworth
Date: Tue, Oct 30 2018 3:55AM
Subject: Re: Focus between the main content and left sidebar (Responsive site)
← Previous message | No next message

I'm with Glen. I don't think this fails any WCAG criterion.

You could have skip links before the main content that jump to the
sidebar and possibly the footer. These links wouldn't have to be
visible until they receive keyboard focus.

On 30/10/2018, glen walker < = EMAIL ADDRESS REMOVED = > wrote:
> Technically, you don't have to do anything. Your audit report isn't
> completely accurate. You quoted it as saying:
>
>> "The focus order must be how the elements are placed on the screen and
> must start from top to bottom and left to right. "
>
> There is nothing in WCAG that dictates the tab order. While I agree that
> the order is normally top to bottom and left to right (for LTR languages),
> WCAG 2.4.3 just says:
>
>> "If a Web page can be navigated sequentially and the navigation sequences
> affect meaning or operation, focusable components receive focus in an order
> that preserves meaning and operability."
>
> From your description, it doesn't sound like navigating to the main before
> the left nav "affects the meaning or operation". That is, whether you
> navigate to the main first or the left nav first doesn't affect how the
> page is understood. Granted, navigating to the left nav area is the norm,
> but there's nothing that says it must be before the main.
>
> Glen
> > > > >