CODEWITHSUNDEEP
htmlcssaccessibilitywcag
Meise2000
Meise2000

Reputation: 45

How to highlight accesskeys in a WCAG valid way?

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?

Upvotes: 4

Views: 153

Answers (1)

Andy
Andy

Reputation: 6188

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.

Upvotes: 2

Related Questions