Tagged: accessibility, animated numbers
Depending on the screen reader, the numbers themselves are either skipped, or read as the starting number.
Tested with JAWS, NVDA and on Firefox with the Read Aloud extension.
NVDA worked properly, but only in a situation where I scrolled down to the section and the animation had concluded before the reader read that section. If that section had not been displayed (because the screen reader doesn’t scroll the page, it reads out “Zero Zero Point Zero Percent.”
So to replicate the issue you would want to have a full height color section at the top of the page to push the animated numbers down.
Hey davidkfry,
Thank you for the inquiry.
Please try to edit the enfold/config-templatebuilder/avia-shortcodes/numbers/numbers.php and look for this code around line 878:
$replace = '<span class="avia-single-number __av-single-number" data-number_format="' . $number_format . '" data-number="$1" data-start_from="' . $atts['start_from'] . '">$1</span>';
Replace it with:
$replace = '<span aria-label="$1" class="avia-single-number __av-single-number" data-number_format="' . $number_format . '" data-number="$1" data-start_from="' . $atts['start_from'] . '">$1</span>';
We just added the aria-label attribute with the actual or final number as value. Let us know if this helps.
Best regards,
Ismael