Accessibility (WCAG 2.0), redundant links and responsive website navigation

Question

The following simple navigation exists for touch devices on a responsive site:

• About Us
  • About Us
  • Contact Us

At mobile, the primary link expands a subnav on touch, with a replicated child link to actually open About Us and other child pages.

At desktop, the replicated link is hidden - because the primary About Us link supports both click (open the page) and hover (reveal the subnav) states.

This seems like a common way to handle navigation on responsive sites with mobile touch menus, but the duplicated links produce WCAG 2.0 redundant link alerts.

Is there a simple attribute approach to resolving this? Or is there no better fix than to modify the site's IA?

Answer 1

I've ended up utilizing the attributes aria-hidden="true" role="presentation" on the duplicated nav item. WAVE still throws its 'duplicated link' alert, but as @stringy mentioned, these tools are imperfect and I'd rather have some alerts in WAVE than penalize users by altering the nav order. aria-hidden="true" role="presentation" gives some additional context to assistive technology.

Answer 2

How are you hiding the link on desktop sizes? Using display:none removes it from the page rather than just making it invisible or very small, so it will prevent any duplicate link issues. If you're already using display:none, it might be a bug in the tool you're using to assess accessibility.