My accessibility tester has noticed that ARIA labels are getting read out by her screenreader (NVDA) before any of the on-screen text is read. This is confusing, because the ARIA text is usually instructions for an activity, and makes no sense if read out first.
Looking at the HTML, I can see that the aria-label attribute gets added right at the top of the component, which probably explains why it is read out first. Should it not be added to the div labelled “ev-component-instruction-inner”? Then I assume it would be read out along with the on-screen instructions.
Also, is this something that has changed recently? We never used to have this problem.
The reason it’s placed where it is is so that the entire component gets labelled and the label get read out whether you’re navigating to the component forwards or backwards.
I’ve checked back through the history of the code and it has always been placed like this.
I should also note we just had the results from our annual accessibility audit back from https://onlineada.com/ and they haven’t flagged this as being an issue… it wasn’t raised in last year’s audit either.
OK thanks Matt. Very odd that it hasn’t come up before.
Interested to know if anyone else has had any problem like this. I can’t really see how it’s usable if it behaves this way, but I expect I’m missing something important.
Hi Davey, this was a source of debate among my organization too because at first we thought this was unhelpful, especially if you have lots of body text in between the ARIA and the interaction.
We started separating the body text into a text component above the interactions, and leaving the interaction body, title, etc empty. However its not possible to do this for all components like MCQs and Open input - where the question needs to be inside the component to be tracked correctly.
We decided ultimately that its better to keep everything contained. The aria label coming first helps give context to what’s coming up and like Matt pointed out, supports navigating back and forth. It might be helpful to know that some components have an additional field - like the MCQs have “answer group aria label” which is read after the instruction/body text. It might be handy to use this instead or split up the aria instructions between two fields.
Thanks Lauryn, that’s really helpful and interesting. I ended up splitting the body text off into another text component, as you describe. I suppose another way would be to rephrase the aria label somewhat so it’s less confusing when it is heard ahead of everything else.
NVDA used to be my chosen screen reader for testing and I would recommend it to be used, but it seems to be acting up recently for myself and our QA team.
I’ve started a thread about the issues I’m having here:
If you don’t mind taking a taking a look and letting me know if you’re experiencing anything similar, I would really appreciate it
In the meantime, I’ll also test with JAWS and an older version of NVDA.
Just thought it might be useful to know for yourself and any future visitors to this thread, splitting the text out of an interaction into its own component can have unintended consequences for the heading tags.
If the component has Item titles, they might use the same heading tag as the component title, because they are treated separately. I think this would be a failure for logical reading order. Something I hadn’t noticed until recently!
Hi @LaurynS
Can you tell me which component you are having that issue with? I have tried the narrative and text narrative but the heading hierarchy is working fine for me. Are you using page, article or block titles too?
Cheers-Sam
Hi Sam, Its not an issue I’m having - just responding to a workaround discussed earlier in the thread. The workaround of seperating title/body text into its own block has unintended consequences for the titles inside the interactive component. Ive tested this and seen its the case with all interactive components. If its in its own block, it seemingly takes the same heading tag as the component title.
Page title - h1
Component title - h2
Component item title (when in a separate block) - also h2
no block or article titles.
