I'm mainly interested in the a11y aspects

So as you might be aware, sometimes you might wish to have a button that acts as an anchor.
These are 4 ways (I can think of) of approaching this issue:

1. Button inside an anchor element

<a href="//redirection"><button>Button</button></a>

2. Anchor inside button element

<button><a href="//redirection">Button</a></button>
<!-- Also should it be a href or button onclick (?) -->

3. Anchor styled as a button (without a button element)

<a class="buttonLike" href="//redirection">Button</a>

4. Button acting as a redirection (without an anchor element):

const button = document.getElementById('button')
button.addEventListener('click', () => {
  window.location.href = "//redirection"
})

<button id="button">Button</button>

I've tried to find an answer to this myself. Closest I could find was this excerpt:
According to the MDN anchor spec, which states the following:

Anchor elements are often abused as fake buttons by setting their href to # or javascript:void(0) to prevent the page from refreshing, then listening for their click events .

These bogus href values cause unexpected behavior when copying/dragging links, opening links in a new tab/window, bookmarking, or when JavaScript is loading, errors, or is disabled. They also convey incorrect semantics to assistive technologies, like screen readers.

Use a <button> instead. In general, you should only use a hyperlink for navigation to a real URL.

Unfortunately this doesn't help me too much. Basically all it states is you should not use the third approach (anchor styled as a button) if you don't mean to provide a real link to it, which is not what this question is about.

Is there any official WCAG on this subject matter that I was unable to find or?

I'm mainly interested in the a11y aspects

So as you might be aware, sometimes you might wish to have a button that acts as an anchor.
These are 4 ways (I can think of) of approaching this issue:

1. Button inside an anchor element

<a href="//redirection"><button>Button</button></a>

2. Anchor inside button element

<button><a href="//redirection">Button</a></button>
<!-- Also should it be a href or button onclick (?) -->

3. Anchor styled as a button (without a button element)

<a class="buttonLike" href="//redirection">Button</a>

4. Button acting as a redirection (without an anchor element):

const button = document.getElementById('button')
button.addEventListener('click', () => {
  window.location.href = "//redirection"
})

<button id="button">Button</button>

I've tried to find an answer to this myself. Closest I could find was this excerpt:
According to the MDN anchor spec, which states the following:

Anchor elements are often abused as fake buttons by setting their href to # or javascript:void(0) to prevent the page from refreshing, then listening for their click events .

These bogus href values cause unexpected behavior when copying/dragging links, opening links in a new tab/window, bookmarking, or when JavaScript is loading, errors, or is disabled. They also convey incorrect semantics to assistive technologies, like screen readers.

Use a <button> instead. In general, you should only use a hyperlink for navigation to a real URL.

Unfortunately this doesn't help me too much. Basically all it states is you should not use the third approach (anchor styled as a button) if you don't mean to provide a real link to it, which is not what this question is about.

Is there any official WCAG on this subject matter that I was unable to find or?

• javascript
• html
• accessibility
• semantics

• @JohnConde the question is about semantics, which in turn improve SEO. If somebody is able to elaborate on SEO than the better not only for me but for other people reading the question. I've removed the tag from the question, but without meaning to sound condescending, I'd appreciate if you'd at least have read the question before automatically discarding it a non-programming SEO question. – Samuel Hulla Commented Oct 20, 2020 at 14:27

3 Answers 3

Option 1 is not valid HTML.

Option 2 is not valid HTML.

Option 3 is the correct choice here.

Option 4 is semantically incorrect.

Semantics are one of if not the most important aspects of accessibility.

There are two things at play which dictate option 3.

The first is that an anchor should be used only to jump to sections and to navigate between pages.

The second is that a button should perform actions on the same page.

Now if you want to style a call to action link to look like a button that is fine but make sure you use the correct semantics, but make sure that CTA leads to a new page or it isn't semantically correct.

And although it is swearing on StackOverflow to mention SEO, a hyperlink rather than a JavaScript redirection will be far better.

The first and second rules of ARIA say:

• 1st rule : If you can use a native HTML element [...] then do so
• 2nd rule : Do not change native semantics, unless you really have to.

Interactive elements like a and button can't contain other interactive elements:

The a element may be wrapped around entire paragraphs, lists, tables, and so forth, even entire sections, so long as there is no interactive content within (e.g. buttons or other links).

So, as what you want to do is linking to a page, your third solution is obviously the only one correct.

I think you might have confused the "bogus" stagement which refers to your 4th example.

From my little experience with Accessibility and semantics there is no "one size fits all". It really depends on your priorities and the user experience you are aiming for.

A <button> gets all the accessibility goodies from the browser automatically: Being selected or pressed using the tab or spacebar/enter keys.

A <a> element is a link, links are meant to be used as links or anchors within a page.

Anchors are not as important in parison to a button within a page. From a user experience point of view; a button is used by people to interact with a UI, either to confirm or make the UI do something. Pressing a button provides a different feedback pared to a link. Anchor links on the other hand help a user with finding content within a page.

Again, it really depends on what you are trying to do:

• Is this a terms page or an article? Then list your anchor links without any button-like styling
• Does this a link that has to look as a button so users find it easier to spot or interact? Then style it as a button without it being actually a <button>.