Screen reader issue with tab blocks
My team and I have been exploring our content with the Apple Voiceover screen reader to learn how screen reader users interact with it. Today we happened upon an odd issue: in a Tabs block, the text of one tab included our company name followed by other words (DOCUSIGN USE CASE MAP TOOL). The company name was read letter-by-letter, and the remaining words were treated as words.
I did some research and learned that this can be a side-effect of using the CSS property text-transform: uppercase. I inspected the element in my browser and this is indeed how Rise formats the tab text. The proposed solution I found online is to add an aria attribute to the text to make it clear it's not an acronym, but obviously this is not something I can implement for my content within Rise.
Is mitigating this issue on your accessibility roadmap? Or do you have other suggestions for making this content available to our users who use screen readers?
More info on the issue here: https://www.stefanjudis.com/today-i-learned/text-transforms-affects-screen-readers-too/