Group of navigation links missing semantics

Rule

Groups of navigation links MUST have semantics that convey their relationship.

Background

People who are blind cannot rely on the visual appearance and layout of a page to understand how links within a collection of links relate to each other or the page content. When navigation links appear in logical visual groups, their relationship must also be conveyed programmatically using semantic markup such as HTML list, heading, or <nav> elements, or ARIA landmark or menu markup. This will allow screen reader users to understand relationships that are apparent visually.

How to Fix

Fix this issue by doing ONE OR MORE of the following:

1. Wrap the navigation area in the HTML <nav> element (preferred) or add role="navigation" to the container wrapping the navigation area. If a page contains more than one navigation area, it is a best practice to include an aria-label to describe the type of navigation area - such as "secondary" or "breadcrumb" - for each section that is not the page's main navigation section.
2. Use list markup to provide semantic structure for the links.
3. Use heading markup to organize and describe the navigation area(s).
4. Use the ARIA menu design pattern.