Do I need to add Aria to dynamically loaded JSON

I’m loading JSON data onto my page, and displaying it on load.
For the rest it does not change.
Do I need to add anything Aria to this to make it accessible?

My code so far

<article class='row '>
		        <section aria-labelledby='your_results' aria-label='Test results score.' class='col-xxl-6 d-flex flex-column align-items-center justify-content-center'>
				    <h1 id='your_results'>Your Results</h1>
					<div id='circle' class='score d-flex flex-column justify-content-center align-items-center'>
						<span>of 100</span>
					<p>You scored higher than 65% of the people who have taken these tests</p>
				<section  aria-label='Score breakdown.' class='col-xxl-6'>
				    <div class='results'></div>
					<button class='btn btn-primary'>Continue</button>
async function displayData(){
	const data= await(getJson());
	const results= document.querySelector('.results');
	data.forEach((element) => {
		//empty alt for aria as are decorative img
	    results.innerHTML += `<p><img alt='' src=${element.icon}> ${element.category}    ${element.score}</p>`;

I’ve been reading the documentation, but it’s just so vague all.
Is this Aria live ? I don’t think so reading the documentation as it’s not just a section changing on user input.


I would need to see the entire finished product before I could give you an acceptable answer. But since you mentioned that this data is being fetched on page load then my gut says that you don’t need any aria here.

<section aria-labelledby='your_results' aria-label='Test results score.'

Having both of these attributes is unnecessary. It’s either one or the other. aria-labelledby will win out, so the aria-label does nothing.

And do you really need to turn those sections into landmarks by giving them accessible names? I don’t know for sure. Again, I would need to see the finished product. But having too many landmarks on the page sort of defeats the purpose of using landmarks in the first place.

1 Like

Thanks. Yes, I did read at W3 either aria-label or aria-labelledby. I remember now.
To my feeling ‘more aria is better’ , but it’s all so vague. It’s very frustrating to try to learn something that’s vague.

Any tips? Thanks

This is usually not the case. Only use aria when necessary. In fact, the First Rule on ARIA Use in HTML basically says it is better to avoid using aria whenever possible.

So I would change your feeling to “use the least amount of aria possible and only when necessary.”

I agree, accessibility is often not black and white, but that’s because there is often not one correct way to make something accessible (if you even can make it truly accessible). With a programming language there are very strict rules that you must follow to make a computer do something. But accessibility is about people, not computers, and people are much more complex than computers, so the “rules” governing accessibility are often a little more hazy and constantly being refined.

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.