Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

150
Views
Accessibility of html elements that change innerHTML using Javascript

I have this number credibility counter on my site that as the user scrolls, the headings with numbers count upwards from zero to the final total. I think it's an eye-catching way of showing off credibility, but as far as accessibility goes, I don't know if dynamically changing the numbers with JavaScript will confuse people who use screen readers. I thought about adding an "aria-labeledby" attribute to the heading so that the screen reader will read that instead of the dynamically changing text, but all of my google searches say that headings don't need aria labels, because screen readers will read the text inside the heading tags.
My question is if I add an "aria-labeledby" attribute to the heading, will that mess up how screen readers read the element?

about 4 years ago · Juan Pablo Isaza
1 answers
Answer question

0

You normally don't need to do anything special. Given that JavaScript is supported in the user's browser, the text of the heading will also change dynamically for screen readers, too.

That dynamic change in content may be problematic for screen readers if it isn't reasonably expected. More especially, for example, when something currently being read is suddenly replaced by something else or completely deleted without user intervention. A common case of this is a carousel with content that changes every few seconds. Such carousels are usually bad for accessibility if they can't be easily stopped because of this reason among others.

However, in your case, for a simple counter, it's probably all right. There probably won't have much harm.

Attributes aria-label and aria-labelledby can only be used reliably with interactive elements that can be focusable. ON non-interactive elements, it isn't guaranteed to have them read on all platforms/browsers/screen readers. So, it's anyway not a good solution here.

about 4 years ago · Juan Pablo Isaza Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!