What should the HREF attribute be for javascript links on a 508 compliant page?

Question

I know this question: Which "href" value should I use for JavaScript links, "#" or "javascript:void(0)"? contains a discussion of what the correct href content should be for javascript links. How does this relate to 508 compliance? Does anyone know if the javascript:void(0) is acceptable when click handlers are defined elsewhere in the javascript code?

Answer 1

This is where terminology becomes important - in terms of accessibility there is no such thing as "a javascript link". There are links, which are unadulterated anchor elements, and there are javascript behaviours, which should be assumed not-runnable for accessibility.

An empty anchor element that triggers javascript (so something like href='#' onclick='...') is not a link, it's a UI element for triggering page behaviour. For accessibility, don't abuse the anchor element for this, use a real UI element with the correct ARIA role.

For a click-through link (which do something like "click anchor" -> "magical JS is called" -> "window.location is changed to some new page") then be aware that you're semanticlaly misrepresenting your content. Even though you're using an anchor element, your use of it is not as a link, since it's not an anchor to another resource. Like in the above case, it's actually a button. The fact that the page location changes at the end does not change this.

For true accessibility, you'll have to give up any JavaScript-in-the-middle. But don't worry, that's much less severe than it sounds: the simplest solution is to use rerouting links instead. If you've ever used google.com or duckduckgo.com, etc. you'll already be familiar with this: rather than link out to the actual URL, link out to the URL proxied over a page-less script. You can guarantee that an anchor with the URL "http://our.domain.com/ref=http://the.actual.link.to.visit", will end up redirecting to the actual site just fine, and you can tack on any desired operation that should take place "when people click" as a server side action when you resolve the redirect.

508 compliance will be hard if you think you rely on JavaScript. So for accessibility: actively try not to. Enrich if you can use it, ensure things still work without it.

Answer 2

I essentially agree with Mike.

How does this relate to 508 compliance?

A common misconception about Section 508 is "oh I ran my site with JAWS (or maybe NVDA), and was fine. So I am compliant." Section 508 is therotically supposed to cover all disabilities not just blindness. When you wonder off into heavy JavaScripting, agencies tend to use the "Software applications and operating systems" (1194.21) Standards in addition to "Web-based intranet and internet information and systems" (1194.22) because they talk more about UI elements. Places like WebAIM, unfortunately deny this.

So when 1194.21 is included, the Standards can be more easily read as "you put all the @alts and <label>s on, but can this site/app/system with the keyboard? AKA is it keyboard navigatiable?" Can you get to that <span> that looks like a link?

As Mke said, one way to assist with this is using ARIA. So, that <span> now has to be:

<span onclick="Clicky()" role="link">Link</span>

(Ref: MDN)

Now back to your question:

I know this question: Href attribute for JavaScript links: "#" or "javascript:void(0)"? Does anyone know if the javascript:void(0) is acceptable when click handlers are defined elsewhere in the javascript code?

I would advocate for the void because when a reference (think it is called an in-page ref)is not defined, the focus goes back to the browser frame, versus staying on the link. You would need to write some handlers to return the focus to the link.