My team is publishing a microlearning using Rise and our web team has identified a couple accessibility issues I am hoping someone can help me with. This microlearning has users select from a choice using the button stack block. The button itself just says "Go".
Our web team would like us to add additional aria-label text on these buttons to describe where the link is taking them. Is this possible? Any guidance is appreciated. Thank you!
Thanks for your response. We have used the text area to the left to describe where they are going, however for a screen reader user (non-sighted person) is where we have the issue. The screen reader just reads the button as Go and doesn't distinguish it from the next sections Go button. There are three buttons in our button stack.
Having the ability to have aria-label text on that button would give further info to those screen reader users to understand where they are going.
Hi Nicole, thanks for sharing your thoughts on this accessibility issue. It isn't currently possible to add aria-label text on a Rise button stack but we'll let you know if we make changes that will help!
We've recently had an Accessibility review done. They also raised the RISE buttons issue (eg. Home and Lesson #.... with up and down arrow icons) - this information is not being communicated to screen reader users because the icons don't have alt-text.
Lea, is there any update on when it will be possible to add aria-label text on the button stack? Or any workarounds in the meantime?
Hi there, Learning and Development Team! Would you mind sharing a fullscreen screenshot of the "Home and Lesson #.... with up and down arrow icons" that you're referring to?
Also, can you share more about what happens when a screen reader announces a button stack in your course? The screen reader should read the text on a button and announce that it's a button or a link, depending on the button destination. Here's a screen recording of how the screen reader announces a button stack from my side.
5 Replies
Hi Nicole,
The label for every button block is editable and can accommodate 18 characters if using the Lato font.
Use the text area to the left of the button to describe where the link is taking them.
Hi Karl,
Thanks for your response. We have used the text area to the left to describe where they are going, however for a screen reader user (non-sighted person) is where we have the issue. The screen reader just reads the button as Go and doesn't distinguish it from the next sections Go button. There are three buttons in our button stack.
Having the ability to have aria-label text on that button would give further info to those screen reader users to understand where they are going.
Nicole
Hi Nicole, thanks for sharing your thoughts on this accessibility issue. It isn't currently possible to add aria-label text on a Rise button stack but we'll let you know if we make changes that will help!
We've recently had an Accessibility review done. They also raised the RISE buttons issue (eg. Home and Lesson #.... with up and down arrow icons) - this information is not being communicated to screen reader users because the icons don't have alt-text.
Lea, is there any update on when it will be possible to add aria-label text on the button stack? Or any workarounds in the meantime?
Hi there, Learning and Development Team! Would you mind sharing a fullscreen screenshot of the "Home and Lesson #.... with up and down arrow icons" that you're referring to?
Also, can you share more about what happens when a screen reader announces a button stack in your course? The screen reader should read the text on a button and announce that it's a button or a link, depending on the button destination. Here's a screen recording of how the screen reader announces a button stack from my side.