0

My site was recently scanned for ADA compliance and there is one particular issue that I can't seem to figure out how to fix. The error I am getting is "Adjacent links are not separated properly." Below is the code that it is referring too.

<ul class="desktop-nav hidden-sm hidden-xs hide-on-tablet">
                            <li><a href="#" title="Home"><span class="fa fa-home" aria-hidden="true"></span> home
                            <small>our home page</small></a></li>
                            <li id="mega-menu-1-hover"><a href="#" title="Accounts"><span class="fa fa-folder-open" aria-hidden="true"></span> accounts <small>checking &amp; savings</small></a></li>
                            <li id="mega-menu-2-hover"><a href="#" title="Loans"><span class="fa fa-money" aria-hidden="true"v></span> loans <small>what do you need?</small></a></li>
                            <li id="mega-menu-3-hover"><a href="#" title="Services"><span class="fa fa-gears" aria-hidden="true"></span> services <small>what can we do for you?</small></a></li>
                            <li id="mega-menu-4-hover"><a href="#" title="About Us"><span class="fa fa-info-circle" aria-hidden="true"></span> about us <small>who we are</small></a></li>
                            <li id="mega-menu-5-hover"><a href="#" title="Forms"><span class="fa fa-file-text" aria-hidden="true"></span> forms <small>apply online today</small></a></li>
                        </ul>

Please someone help me figure this problem out!

flyx
  • 35,506
  • 7
  • 89
  • 126
Cameron Carswell
  • 1
  • Have you considered closing your hyperlinks before the end of their containing list items? Say, before the `` text? – John Bollinger Oct 12 '17 at 18:58
  • Yes, and that didn't work. I also tried removing the text completely and it didn't work either. I want to keep the text though. – Cameron Carswell Oct 12 '17 at 19:14
  • Hmm. The links you present *are* separated -- in different list items -- and reducing the link text to cover only part of each item separates them more. Do the scanner's docs or does its report not associate this message with a specific guideline you can check? Maybe it wants text between each `
  • ` start tag and the following `` start tag?
    • – John Bollinger Oct 12 '17 at 19:20
  • Yeah that isn't working either. I did find out that it is a WCAG 1.0 (Level AAA) issue, so should I even worry about that? – Cameron Carswell Oct 12 '17 at 20:01
  • An AAA-level issue is one that the guidelines say "may" be addressed, as opposed to "should" or "must" be addressed. Fixing it will make your site more accessible, but it is not an overwhelming problem. – John Bollinger Oct 12 '17 at 20:10
  • It appears that the specific issue is probably item 5 of WCAG 1.0 guideline 10: "Until user agents (including assistive technologies) render adjacent links distinctly, include non-link, printable characters (surrounded by spaces) between adjacent links." The W3C has [a few suggestions on ways to do that](https://www.w3.org/TR/WAI-WEBCONTENT-TECHS/#tech-divide-links). – John Bollinger Oct 12 '17 at 20:13
  • Consider also that the issue might not be between the hyperlinks in your list, but between the first or last one and a preceding or following link. – John Bollinger Oct 12 '17 at 20:16
  • Thanks for the help in this matter! – Cameron Carswell Oct 13 '17 at 13:46