4

With HTML 'accesskeys' there is an effective way to increase the user's operating speed. In desktop applications, a user is shown the available shortcuts by underlining a letter of the operation to be performed. Transferring this concept to web applications leads to conflicts with Web Content Accessibility Guidelines (WCAG) 2.0, Level A: 1.3.1 Info and Relationships.

<button onclick='javascript:alert("Click");' accesskey="C"><span style="text-decoration: underline;">C</span>lick</button>

or at CodePen. Testing this code snippet on tenon.io leads to an error referencing the WCAG guideline above. So the question is, how to highlight accesskeys in a way, that

  1. it is valid with respect to WCAG
  2. it is understood as an accesskey by the user?
m4n0
  • 29,823
  • 27
  • 76
  • 89
Meise2000
  • 45
  • 5
  • Good question. I’m wondering why Tenon is pointing to this success criterium. I think you did everything right, you provided a visual cue as to how to operate this button by keyboard, plus a “programmatically determinable way” by providing the `accesskey` property. I think you should contact Tenon to have them check that automated test. – Andy May 21 '22 at 12:09
  • You should even be fine for [2.1.4 Character Key Shortcuts](https://www.w3.org/WAI/WCAG21/quickref/#character-key-shortcuts), as the `accesskey` attribute does not implement a single character only shortcut. – Andy May 21 '22 at 12:12
  • 1
    According to WebAIM, “there is no standard way of informing users which accesskey shortcuts are available.” [On Accesskey by Web Accessibility in Mind](https://webaim.org/techniques/keyboard/accesskey#spec) – Andy May 21 '22 at 12:18
  • I have reported the suggestion to tenon.io support. Let's see what (and if) they answer – Meise2000 May 24 '22 at 07:43

1 Answers1

2

Tenon.io actually provides this explanation for the snippet:

The text in this passage has been styled to display underlined but it is not a link.

So this, actually, applies more to 3.2.4 Consistent Identification.

In the end, for an audit, there always is room for interpretation of WCAG’s success criteria. It will be up to the auditor to decide.

While tenon.io’s warning is helpful in most cases, in your case I don’t think it applies, as links with single characters as text are very rare. Additionally, the context of the button makes clear that this cannot be a link. Context over Consistency, as we say in UX design.

If you are motivated, you can reach out to tenon.io and discuss the subject with them, maybe leading to an improved rule.

Andy
  • 4,783
  • 2
  • 26
  • 51