E-mail List Archives
Thread: Managing focus for hyperlinks and page content
Number of posts in this thread: 3 (In chronological order)
From: Sean Keegan
Date: Fri, Sep 23 2016 6:43PM
Subject: Managing focus for hyperlinks and page content
No previous message | Next message →
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
From: Birkir R. Gunnarsson
Date: Sat, Sep 24 2016 3:13PM
Subject: Re: Managing focus for hyperlinks and page content
← Previous message | Next message →
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 ADDRESS 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.
From: Bryan Garaventa
Date: Mon, Sep 26 2016 4:12PM
Subject: Re: Managing focus for hyperlinks and page content
← Previous message | No next message
Hi, Birkir is right, there are different approaches to this that work in differing circumstances.
Here are two live examples of this that show the two differing approaches:
1
http://whatsock.com/
Which is the example of a single page app that loads content in dynamically then moves focus to the beginning of the newly rendered content. This occurs every time one of the left nav buttons is toggled such as Overview, Live Demo, Core API, etc.
2
http://whatsock.com/bootstrap/jquery
Which is another type of single page app that uses single focusable ARIA Tabs that when activated loads content into the page and does not move focus automatically after activation. This occurs with all of the tabs such as Bootstrap, Accordion, etc.
Which one you use depends on what you want, but it's important to note that if you use single focus ARIA Tabs for this then focus should not move automatically, and if you use links or toggles instead and you only scroll the newly loaded content into view instead of moving focus there, then keyboard only users will not be able to tab directly into the newly loaded content.
All the best,
Bryan
Bryan Garaventa
Accessibility Fellow
SSB BART Group, Inc.
= EMAIL ADDRESS REMOVED =
415.624.2709 (o)
www.SSBBartGroup.com
-----Original Message-----
From: WebAIM-Forum [mailto: = EMAIL ADDRESS REMOVED = ] On Behalf Of Sean Keegan
Sent: Friday, September 23, 2016 5:43 PM
To: = EMAIL ADDRESS REMOVED =
Subject: [WebAIM] Managing focus for hyperlinks and page content
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