4

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?

Samuel Hulla
  • 6,617
  • 7
  • 36
  • 70
  • @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 Oct 20 '20 at 14:27

3 Answers3

7

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.

GrahamTheDev
  • 22,724
  • 2
  • 32
  • 64
  • When you say option 3 is the correct choice, is it because it is valid HTML or it is semantically accurate or both? Second, are you referring to an anchor that is not styled as a button? Lastly, if a link is styled as a button is it valid (code and semantics) to jump to a reference on the same page or to redirect a user to another page? Assuming that a button is not semantically correct to perform either, what other options are there? – Motivated Nov 27 '20 at 06:42
  • 1
    Semantics and expected behaviour are why option 3. No you can style an anchor to look like a button if you wish for things like call to actions, the semantics are more important than visual appearance (consistency across the site is important). An anchor can be used to jump to a section on a page (it is one of the primary uses) or navigate to another page. Buttons are used for actions such as opening modals. A simple "sanity check" is "does the URL change?" - if it does it should be an anchor, if it doesn't a button (there are exceptions but it gets it right most of the time). – GrahamTheDev Nov 27 '20 at 07:43
  • There are some parts of [this answer I gave](https://stackoverflow.com/a/61441207/2702894) that you may find relevant to your questions. If you have any more questions just open your own question. – GrahamTheDev Nov 27 '20 at 07:46
  • Thanks Graham. A changing URL either as anchor to a section on a page or a link to another page makes sense. I am assuming when you say modals you mean an icon that opens a menu rather than a login modal which is a submit button i.e. `type='submit`. I would have thought that semantics and visual appearance are equally important to achieve consistency. – Motivated Nov 27 '20 at 08:14
  • If I have understood you correctly an anchor is a link to a section on a page or another resource, a button (including a call to action) is an action that occurs on the same page and a submit button is an action to complete an intent. – Motivated Nov 27 '20 at 08:14
  • Buttons are used for JavaScript based actions or form submit (you don't normally need `type="submit"` if you use a button in a form BTW). A modal is simply a "window" that opens within the same screen, I was using it as an example of something you could activate (open the modal) using a button. You seem to have everything else. – GrahamTheDev Nov 27 '20 at 08:44
  • If buttons are used for Javascript actions, how is (3) valid as it's an anchor link? – Motivated Nov 28 '20 at 02:34
  • Not sure what you mean, where has JavaScript come from as we weren't discussing that other than in the context of a button? I would suggest having a read around anchors, buttons etc. Or ask a specific question on the site as the comments aren't the place to ask your own questions. At this stage I don't think I can offer much more guidance in this format as there are too many questions you have asked in one place to know which parts you are referring to. – GrahamTheDev Nov 28 '20 at 08:45
  • Thanks. I am attempting to clarify your answer and comments. In summary, my previous feedback was `an anchor is a link to a section on a page or another resource, a button (including a call to action) is an action that occurs on the same page and a submit button is an action to complete an intent`. You mentioned that buttons are used for Javascript based actions or a form submit. However in the answer to the original question, you mention that (3) is valid. That's the bit that's confusing. – Motivated Nov 28 '20 at 18:40
  • 3 is relevant to the OPs question, they wanted an **anchor that looks like a button**, in essence I was saying style an anchor to look like a button, however **behaviour wise** they were talking about an anchor. 3 is an anchor so I am not sure what you are on about with a button at this stage, there is no button in option 3, nor is there any JavaScript? – GrahamTheDev Nov 28 '20 at 20:01
3

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.

Adam
  • 17,838
  • 32
  • 54
2

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 comparison 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 compared 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>.
Angelosp
  • 171
  • 3