Reputation: 45
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
Upvotes: 4
Views: 153
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