WebAIM - Web Accessibility In Mind

E-mail List Archives

Buttons and links: navigating a mixed list

for

From: Nick Bromley
Date: Aug 24, 2023 5:21AM

I'm auditing a kind of LMS and one page shows available resources of varying
file types. Each resource is presented as a UI control coded as an <a>
element but with role="button". Activating the control either:

* launches the resource directly if it is an embedded HTML-based
activity
* prompts to download the resource if it is an Office file, PDF, or
audio file

So for these role="button" is suitable, although ideally they would be
refactored as proper <button> elements.

But there are a few resources that are links to external websites, and while
these should ideally be modified to be proper <a> elements, this would then
mean the resource listing is a mix of different UI controls. That's OK for
most users, but iOS VoiceOver / Android TalkBack users could easily miss out
on some of the resources depending on what setting they are using to
navigate (either Buttons/Controls or Links). It's not the first time I've
though that an 'All interactive elements' option for mobile screen readers
would be beneficial.

So I was curious if anyone has encountered this issue before and/or has an
elegant solution. I've considered adding some explanatory text somewhere,
but it's tricky finding a suitably noticeable but logical location.

Or perhaps I'm overthinking this and should trust that the site users use a
bunch of different navigation approaches. Of course, user testing would help
but that's proving difficult to arrange with the client.



- - -

Nick Bromley

Director & Accessibility Consultant

Red Kite Digital Accessibility Ltd