WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Accessibility for a sticky menu

for

From: Jonathan Avila
Date: Aug 15, 2014 7:51PM

> 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 REMOVED> [mailto: <EMAIL REMOVED> ] On Behalf Of Mona Rekhi
Sent: Wednesday, August 13, 2014 8:01 AM
To: <EMAIL 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!