7

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?

unor
  • 92,415
  • 26
  • 211
  • 360
Stuart Kershaw
  • 16,831
  • 6
  • 37
  • 48
  • How about just having a single About Us link which when clicked (inc on mobile w/ touch) goes to the about us page which has a link to the contact us page? – LDJ Aug 04 '16 at 07:13
  • Thanks, but that limits navigation on mobile to just the primary level items. Mobile requires access to the full subnav for each primary link from the menu. Your suggestion requires a page load, and doesn't keep with the required navigation on mobile. – Stuart Kershaw Aug 04 '16 at 14:20

3 Answers3

4

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.

Stuart Kershaw
  • 16,831
  • 6
  • 37
  • 48
  • 1
    Good call. Users are more important than tools! – stringy Aug 09 '16 at 02:42
  • 1
    Yep, that's the way to go. It's important to remember that the tools are picking up on potential issues and in some cases it's totally correct to ignore them for good reasons. – Fiona - myaccessible.website Aug 17 '16 at 09:51
  • This is not the intended use for `role="presentation"`, and removing the role is redundant if you're already removing the element from the accessibility tree with `aria-hidden="true"`. Why not just leave things the way they are? I find it ironic that you're saying "users over tools", yet you modify your link to completely remove it for users of assistive technology! – chipit24 Sep 19 '18 at 14:11
  • @chipit24 These are redundant links, in that they're part of the html nav structure but hidden with CSS. It was a long story as to why the nav items were included in HTML like that, but these links were visually hidden with CSS at certain breakpoints... so the question was about hiding them from assistive tech to match. I think you missed the goal here - making the aria nav match the visual. – Stuart Kershaw Sep 19 '18 at 15:41
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.

stringy
  • 1,323
  • 7
  • 16
  • The link is hidden with CSS for large up, using the Foundation 'hide-for-large-up' class. I think the WAVE tool reads the HTML document without regard for CSS - as it's testing the markup for assistive technology like screen readers, where CSS styling doesn't factor in. – Stuart Kershaw Aug 04 '16 at 14:40
  • 1
    Display:none removes things from the DOM, so screenreaders will respect that. It's the key difference between hiding things from sight versus hiding them from everyone. That's what Foundation uses so although WAVE is flagging it as a problem I suspect it might be ok. Can you test in NVDA (free) just to check? – stringy Aug 09 '16 at 02:41
2

There is no such thing as "redundant links" in WCAG 2.0

There are only two subjects, you have to care:

So having two links which lead to the same page no matter they are adjacent is not a problem according to WCAG 2.0 as long as one does not contain an image.

But if one tool say it's a problem, you have many solution : ignoring this tool, changing your tool, or modifying the text as so:

  • About us
    • Contact us
    • About us
Adam
  • 17,838
  • 32
  • 54
  • The WAVE accessibility tool raises alerts for Redundant links. Each anchor tag with a duplicated href produces an alert. Per the tool, What It Means: Adjacent links go to the same URL. Why It Matters: When adjacent links go to the same location (such as a linked product image and an adjacent linked product name that go to the same product page) this results in additional navigation and repetition for keyboard and screen reader users. The Algorithm... in English: Two adjacent links go to the same URL. – Stuart Kershaw Aug 04 '16 at 14:10
  • Upvote, as moving the child About Us below Contact Us did resolve the adjacency issue in the WAVE tool, but moving the duplicated primary item beneath the subnav list presents a different usability problem in navigating the menu. – Stuart Kershaw Aug 04 '16 at 15:55