I just tested a course using NVDA screen reader with multiple graphic components - where the image is decorative so has no alt text, also has no text in the component title or description, as its displayed next to a text component.
The screen reader reads these images as “blank”. I’m certain that previously these would be skipped completely. I’m aware of the fact that paragraph returns are read as “blank” inside text components, so I checked that there was no extra spaces left over in the graphic component text areas.
I confirmed in this thread that leaving alt text field empty should cause the screen reader to automatically skip the image. I tried adding “” to the field anyway to see if that helped but it hasn’t. I’ve checked other courses and this seems to be universal. It only happens for Graphic component and not background images or header images.
Again, I can’t seem to remember running into this issue before but I could be wrong, anyone else notice this?
That’s odd. Will take a look - but obviously there is the likelihood that it’s a bug in NVDA not Evolve…
Note that background images will always be skipped because they are added via CSS (as opposed to an img tag) so there is no way to make them screen-reader accessible.
And when I test using VoiceOver for macOS the image is skipped completely.
Maybe double-check you haven’t accidentally enabling ‘graphic text’?
If you haven’t then I suspect it’s a bug in NVDA. Unfortunately I’m on a Mac so can’t test it myself but honestly there isn’t much I can test since I can quite clearly see from the source that everything is set up correctly…
Maybe give Windows Narrator a try and see if it works OK with that?
I realised I was using an outdated NVDA version, but updating hasn’t changed anything - still reading “blank” on any graphic. It doesn’t do this on Windows narrator however.
Not sure what to make of this, other than it’ll probably get a little annoying for NVDA users! I can look into reporting it to NVDA
I was just about to say it does not happen when using Windows narrator.
Just so you know, if you use a combined ‘Text and Graphic’ component, rather than seperate Text and Graphic components, the issue does not occur. Not sure why though, but @Matt_Leathes might be able to work it out
While we are on the subject of ALT text, NVDA no longer reads out the ALT text in Flowcharts.
In the past, I found it might be skipped especiallty if the image was set to appear on the righ-hand side of the component item. So I always set them on the left if I needed the ALT to be read, but more recently, it is not read out at all.
I use the fact that it works perfectly in Windows Narrator as a way of getting around the issue, but if it could be fixed for NVDA, that would be amazing @Matt_Leathes.
Just so you know, if you use a combined ‘Text and Graphic’ component, rather than seperate Text and Graphic components, the issue does not occur.
Hi @BarryBPS thanks that is an interesting bit of info.
I suspect it’s going to be down to the fact that the graphic component wraps the img tag in a figure element but the text and graphic component does not.
I’m not normally in favour of changing something just to suit one screen reader BUT I can see an argument here to say it’s a bit odd to use a figure element to wrap an image that’s entirely decorative so I’m going to give this a try and if it fixes the issue and doesn’t cause any other problems I’d be happy to change it.
While we are on the subject of ALT text, NVDA no longer reads out the ALT text in Flowcharts.
I have absolutely no idea why that should be. The image is clearly present and clearly has alt text assigned. I can’t see how the position of the image could make any difference since it’s positioned purely using CSS. We actually just had this component audited by OnlineADA and they didn’t flag any problems with it.
OK so having done a bit more investigation I think it’s just down to the fact that the graphic component is contained within a div which has its tabindex set to -1.
Unfortunately that’s not going to be easy to fix - all components (and articles & blocks) within Evolve need to have a tabindex of -1 set so that if you create an internal link to a component, Evolve is able to set focus to it when the learner clicks the link to navigate to that component…
(this is because you can only programmatically set focus to a DOM element that has a tabindex - and if you only ever want to set focus to it programmatically i.e. not allow the user to tab to it, you set it to -1)
That said I will have a think about whether this is something that can be handled better
Hi Matt, I’m getting this ‘blank’ issue even when the image has Alt text applied to it!
This happens for me when using NVDA only.
I’ve uninstalled and reinstalled NVDA. I’ve switched off all my Extensions in Chrome. I’ve tried it in Edge too, but I (almost always) get ‘blank’ read by NVDA instead of the Alt text.
When I say ‘almost always’, sometimes it will read the Alt text the first time you launch a preview or run a publish version. Then, if you refresh it, or launch it again from scratch, it will only say ‘blank’.
I’ve submitted a ticket for this, but your colleagues who are dealing with it say they can’t replicate it. Any help would be appreciated.
When I was testing this issue using NVDA I had two graphic components on the page and the one that had alt text always got read out just fine… But if you want to DM me a link of this happening I will take a quick look - but it may well just be a bug in NVDA…which, as you can see, does have quite a few known issues
And I have to say most accessibility issues we get these days are specific to NVDA i.e. don’t happen in any other screenreader.
@NickEastham So, assuming it’s the course that relates to a british corporation with the number ‘4’ in the name then I have tested it using NVDA 2023.3 in Chrome v120 on Windows 10 Home (Build 19045.3803) and can’t replicate the issue - it always reads the alt text for me. I went back and forth through the page several times - it always worked.
@BarryBPS@LaurynS regarding the graphic-with-no-alt-text issue - I have added a fix that prevents a tabindex of -1 from being added to any Graphic component that has no:
display title
body text
instruction text
component aria label
graphic alt text
graphic caption
graphic text
This seems to have resolved the issue.
Just to mention: we’re not normally in the habit of putting in place workarounds to correct the misbehaviour of a single specific screen reader - but since there’s no need for the component to have a tabindex (as creating an internal link to a ‘decorative graphic’ would be terrible accessibility) I’m happy to make an exception in this case.
The fix will be included in the next release of Evolve - which will likely come out in January 2024
I’d resigned myself to just accepting NVDA and its flaws or maybe trying out another screen reader given we’ve ran into a few issues with it interacting with Evolve.
great news.