href='#' isn't an invalid hypertext reference

[dd8]

https://alphagov.github.io/accessibility-tool-audit/test-cases.html#links-link-to-,-invalid-hypertext-reference

The behaviour is specified in the HTML 5 spec - it's a synonym for #top - both link to the top of the page. See step 2 and step 7 here: https://www.w3.org/TR/html52/single-page.html#an-indicated-part-of-the-document

Also documented here: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#attr-href

[nschonni]

I'm guessing it's flagged because usually it's used for artificial buttons https://marcysutton.com/links-vs-buttons-in-modern-web-applications/

[dd8]

Yes, but fake buttons require a click event handler but the test example doesn't have a click event handler. The only event handler visible in dev tools is keyup on Window.

So these are potential problems:

<a href="#" onclick="goto('/home')">Home</a>

and

<a href="#" class="button">Book Flight</a>
<script>
$( "a.button" ).click(function() {
  bookFlight();
});
</script>

but this isn't:

<a href='#'>Top of page</a>

[selfthinker]

I guess it makes sense to change the current example to something like you suggested. To use the minimal amount of JavaScript which still makes sense, I will probably change it to

<a href="#" onclick="window.print()">Print</a>

[dd8]

That seems right. It might be worth thinking about adding both positive (where a problem should be detected) and negative tests (usually a similar case, where a problem shouldn't be detected).

Having both makes test cases more focused, and helps when there are lots of accessible solutions (e.g. control labelling via label element, aria-label, aria-labelledby etc)