# Position of ARIA labels

**URL:** <https://community.evolveauthoring.com/t/position-of-aria-labels/3250>\
**Category:** General Help\
**Tags:** accessibility\
**Created:** [October 22, 2024, 11:56am UTC](https://community.evolveauthoring.com/t/position-of-aria-labels/3250 "2024-10-22T11:56:16Z")\
**Posts on this page:** 10\
**Page:** 1

<div class="post-metadata">

**Author:** ![daveyboond](https://avatars.discourse-cdn.com/v4/letter/d/85f322/32.png) [@daveyboond](https://community.evolveauthoring.com/u/daveyboond)\
**Post date:** [October 22, 2024, 11:56am UTC](https://community.evolveauthoring.com/t/position-of-aria-labels/3250/1 "2024-10-22T11:56:17Z")

</div>

Hi,

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.

Thanks

Steve

---

<div class="post-metadata">

**Author:** ![Matt\_Leathes](https://yyz1.discourse-cdn.com/flex031/user_avatar/community.evolveauthoring.com/matt_leathes/32/586_2.png) [@Matt\_Leathes](https://community.evolveauthoring.com/u/Matt_Leathes)\
**Post date:** [October 22, 2024, 1:57pm UTC](https://community.evolveauthoring.com/t/position-of-aria-labels/3250/2 "2024-10-22T13:57:19Z")

</div>

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_.

> [@daveyboond](#):
>
> Also, is this something that has changed recently? We never used to have this problem.

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/](https://onlineada.com/) and they haven’t flagged this as being an issue… it wasn’t raised in last year’s audit either.

---

<div class="post-metadata">

**Author:** ![daveyboond](https://avatars.discourse-cdn.com/v4/letter/d/85f322/32.png) [@daveyboond](https://community.evolveauthoring.com/u/daveyboond)\
**Post date:** [October 22, 2024, 2:10pm UTC](https://community.evolveauthoring.com/t/position-of-aria-labels/3250/3 "2024-10-22T14:10:40Z")

</div>

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.

Steve

---

<div class="post-metadata">

**Author:** ![LaurynS](https://yyz1.discourse-cdn.com/flex031/user_avatar/community.evolveauthoring.com/lauryns/32/1967_2.png) [@LaurynS](https://community.evolveauthoring.com/u/LaurynS)\
**Post date:** [October 25, 2024, 8:09am UTC](https://community.evolveauthoring.com/t/position-of-aria-labels/3250/4 "2024-10-25T08:09:43Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![daveyboond](https://avatars.discourse-cdn.com/v4/letter/d/85f322/32.png) [@daveyboond](https://community.evolveauthoring.com/u/daveyboond)\
**Post date:** [October 25, 2024, 9:21am UTC](https://community.evolveauthoring.com/t/position-of-aria-labels/3250/5 "2024-10-25T09:21:17Z")

</div>

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.

Good tip about the answer group arias in MCQ!

---

<div class="post-metadata">

**Author:** ![BarryBPS](https://yyz1.discourse-cdn.com/flex031/user_avatar/community.evolveauthoring.com/barrybps/32/540_2.png) [@BarryBPS](https://community.evolveauthoring.com/u/BarryBPS)\
**Post date:** [October 30, 2024, 12:17pm UTC](https://community.evolveauthoring.com/t/position-of-aria-labels/3250/6 "2024-10-30T12:17:45Z")

</div>

Hi @daveyboond and @LaurynS

I hope you’re well.

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:

> [@Screen readers - Specifically NVDA and Narrator](https://community.evolveauthoring.com/t/screen-readers-specifically-nvda-and-narrator/3272):
>
> Hi all, Has anyone else found that NVDA seems to completely lose focus and can jump all over the place. When I move from the main menu to a topic it might start reading halfway down the page. Or after I have read an MCQ feedback and closed the dialog box, the focus does not return to the button that opened it. Neither of these issues occur using Windows Narrator. NVDA used to be the screen reader I recommended to use for Evolve, but I cannot do that at the moment. Windows Narrator works very…

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.

Thanks.

---

<div class="post-metadata">

**Author:** ![LaurynS](https://yyz1.discourse-cdn.com/flex031/user_avatar/community.evolveauthoring.com/lauryns/32/1967_2.png) [@LaurynS](https://community.evolveauthoring.com/u/LaurynS)\
**Post date:** [December 5, 2024, 1:38pm UTC](https://community.evolveauthoring.com/t/position-of-aria-labels/3250/7 "2024-12-05T13:38:49Z")

</div>

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!

 ![image](https://canada1.discourse-cdn.com/flex031/uploads/evolveauthoring/original/2X/1/1f2f71ddc5012c3d69ca687eb5741e63233fe3b9.png)

---

<div class="post-metadata">

**Author:** ![Sam\_Cook\_Evolve\_LQA](https://yyz1.discourse-cdn.com/flex031/user_avatar/community.evolveauthoring.com/sam_cook_evolve_lqa/32/902_2.png) [@Sam\_Cook\_Evolve\_LQA](https://community.evolveauthoring.com/u/Sam_Cook_Evolve_LQA)\
**Post date:** [December 5, 2024, 4:00pm UTC](https://community.evolveauthoring.com/t/position-of-aria-labels/3250/8 "2024-12-05T16:00:31Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![LaurynS](https://yyz1.discourse-cdn.com/flex031/user_avatar/community.evolveauthoring.com/lauryns/32/1967_2.png) [@LaurynS](https://community.evolveauthoring.com/u/LaurynS)\
**Post date:** [December 5, 2024, 4:18pm UTC](https://community.evolveauthoring.com/t/position-of-aria-labels/3250/9 "2024-12-05T16:18:53Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![Sam\_Cook\_Evolve\_LQA](https://yyz1.discourse-cdn.com/flex031/user_avatar/community.evolveauthoring.com/sam_cook_evolve_lqa/32/902_2.png) [@Sam\_Cook\_Evolve\_LQA](https://community.evolveauthoring.com/u/Sam_Cook_Evolve_LQA)\
**Post date:** [December 5, 2024, 4:21pm UTC](https://community.evolveauthoring.com/t/position-of-aria-labels/3250/10 "2024-12-05T16:21:26Z")

</div>

Ah apologies, I get it now - thanks.
