Landmark tagging for screen reader accessibility

General Help
1

I’ve recently had a course put through an accessibility test and it flagged that components like open input and links have a “complementary” tag rather than a “main” landmark tag. This isn’t ideal when a link is being used as a main navigation button to go to another page.

I was totally ignorant to the existence of these tags until this test, so I did some research. Since this is controlled in the html of the website itself, and I dont see any obvious settings in evolve, is this something that I can edit/control?

2

Hi Lauryn, I’m going to follow this conversation.

Many thanks,

Barry

3

After further looking it seems this might’ve been fixed in a recent update for links component, but its still present in the open input component

4

Hi @LaurynS the only time I can see a ‘complementary’ role being added to anything in Evolve is on a Block when it has an ARIA label set.

This does seem an odd use of that particular role - I will investigate and remove if it’s not there for a good reason.

2 Likes
5

Thank you so much! That has resolved the issue, I didn’t realise there was an aria label sitting in the block. Good to know how evolve implements those tags.

1 Like
6

No problem!

Digging into the code it looks like it will apply ‘article’ to an Article with an aria-label, ‘complementary’ to a Block with an aria-label and ‘region’ to a component with an aria-label.

It was already on my list to review the use of ‘region’ next time I do some more work on accessibility, I’ll make a note to check the other two as well.

3 Likes