Counter block. Final number not available to screen readers.
-
Hey
Thank you for sharing these great blocks with the community, its very appreciated.
I was wondering, would it be possible to modify the Counter-code a bit, to accommodate users with screen readers?
The challenge is, that the initial value, starts with 0, and counts up when scrolled into view. However, people with screen readers, only hears the initial zero.
Existing code sample:
<div class="wp-block-getwid-counter"> <div class="wp-block-getwid-counter__wrapper" data-decimal="," data-decimal-places="2" data-duration="2" data-easing-fn="outCubic" data-end="16.56" data-numerals="default" data-separator="," data-start="0" data-use-easing="true" data-use-grouping="true" style="text-align:center"> <p class="wp-block-getwid-counter__prefix">Efter</p><span class="wp-block-getwid-counter__number has-text-color" style="color:#1b5e20">0</span> <p class="wp-block-getwid-counter__suffix">Kg CO<sub>2</sub> ?rligt</p> </div> </div>
I was thinking, maybe the initial value could be the final value and this available to screenreaders (and seo), being replaced with 0 and counting up when scrolled into view. Or the final number could be hidden visually (but there for screen readers), and the counter visible but hidden for screen readers using aria labels maybe?
I’d love to use blocks on my site making it a little more interesting, but I also need it to be accessible.
Any suggestions are greatly appreciated.
Bjarne
- The topic ‘Counter block. Final number not available to screen readers.’ is closed to new replies.