Fixed/Sticky Menu Bar Interferes with Access to Other Navigation Tools

Short Description

Fixed/sticky menu bars sometimes interfere with ability to see content and to understand relationship of content

Long Description

  • Fixed/sticky menu bars place preset items the developer wants the user to have easy access to at the top of the page, regardless of where the user is, including if they have scrolled beyond the content on the first page.
    Screen magnifiers, as well as mobile devices, often limit how much of the screen a user can see at any time, potentially causing problems when a given amount of the screen is always covered.
  • Fixed/sticky menu bars generally work well with magnifiers if they remain pinned at the top of a page and don’t change behavior.
  • A feature of a good fixed/sticky menu bar is that it is narrow enough that it can be seen together with page content, even with a high level of magnification. A very tall sticky header can fill the screen when magnified, defeating the purpose of displaying content in a fixed/sticky menu bars and making it challenging to visually access the main content of the page.
  • Fixed/sticky menu bars become problematic for magnifier users if they are too large and/or if their behavior changes. For example, sometimes content on a page only becomes a fixed/sticky menu bar once it hits the top of a page. This is confusing if a magnifier user wants to return to the content at the top of a page, but cannot find it because the fixed/sticky menu bar has replaced it as the content at the top. When content becomes a fixed/sticky menu bar in this way, this change in behavior may not be seen by the magnifier user because it happens outside the boundaries of the magnified page. This creates confusion when the user later looks for elements on the page and either cannot find the elements or finds that they have a new relationship to the content of the fixed/sticky menu bar.
  • Sometimes two or more fixed/sticky menu bars are used in combination. This can be very confusing for a magnifier user. An example of this is when a primary fixed/sticky menu bar remains pinned at the top of a page, and underneath it, a second menu bar or banner behaves in a sticky way. The secondary banner slides under the primary one, and the main content of the page slides under the secondary. These multiple layers of content that do not have a fixed relationship to each other make it difficult for a magnifier user to find fixed visual landmarks on the page. Multiple layers of fixed/sticky content also increase the likelihood that a user will be unaware when content is hidden under a fixed/sticky element.

Example of Issue

No example currently available

Accessibility/Usability

Accessibility
Usability

Impacted Assistive Technology

Screen Magnifier

Impacted Type of Device

Computer
Mobile

Recommendations

  • Use one sticky header at a time.
  • Let a magnifier user test your sticky header.
  • Avoid sticky headers on the mobile version