Forum Discussion
Custom Blocks Accessibility
Hello. I am testing out custom blocks in Rise, and after adjusting the focus order of a custom block, I cannot tab to the custom block and have the screen reader read the text. Has anyone else experienced this?
12 Replies
Hi, LeeMillardButlr,
Thanks so much for reaching out!
Could you share which custom block template you’re using and which screen reader you tested with? I created a sample custom block (Introductions > Table of Contents), and was able to tab to the block, and use the down arrow for NVDA to read the text. If you're able to describe your set up or share a screen recording, I'd be happy to take a closer look!
Hi KellyAuner
I'm also having the same issue and came across this thread. I'm using the custom block > blank template and designing my own (Text and shapes).
My Rise project is mainly custom blocks, along with a labelled graphic. I can tab from the top of the browser window (URL), and then it skips all of the custom blocks and goes straight to the labelled graphic. If I continue to tab, it skips all of the custom blocks after the labelled graphic and goes back to the top of the browser again.
Just to add - if I leave NVDA to run, it will read the whole page, including the text on the custom blocks. It appears to just be an issue with the keyboard navigation (for me). I can't navigate to the blocks - if that makes sense?Thanks :)
Hello KellyAuner and NishaAtkins ,
I did some further testing today with my colleague. It turns out that I believe it was user error on my part. I was also tabbing through, like Nisha, and it was only going to the interactive elements, such as buttons and links and videos. I found this helpful article and also this helpful article and these told me that I needed to use the VO modifer + left arrow and right arrow to access the text.
Thank you for your response, Kelly! I'm not sure how I missed this, so I'm sorry for my delay. I may be having a bigger problem with just understanding how screen readers interact with Rise courses, because I'm having a hard time haviing it read my text blocks. The tab key will move to each interactive object and the down and up keys will activate the scroll bar, but I'm not having any luck having it read the text.
Hi all, I’ve come across the same issue as above and was wondering whether there has been a fix for the same issue.
I have custom blocks throughout, but when tabbing through them, it skips to the next interactive button, e.g. the Continue button divider.
Current block set up is Canvas > Shape > Text and Icon Image. I've tried adjusting the focus orders etc to no avail.To replicate the issue: Place a introduction template custom block, then create blank canvas > place a shape > place a text box in the shape, then place a Continue divider and pop into preview mode - the behaviour when tabbing should detect the Introduction heading then skips custom block & tab's directly to the continue button.
Hope to hear from you all soon :)I hadn't noticed this until I read your posts. As someone said, tabbing should take you through the interactive elements on the page, such as buttons and links. However, I've just tested a course that uses custom blocks and tabbing goes to elements that are not interactive. This is incorrect behaviour. Is it a bug or is there a way to remove this in Rise?
Hi NickiBerry-21e6,
You are right, tabbing should only take you to interactive elements.I was wondering if the non-interactive element receiving keyboard focus is text on a fixed layout. If so, I suspect that the text may be scrollable. It could be very subtle. To verify, try editing the text and increase/expand the text container's height so the text fits comfortably and then try again.
Let me know how it goes!Cheers!
Marvie
Dear colleagues,
not working
I have tested my custom blocks (basically a text box with an image representaing a character telling something in speechbubble) with NVDA screen reader and it refuses to read the text. Althoug I have given alt-text to the image, that information does not seem to be accesible to NVDA. Funny enough some other blocks work.Funny enough some other blocks work.
Working custom block, where the text is read.If anyone has hints on how to systemtically render custom block text and alt-text for images in custom block accessible to screen readers (NVDA) - I am a taker of this advice. Many thanks.
Hi StefanKM,
I appreciate you sharing both examples. Having one custom block read as expected while another is skipped makes it harder to know what setup to use consistently.
Custom blocks include accessibility tools for focus order and alt text, though they’re still being improved. In general, text should be available to screen readers, including text inside shapes. Meaningful images need alternative text, and the Focus order panel lets you set the screen reader order separately from the visual layout. Our custom-block accessibility guide explains these settings.
A good starting point is to keep the speech bubble text as editable text, add descriptive alt text to meaningful character images, and arrange the objects in a logical focus order. When testing static content with NVDA, use Browse mode and the arrow keys rather than relying on Tab alone, since Tab moves through interactive elements.
To better understand why your two examples behave differently, could you confirm a few details?
- In the block that isn’t read, is the visible text a separate text object, text inside a shape, or part of an image?
- Could you share screenshots of the Focus order panel for both blocks, including the image alt text and any groups?
- How are you navigating with NVDA, and are you testing in Preview or published output?
- Which browser and NVDA version are you using?
These details will help us compare the two setups and determine whether the unread content needs a closer investigation.
Hi JMManalili,
here are the focus order screen shots of the two custom blocks. You can acces the examples under the EU server.
https://share.eu.articulate.com/nJITmcuGjACp3l2OMSxeP
This one doesnt't read.
This one does.
