WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Managing focus for hyperlinks and page content

for

From: Birkir R. Gunnarsson
Date: Sep 24, 2016 3:13PM

Hi

There are several solutions to this, none perfect but I think all of
them would be decent.
The most old-fashioned one would be to simulate a page refresh (update
the title attribute in the page header when the link is clicked and
move focus to the top of the page).

If the links are styled like tabs you can use the tab approach (using
aria-selected to indicate the selected tab and let the focus stay on
the tab) when it is activated.
The container for the updated content would have a role of tabpanel
and aria-labelledby pointing to the ID of the selected tab.

You could use a pseudo tab like approach by using links (with
title="selected" or "active" on the active link) and a role of region
for the container for updated content that points back to the active
link.
When link is activated the focus doesn't go anywhere.
In ARIA 1.1 you could use the aria-current attribute along with, or
instead of the title to indicate currently active link (there is no
screen reader support for this attribute yet, and the spec has not
been officially published).

Or you can use a live region and use the main landmark role or <main>
element for the content that gets updated.
Cheers


On 9/23/16, Sean Keegan < <EMAIL REMOVED> > wrote:
> Hello all,
>
> I am interested in feedback on a situation that created some "interesting"
> solutions from a development team:
>
> We have a single-page application written in Angular with a set of
> hyperlinks on the left side of the page representing a navigation menu.
> Activating a hyperlink updates the right side of the page with new text
> content, but keyboard focus is still on the hyperlink. So, new content is
> displayed, but you would never know what happened if the viewport is
> magnified or using a screen-reader.
>
> Various solutions were proposed, including programmatically setting focus
> to the heading element of the newly displayed text content, setting focus
> back to the top of the page with an aria-live update, using an aria-live
> region to announce the page has new content, or wrapping the entire newly
> displayed region in an aria-live region. There were a few other options
> mentioned that shall not be repeated (i.e., screen-readers need to get
> better!).
>
> We have a solution in place now, but I am curious as to how others have
> addressed this situation.
>
> Thanks,
> sean
> > > > >


--
Work hard. Have fun. Make history.