0

Can someone advise me if there is a specific WCAG 2.1 failure when buttons are used as links. Same question vice versa. Links as buttons.

I have a site i am working on where by design there are links that appear the same as the buttons do. So you may have buttons <button> like: Edit details - which takes you to a new page where you can edit items in the page where the "edit details resides". Continue - a button that takes you to the next page in a series of pages. But then have links <a> which appear as buttons, so the same style, but they are labelled select, select and selected and these are a product type, so do not link anywhere. Another example is the back link is a button<button> but looks like a link (text with underlined style)!

I know that this behavior confuses voice recognition as the user says click link or click buttonand not all objects get flagged that appear the same.

My question is does this fail WCAG2.1 specifically? Would this fall under 4.1.2 Name, Role, Value?

3 Answers 3

2

The 4.1.2: Name, Role, Value undestanding addresses the case of elements having different role than usual.

If custom controls are created, however, or interface elements are programmed (in code or script) to have a different role and/or function than usual, then additional measures need to be taken to ensure that the controls provide important information to assistive technologies and allow themselves to be controlled by assistive technologies.

3
2

As Adam already cited, "additional measures need to be taken to ensure that the controls provide important information to assistive technologies and allow themselves to be controlled by assistive technologies". So yes, this fails WCAG 2.1, unless you take measures to ensure that your button-links and link-buttons really work as they are supposed to for example that a <a role="button" […] can be triggered using the Space key.

If you really have accessibility in mind, don't mix <button> and <a> elements up. Not even if you think you are smart and add role="button" to a link or role="link to a button. You would have to do more than that to make them behave like each other (see MDN about the button role).
And even then you should consider this: links are for navigation, buttons for performing actions. If you have a navigational element that looks like a button, its behavior might be confusing (even if it has no role="button" attribute). Also note that the default value for a button's type attribute is submit ("The missing value default and invalid value default are the Submit Button state.").

Web accessibility should encompass all disabilities that affect access to the Web and there are a lot of possible disabilities – and having one disability does not necessarily mean a person has no other disabilities. The easiest step of making your website more accessible is to stick to the standards. Don't change an element's behavior unless you really have to (and even then: do you really have to?).

Update: General comment about WCAG and accessibility:
Web accessibility is also not just about simply conforming to guidelines like the WCAG. Even the WCAG itself does not claim that a website will be 100% accessible when conforming to it:

Note that even content that conforms at the highest level (AAA) will not be accessible to individuals with all types, degrees, or combinations of disability, particularly in the cognitive language and learning areas. Authors are encouraged to consider the full range of techniques, including the advisory techniques, as well as to seek relevant advice about current best practice to ensure that Web content is accessible, as far as possible, to this community.

Update: Examples of possible violations of WCAG 2.1 (with room for interpretation though)
Just letting links look like buttons and nothing could be failing:

  • Guideline 3.2 Predictable in general ("Make Web pages appear and operate in predictable ways.")
  • Success Criterion 3.2.4 Consistent Identification (unless all links look like buttons; the only actual success criterion in these examples)
  • 4. Robust in general ("Content must be robust enough that it can be interpreted by by a wide variety of user agents, including assistive technologies." & Guideline 4.1 Compatible "Maximize compatibility with current and future user agents, including assistive technologies." --> you already mentioned voice recognition and the possibility of not being able to target a link because it looks like a button)
  • Jonathan Pool wrote a blog article about this issue in which he points out another possible violation:

    Worst case: A button that takes an irreversible action ("Yes, I confirm that I am waiving my rights.") pretends to be a link, so the user tries to use SPACE or SHIFT-SPACE to scroll the page but unexpectedly presses the button. This, arguably, would violate Web Content Accessibility Guidelines 2.1 Success Criterion 3.3.4.

6
  • Thank you for adding your comments. Something still isn't clear. My question is does it matter is they are visually confusing. I would say yes in terms of cognitive and voice recognition users. If a link that navigates somewhere is a rounded cornered square with text in the square but a button also is a rounded cornered square with text in the square. Both programmed correctly for their purpose but visually confusing, can i, under WCAG2.1 say they must change that link to look like a link and not look like a button? Jan 25, 2020 at 12:38
  • i am happy with elements serving the purpose that they are designed for but its the styling guys i want/ need to steer and need to know that i can wave the WCAG stick at them when they are reluctant to change their design. Jan 25, 2020 at 12:38
  • essentially these guys seem to like using rounded squares as links but also for buttons. Jan 25, 2020 at 12:39
  • @user2007920 I've edited my answer. Regarding "stick[ing] [WCAG] at them" you should especially note: "Web accessibility is also not just about simply conforming to guidelines like the WCAG."
    – qutax
    Jan 27, 2020 at 11:43
  • 1
    A button that seems to be a link can be a violation of WCAG 2.1 Success Criterion 3.3.4, in addition to tthose mentioned above. See jpdev.pro/blog/entries/3. May 11, 2020 at 10:15
0

use role="button" that will work.

1
  • 1
    As it’s currently written, your answer is unclear. Please edit to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers in the help center.
    – Community Bot
    Aug 13 at 13:41

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.