Forum Discussion
WCAG Accessibility and Truncated Text
In a couple of the components, Button Stack and Tabs, longer text labels are truncated and then appended with "...". There are a couple of issues with this approach.
1) The "..." is three period characters and not an ellipsis, therefore JAWS screen reader will read each character "dot dot dot".
2) Sometimes when the labels are truncated, they become difficult to understand. I also have an example, attached, which replaces the missing characters "ty" with "..." and therefore is replace with three characters rather than the two missing.
I think both of these components could be improved by adding an aria-label to the buttons that includes the full, intended label that the author has written in the authoring tool.
I think they should also be improved for non-visually impaired users, and display the full title of the button on :hover and :focus.
Hi there, Sam. Thanks so much for bringing this up. I'm seeing the same problem when I test a screen reader with truncated text on a tab or button in Rise. I'm going to share this issue with our team who manages accessibility improvements, and we'll send you an update if we make progress on this!
Curious if there's been an update on this? Thanks.
Hello!
We fixed this issue where screen readers are not reading the full tab/button text when texts are truncated. You should no longer run into this issue with your Rise 360 courses.
Let us know if you run into any further trouble with this!