Differences

This shows you the differences between two versions of the page.

--- accessibility:menus [2023/08/07 17:41] – created scl
+++ accessibility:menus [2024/01/08 17:05] (current) – ARIA scl
@@ Line 4: / Line 4: @@
 Within a dropdown menu, the containing element should have the ''[ngbDropdownMenu]'' directive, and the individual items should have the ''[ngbDropdownItem]'' directive. This allows the user to navigate within a submenu using the up and down arrow keys as well as the tab key. See the [[https://ng-bootstrap.github.io/#/components/dropdown/api#NgbDropdownMenu|ng-bootstrap documentation]].
+===== ARIA for Navigation =====
+==== ARIA Labels ====
+When multiple landmarks have the same role, like multiple ''<nav>'' elements on one page, you can use [[accessibility:aria:acc_names|ARIA labels]] to give them unique and descriptive names, like "Main navigation" and "Search results pagination." Without labels, ''<nav>'' elements used for the main navigation, breadcrumbs, and pagination might all appear as “navigation” in the landmarks menu.
+[[https://github.com/w3c/aria-practices/issues/353|Navigation menus should not use the ARIA menu role]], which is intended for operating system menus.
+==== aria-current ====
+In navigation menus, including pagination links, the element containing the current page should include the ''aria-current="page"'' attribute. See [[https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-current|aria-current documentation at MDN]] for more details.
 **Further reading on navigation menus**
@@ Line 10: / Line 22: @@
   * [[https://techhub.iodigital.com/articles/how-to-build-accessible-main-navigation|How to build accessible main navigation, Tim Dujardin]]
   * [[https://adrianroselli.com/2017/10/dont-use-aria-menu-roles-for-site-nav.html|Don't Use ARIA Menu Roles for Site Nav, Adrian Roselli]]
+See also: [[accessibility:pagination|Pagination]]