Proposal - optional role for <a> to indicate if it is a ‘call to action’ to a screenreader user

Not sure if this is in the right place… however.

For a sighted user, a visually prominent ‘call to action’ hyperlink in a document is normally created following the principle of Fitts’ law (ie: targets that are larger and closer to the pointing device are easier to hit than ones that are smaller and further away).

Large, colourful with enticing text, it’s pretty clear to a sighted user what the primary call to action on a page would be.

There is no equivalent of a call to action link for a screen reader user, as all links are given equal weighting in a rotor (VoiceOver) or list view (JAWS / NVDA).

In usability studies with screenreader users I’ve observed in documents with multiple links it can be difficult for users to determine what the primary or secondary call to action is (there’s a similar thread on a webaim mailing list).

In the interests of providing an equivalent user experience, perhaps adding an attribute to the native <a> might work, or maybe use of WAI-ARIA could plug a semantic gap where HTML cannot facilitate.

I’d like to propose a semantic role could be applied to a hyperlink to programmatically determine if it is the primary or secondary call to action in document.

Maybe a little bit like this.

Primary:

<a href="tickets.html" role="calltoaction" aria-level="1">Buy tickets</a> Secondary:

<a href="contact.html" role="calltoaction" aria-level="2">Contact</a>

I think, it would be useful to establish what good solutions or workarounds for this exist using ARIA today.

Does ARIA define anything for indicating priority? Do screen readers (and other AT) have features for performing the main actions on a web page?

For instance, on this page, the main action is the blue “Reply” button. What can this web page do with HTML and ARIA to identify this button’s importance and special role?

Well, you could do something like this…

 <a href="foo.html" aria-label="Buy now (primary call to action)">Buy now</a>
 <a href="foo.html">Buy now <span class="visuallyhidden">(Primary call to action)</span></a>

.visuallyhidden { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; }

And both are a bit web 1.0 and fudges.

To answer your questions

As far as I am aware, ARIA doesn’t have a means to indicate priority. The closest we would have would be the aria-level attribute which is used for defining a heading structure or the level of a list item within a list.

Screen reader users sometimes obtain an alphabetically-organised list of links, or a list in the order of which the links appear in the document.

Each link will have the same priority.

Another useful feature is the ability to obtain a list of the document landmarks (image) to allow a user to jump quickly to the respective page section. It would be desirable to show a call to action in a similar way to assist with the proverbial signal to noise ratio on larger pages.

I suppose a possible workaround would be to use aria-roledescription which would augment what would be announced by a screenreader…

eg : <a href="foo.html" aria-roledescription="primary call to action">Buy now</a>

So, this would be announced as ‘Primary call to action, Buy now, link’ - which is good as it’s not web 1.0.

However, if we go back to think about Fitts’ law in an analogous way, this isn’t changing the findability of the link, just the computed text value.

Ideally a call to action link should be very clear at the top of the links list of the screenreader, or maybe displayed in the document landmarks list…

having something specific just for “call to action” seems short-sighted. some more generic way of indicating levels of prominence/importance would seem more appropriate, and future-proof, to me.

Yeah, I’d agree it’s maybe a bit too specific, but certainly having granularity to the relative importance of hyperlinks would be useful in some use cases for sure.

granularity can come from context (i.e. what the prominence/importance attribute is applied to). by going for a more generic attribute, you avoid having to reinvent the wheel (or creating lots of redundant roles) when you go beyond “call to action”. for instance, what about a page with various elements to trigger actions, but one of these buttons is the “primary”/“main” action while the others are ancilliary? you could say “oh well, in that case you can also add role=‘call-to-action’ or whatever there” but then you’ve already painted yourself in a naming corner and having to retrospectively define that even though you say “call to action” the term applies to anything important/primary…

in short, keeping it generic makes it far more applicable. AT can then work out how they want to best expose this (for instance, having a rotor setting, list, announcement, hotkey, whatever to say “show me/jump to all important links, all important buttons, all important elements in general, etc”)

keeping it generic makes it far more applicable. AT can then work out how they want to best expose this (for instance, having a rotor setting, list, announcement, hotkey, whatever to say “show me/jump to all important links, all important buttons, all important elements in general, etc”)

Yup - that’s it in a nutshell.

I think role should be avoided because it would replace / override any extant role. For instance, you may have a link that’s important/call-to-action and a button that’s important/call-to-action but they’d both just be communicated as “call to action”, removing the original role and expected behavior.

Perhaps a property would be better e.g. aria-important="true" or similar.

Yes, agree - that makes sense, thanks Heydon.