-
Change Request
-
Resolution: Unresolved
-
Trivial
-
None
-
Sprint candidates
Assistive technology users are not able to skip aside/sidebar navigation to access main content area. To access main area they must use Tab button and walk through all navigational items in sidebar in order to reach section controls/filters/table data etc which is difficult and requires a lot of effort from users relying on assistive technologies.
Solution:
We can significantly improve navigation effort for users relying on assistive technologies by inserting "Skip to main content" in Zabbix system. Skip links are a part of WCAG SC 2.4.1 requirement of providing users with mechanisms to easily skip repetitive content.
This link will be visible only for users using assistive technologies and keyboard navigation, so this feature will not affect other users.
How to:
Link should be placed right after body tag, so the screen reader (for example) reads it and focuses on this link first after the page is loaded. Header and main are nested in wrapper so we need to define an ID on wrapper or header so that users jump precisely to start of the main content.
<body>
<a href="#wrapper" class="skip-link">Skip to main content</a>
<aside class="sidebar" ...>...</aside>
<div class="wrapper" id="wrapper"...>...</div>
</body>
Skip link should be styled as a default button with focus, it can be hidden using css and move into view only when it receives focus from screen reader or pressing tab on page load, example code below:
.skip-link
{ position: absolute; top: auto; left: -999px; width: 1px; height: 1px; overflow: hidden; }
/* Show keyboard focus */
.skip-link:focus-visible
Additional tips on implementation:
https://a11y-blog.dev/en/articles/understanding-a-skip-link/
Design see screenshot:
Benefits:
- Screen reader users who visit several pages on the same site can avoid having to hear all header content and dozens of navigation links on every page before the main content is spoken.
- People who use only the keyboard or a keyboard interface can reach content with fewer keystrokes. Otherwise, they might have to make dozens of keystrokes before reaching a link in the main content area. This can take a long time and may cause severe physical pain for some users.
- People who use screen magnifiers do not have to search through the same header content or other blocks of information to find where the main content begins each time they enter a new page.
- People with cognitive limitations as well as people who use screen readers may benefit when links are grouped into lists
