Giters

alphagov / govuk_template

❗️GOV.UK Template is deprecated, and will only receive major bug fixes and security patches. A template containing the GOV.UK header and footer, and associated assets.

Home Page:https://alphagov.github.io/govuk_template/

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Hidden logo image causes issues when testing with pa11y

fraser-sprott opened this issue · comments

commented

After running pa1lly tests, it highlighted that there was an issue with an image being set to ignored by screen readers.This is due to the hidden image that is on the header logo, which only appears to be there to add some spacing.

If this image is removed, and padding added to the #logo of padding-left: 41px and padding-top: 4px this gives the same appearance but doesn't rely on a hidden image and the pa11y test's run fine.

I did make the code changes locally but I had issues trying to get the dependencies i needed in order to run the tests locally.

commented

Thanks for reporting this!

The image in the header is visible but only when printing - this is because print media typically excludes background images, and when printing we want the inverse image (black crown on a white background). Without the image there, printed pages would not have a crown.

What is the issue that pa11y is reporting, and do we know that it actually causes issues for screen reader users? Given the crown is decorational, I would expect it to be ignored by screen readers.

commented

Thanks for responding

The issue it says is
Img element is marked so that it is ignored by Assistive Technology.
WCAG2AA.Principle1.Guideline1_1.1_1_1.H67.2
(select with "#logo > img")

For what we can see it is just that hidden tag that raises this. I never considered about printing the page and the appearance of it.

If that's the case then would marking it as visually-hidden be better? the empty string is fine but it's just the tagging. Alternatively would it be possible for the hidden image to be included when the page is being printed. My knowledge with css is limited

commented

Is pa11y definitely reporting this as an error, or is it just raising it as an advisory / FYI?

As far as I can tell, marking the image so that it is ignored by Assistive Technology is exactly what we want to do here, so I'm not sure what pa11y is trying to tell us.

commented

It's marking it as a warning but currently we are trying to remove all the warnings from the pages.

I know that the tag does have a media attribute. Using this would allow the image that comes with css to be moved to the html.

commented

WCAG2.0 H67 is a technique for marking images so that they can be ignored by Assistive Technology - which is exactly what we want to do here.

It states:

If no title attribute is used, and the alt text is set to null (i.e. alt="") it indicates to assistive technology that the image can be safely ignored.

The tests for this technique are:

  1. Check that title attribute is either absent or empty.
  2. Check that alt attribute is present and empty or contains only whitespace (but not  )

The HTML we are using for the image is:

<img src="/govuk_template/assets/images/gov.uk_logotype_crown_invert_trans.png?0.23.0" width="36" height="32" alt="">

So both of these tests should pass for this element.

I think that pa11y is flagging this so that you manually verify that it is appropriate for this image to be marked so that it is ignored by Assistive Technology - as it is not able to understand what the image is meant to be doing it can't tell you for sure whether it is correct or not.

I am confident that in this case the image should be ignored by assistive technology, and so the element is marked up appropriately, and so the correct action is to ignore the warning.

I think I will create an issue with pa11y because I think this would be categorised as a notice, with suitable guidance for checking that the implementation is valid.

commented

Fair enough, that makes sense.

Should we close this issue or leave it open till the pa11y issue is resolved?

commented

If you're happy I think we can close this – if you are interested in the outcome of the pa11y issue I'd suggest subscribing to notifications on that issue.

If you do find any further related issues please do feel free to re-open.

Thanks again for reporting – it's great to see people taking accessibility seriously 👍

commented

They closed it as apparently warnings are supposed to mean that you should always manually check the results. I don't think that's very clear, but if you read "warning" as "manual check", then the message makes sense.
That also means that "trying to remove all the warnings from the pages" is not a good idea. Going through all warnings and checking if they need actioning is what warnings should trigger, but not trying to "fix" them all because a lot of them might not need fixing.