E-mail List Archives
Thread: Accessibility for a sticky menu
Number of posts in this thread: 3 (In chronological order)
From: Mona Rekhi
Date: Wed, Aug 13 2014 6:01AM
Subject: Accessibility for a sticky menu
No previous message | Next message →
A menu that appears only after the user navigates past a certain section of the web page. The menu normally has links to various regions within a web page. These links that seem like intra-page links and may get highlighted with color to indicate that the user has reached its corresponding region within the web page. A varied example of this menu can be seen at: https://www.apple.com/iphone-5s/
How can we make the appearance and disappearance of a menu accessible to users of screen readers? How do we indicate the use of color as a selection on a sticky menu link when a user reaches its corresponding region? And how does one make a sticky menu keyboard accessible?
Thanks!
From: Jonathan Avila
Date: Fri, Aug 15 2014 7:51PM
Subject: Re: Accessibility for a sticky menu
← Previous message | Next message →
> make the appearance and disappearance of a menu accessible to users of screen readers?
It seems like sticky menus present a few issues.
1. Discoverability: The user must be able to discover the menu even without scrolling the screen. This could be solved by placing it in the DOM in a strategic location where it might first appear.
2. Access: While the menu is always easily available to users who can see or can use the mouse -- if it only appears at the top of the DOM it is likely more difficult to access for users of screen readers and users of speech recognition. Dragon seems to not put its number markers on fixed positioned items unless the fixed location coordinates are within the initial screen's height. Some options might be access or shortcut keys to focus the menu.
3. Role, name, state: There isn't exactly a good role for such a structure. Any state information such as a visual indication of what page region you are on may not be helpful to users of screen readers because once you move to the sticky menu the region has scrolled and the location is not what it just was. I.e. there is no good way to find out where you are by looking at the menu -- but you tell where you are if the regions are correctly marked with ARIA. The names can easily be indicated and aria-describedby can be used to map to the region headings. Aria-controls or something else can also be used to show the relationship between the menu items and region.
4 ARIA: It would be important to mark the regions with ARIA landmarks and ARIA labels or perhaps HTML5 sections as well as headings to help screen reader users understand the different regions of the page and their relationship.
Best Regards,
Jonathan
-----Original Message-----
From: = EMAIL ADDRESS REMOVED = [mailto: = EMAIL ADDRESS REMOVED = ] On Behalf Of Mona Rekhi
Sent: Wednesday, August 13, 2014 8:01 AM
To: = EMAIL ADDRESS REMOVED =
Subject: [WebAIM] Accessibility for a sticky menu
A menu that appears only after the user navigates past a certain section of the web page. The menu normally has links to various regions within a web page. These links that seem like intra-page links and may get highlighted with color to indicate that the user has reached its corresponding region within the web page. A varied example of this menu can be seen at: https://www.apple.com/iphone-5s/ How can we make the appearance and disappearance of a menu accessible to users of screen readers? How do we indicate the use of color as a selection on a sticky menu link when a user reaches its corresponding region? And how does one make a sticky menu keyboard accessible?
Thanks!
From: Mallory van Achterberg
Date: Sat, Aug 16 2014 1:28AM
Subject: Re: Accessibility for a sticky menu
← Previous message | No next message
On Wed, Aug 13, 2014 at 12:01:03PM +0000, Mona Rekhi wrote:
> How do we indicate the use of color as a selection on a sticky menu link when a user reaches its corresponding region?
I always get lots of things, menus being only one of them, where some
visual bit is supposed to let the user know who's currently selected.
I always have offscreen spans with relevant text like "current" next
to that item. Now I don't have to worry about funky ARIA support,
and usually making it happen is a combination of my HTML templates
and the Javascript who's making the selected thing have its little
arrow or colour or whatever.
> And how does one make a sticky menu keyboard accessible?
Having a quick-access in-page link could be nice.
Think of what you'd use if the menu wasn't sticky but stayed in
place somewhere on the page.
-Mallory