5

I manage several websites that use a featured article scroller on their homepages, which allows the user to click a forward or back arrow in order to see the next article headline and blurb while remaining on the same page.

I use WAVE's accessibility checker and any sites that have this particular plugin throw an error back because within the code there is an empty link, written as <a href="#">. Is there any way around this? I've defined a title attribute but the # is causing the empty link error to still come up.

Some places I've seen that this is perfectly acceptable and others claim this is a problem. What's the actual answer and potential workaround?

unor
  • 92,415
  • 26
  • 211
  • 360
NiamLeeson
  • 63
  • 1
  • 7
  • 2
    [Potential relevant answer here](http://stackoverflow.com/a/19167175/2930477). You don't need an href attribute and could just use something like `Back` / `Next`. [This answer is also relevant](http://stackoverflow.com/a/10510353/2930477). – misterManSam Jun 23 '16 at 02:55
  • Any inkling why I got a downvote on my answer? – aardrian Jun 23 '16 at 03:31

2 Answers2

14

Change the <a href="#"> to a <button> and put your event handler on it.

Some more context on which elements belongs where....

Does the Control Take Me to Another Page? Use an Anchor

If, when clicked, tapped, or activated by keyboard or voice (or insert novel interaction method here), the user is whisked to another URL (including an anchor on the same page), then use <a href="[URL]">. Make sure you use the href attribute and that it has a real URL, not a “#” (otherwise you’re probably relying on JavaScript, which is not at all necessary for a hyperlink). If an href points to just a “#”, then you’re probably doing it wrong. If it points to a named anchor as part of your progressive enhancement efforts, then that’s totally valid.

Does the Control Change Something on the Current Page? Use a Button

If, when activated, the user is not moved from the page (or to an anchor within the page), but instead is presented with a new view (message boxes, changes in layout, etc.), then use a <button>. While you could use an<input type="button">, it’s more likely you’ll get into conflicts with pre-existing styles and subsequent developers (like me).

Does the Control Submit Form Fields? Use a Submit

If, when activated, information the user has entered (either by manually typing or by choosing items on the screen) is being sent back to the server, then use an <input type="submit">. This has better live within a <form>. If you need more styling control or have to embed more than just a simple text string, use a <button type="submit"> instead.

Keyboard Considerations

Think of keyboard users for a moment. A hyperlink can be fired by pressing the enter key. But a true button can be fired by pressing the enter key or the space bar. When a hyperlink has focus and the user presses the space bar, the page will scroll one screenful. If there isn’t more to scroll then the user just experiences nothing. Given a set of interface elements that look the same, if some work with a space bar and some don’t, you can’t expect users to have much confidence in how the page behaves.

I think it’s also worth mentioning that events triggered by a space bar only fire when the key is released, whereas using the Enter key will fire the event as soon as you press the key down (prior to releasing it).

aardrian
  • 8,581
  • 30
  • 40
  • Thanks for all the great input guys, it's much appreciated. And aardrian, I have no idea why you got downvoted. Very helpful stuff. I will try adding a – NiamLeeson Jun 23 '16 at 04:32
  • See if the script is specifically looking for an `a` and, if so, gut that (or replace with `button`). – aardrian Jun 23 '16 at 04:37
  • @aardrian People who downvoted you did not read your answer. Don't ask, and keep doing your good job. I very appreciate your answers. – Adam Jun 23 '16 at 13:20
0

Some source suggests that <a href="#">link</a> would be an invalid hypertext reference, but in fact the problem would exist only in non javascript browsers which is out of the scope of WCAG 2. This is not your problem here as this is not an error that WAVE considers.

The problem here is the fact that you have an empty link content <a href="#"></a> and that adding a title attribute does not satisfy WAVE algorithm.

If your only concern is to satisfy WAVE, just put some content in the link and use any CSS trick to hide this content.

Adam
  • 17,838
  • 32
  • 54
  • Thanks for all the advice guys, I got it working by removing the href attribute. :-) – NiamLeeson Jun 23 '16 at 17:47
  • @NiamLeeson note that removing the `href` attribute may lead to incompatibilies with screen readers not announcing the link – Adam Jun 24 '16 at 06:03
  • So, Adam, would you say the best solution is that aforementioned – NiamLeeson Jun 24 '16 at 09:16
  • The global answer for your question is that you must have a text replacement. No matter if you use a `a[href]` or a `button`. Using `a[href]` instead of `button` is not a problem for screenreaders in the sole exception that you would ear "link" instead of "button", which is not a big deal. Also you should not trust accessibility "validators", and test using a screenreader. – Adam Jun 24 '16 at 09:43
  • For some screen reader users, that is a very big deal. They expect a certain interaction when they hear link. As such, they may choose to open the link in a new window. They may also benefit from the additional keyboard interaction afforded by a ` – aardrian Jun 24 '16 at 12:22