Hiding a link keyword from the tab order

(Innes Zenati) #1

Matrix Version: 6.57.0

Looking at tabbing order and asset listings for screen readers.

How do we hide the keyword modifier for %asset name linked% from the tab order? This is wrapped in sr-only within an asset listing but the link is still appearing in the tab order.

We have tried wrapping the asset listing in sr-only tabindex -1 but the keyword still prints the link which appears in the tab order.

The reason we have done this is we have 2 asset listings, 1 is aria hidden and 1 is sr only so that we could properly call out the links in the screen reader.

Thanks

(Iain Simmons) #2

Hi @innesz,

You have a couple of options:

  1. Manually construct the hyperlink with the two separate keywords: <a href="%asset_url%" tabindex="-1">%asset_name%</a>
  2. Use keyword modifiers to update the HTML that Matrix outputs: %asset_name_linked^replace:href=:tabindex="-1" href=%

Personally, I’d go with the first, since it’s clearer and probably more future proof, even though the other is unlikely to change.

Hope that helps!
– iain

(Innes Zenati) #3

Superb, thanks Iain! That first option has worked a treat, thanks again!