'Unlabelled graphic' read out within header using NVDA

[36degrees]

From alphagov/govuk-design-system-backlog#97 (comment):

On reviewing the header https://design-system.service.gov.uk/components/header/default/index.html# in NVDA for Windows the png is declared as "Unlabelled graphic" (text from NVDA text viewer below)

Header – Example – GOV.UK Design System document
visited link
Unlabelled graphic
To get missing image descriptions, open the context menu.
GOV.UK

To make NVDA ignore the tag I'd suggest giving the a role="presentation" too as the same role attribute in the tag doesn't seem to carry through.

I've been able to reproduce this using Chrome + NVDA on Windows 10.

[NickColley]

Is this relating to the SVG that already has [role="presentation"] on it? I wonder if [aria-hidden="true"] has the same issue.

[36degrees]

As per the original comment, I think this might relate to the fallback png image. We'd need to do a bit of investigating to know for sure.

[NickColley]

It seems to be an accessibility feature on Chrome since you can right click then 'Get image descriptions from Google > Always | Just once'

When pressing 'just once'.

Now when I visit the logo it says the same message but 'Getting description...', but never succeeds.

When putting an empty alt attribute on the fallback image it stops the image from being detected for a description.

Changing role=presentation to aria-hidden=true also stops the image from being detected for a description.

My suggestion would be to always use aria-hidden=true when we intend for something to be removed from the accessibility tree as it also stops the children of the element from being shown.

[NickColley]

Here is the feature explained: https://support.google.com/chrome/answer/9311597?hl=en

[NickColley]

Using aria-hidden="true" will completely remove all elements, child elements, and content from the accessibility tree regardless of the default semantic nature and they will remain removed until the aria state is changed to false it functions in much the same way as CSS’s display:none. This is where it differs from role="presentation".

https://timwright.org/blog/2016/11/19/difference-rolepresentation-aria-hiddentrue/