Aria attributes for JavaScript added content
I have a project where the results of a form submit is added to the DOM. I'm using mostly
createTextNode and append to add text to h3 and span elements. Should I add aria attributes to those elements, and if so which one(s)?11 Replies
no
That was fast - ok, thanks
best aria is no aria if you are not sure too. Long as you heading levels are right it will be read out, if it needs to be a label of its parent you would need an id="name" to do
aria-labelledby="name" on the parent section/article.
spans like p, will be read as needed.
So my bigger concern would be if you are using h3 properly 😄The h3 are the card headers where the text is added. So screen readers will read the content AFTER the content is added?
Does the page also have h1 > h2's?
yes
I'm not sure how that works you will have to test it
It should read anything that is on the page so, but I'm not sure how you are adding it.
A submit button in a form element and then the JavaScript methods I mentioned above.
Best thing is to just test it. Open up a screen reader and suffer through the pain.
Knowing how it reads out Headings/links/regions/landmarks is handy to know but also how it makes lists of those things to navigate too
ok thanks
@Kernix check with a screen reader like NVDA or VoiceOver if your content is properly announced.
If not, you may need to mark the parts where you insert the content as a "Live Region" so the AT at lease knows where stuff might change after the page was loaded and rendered
https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Live_Regions
ARIA live regions - Accessibility | MDN
Using JavaScript, it is possible to dynamically change parts of a page without requiring the entire page to reload — for instance, to update a list of search results on the fly, or to display a discreet alert or notification which does not require user interaction. While these changes are usually visually apparent to users who can see the page, ...