img logo should have an empty alt - accessibility

[luce-carevic]

header.phtml

<img class="logo" src="<?php echo _i('icon', true); ?>" alt="⊚" />

The alternative must be empty here.

[Alkarex]

Hello @Llune
Could you please explain the problem you are facing?

[luce-carevic]

Hi,

The logo is a decorative image in this context.

The alt attribute will be read by a screenreader and it should not be in this context. Thus it should be empty alt="".

[Alkarex]

Yes, my question was more whether this is a theoretical issue, or whether there is an actual screenreader causing a problem with ⊚. What is the behaviour in your screenreader?

Having Unicode alternatives to images helps when images are not displayed, e.g. due to a preference, network problem, or when using a text browser.

Example without images:

Example in a terminal (the one I have there does not show all Unicode signs correctly, but that gives an idea):

[Alkarex]

It seems to me that it is not a good idea to use empty alt attributes. Instead, it is probably better to declare things correctly; in this case, something like aria-hidden="true".
Comments welcome.

[luce-carevic]

The Unicode symbol is read by VoiceOver (macOS) and by all the screenreaders actually.

You're using the alt attribute in a way it should not be used. It's primary function is to provide information when needed to blind and low sighted people not style the display in a text browser.

But I'm not going to argue on that since you can also just hide the img with aria-hidden="true".

[Alkarex]

Let's go for alt="" after all :-) Are you able to make a patch?

For the record, alt is for all the cases when the image is not displayed, not only for screenreaders - which are important but form only a subset of the usecases. C.f. https://www.w3.org/TR/html52/semantics-embedded-content.html#examples-of-scenarios-where-users-benefit-from-text-alternatives-for-images

To quote the HTML5 specification:

alt - Replacement text for use when images are not available

But in this specific case, the argument is that the image is not important because the text FreshRSS is just next to it and therefore a alt="" is OK. Cf. https://www.w3.org/TR/html52/semantics-embedded-content.html#example-31258c87

If a logo is being used next to the name of the what that it represents, then the logo is supplemental. Include an empty alt attribute as the text alternative is already provided.

Since the layout does not change much with or without the logo, alt="" does not seem to arm the other usecases.

[Alkarex]

Related documentation https://developer.paciellogroup.com/blog/2016/01/the-state-of-hidden-content-support-in-2016/

[Alkarex]

Fixed in #2219