jsx-eslint / eslint-plugin-jsx-a11y

Static AST checker for a11y rules on JSX elements.
MIT License
3.39k stars 636 forks source link

img-redundant-alt has incorrect rules #417

Open Steve-O-Cassels opened 6 years ago

Steve-O-Cassels commented 6 years ago

What a fantastic plugin this is and I am so grateful for it.

However from what I can see, the semantics of the img-redundant-alt rule seem to overlook providing users with an equal experience as outlined in WCAG.

The following reasoning for this rule confuses me:

There is no need to use words such as image, photo, and/or picture.

But surely there is a need for these meta words 'photo' and 'picture' because a screen-reader cannot convey what type of img, an img is?

For example, comparing alt text of a car race, with a a colour photo of a car race at the height of summer or indeed with, a black and white photo of car race, all suggest different perceptions of the car race event; the fact that the image is a photo is critical information about what is presented in and suggested by (black and white photo would suggest its old) the image. A visual user would get all the nuance of a black and white photo, or recognise an artists picture as a stylised impression of something. Omitting that it is a picture or a photo does not give an equal experience to the visually impaired end-user.

So for me, photo and picture should not be out of bounds.

Or am I misunderstanding?

ljharb commented 6 years ago

“A color photo” seems the default; i think many of these cases can be trivially rewritten such as “a car race at the height of summer” - and a photo being black and white or sienna really doesn’t guarantee that it’s old, what with processing techniques and instagram filters.

It seems like while it’s fine to use these words if they do, in fact, convey extra information - the visual description might not be sufficiently conveying the information you’re assuming.

Steve-O-Cassels commented 6 years ago

I'll try to be more clear. I agree with you, its a nuanced thing the use of alt text, and having 'photo' or 'print', or 'cartoon' is as much about the style of the image as anything else, but that is pertinent. 'image' and 'picture' admittedly, do seem so vague as to not be helpful in conveying information and I understand that a screen reader will call these out as 'image' anyway. I do think these two words should continue to cause a lint error. But not 'photo'.

I also agree that alt text is often abused and poorly written with content authors putting minimal effort into describing an image which results in overly simplistic 'photo of' descriptions. However I think that linting is not the way to fix that.

I'm steered by the scenario of accessibility modifications to a cafe in an old building whose principle entrance is via a rather grandiose one at the front of the building which has steps and a vestibule containing some art before arriving in the cafe. The cafe owners choose to put a wheelchair accessible ramp up a side alley, where they have to go passed rubbish bins, around the corner from the main entrance at the front of the building, thus causing wheelchair patrons to enter the cafe at the rear going passed the toilets on their way in.

The latter is a lesser experience which would fall foul of Disability Law. I perceive that censoring the use of 'photo' in particular, makes it harder to define the style of the image being presented, resulting in a lesser experience.

The-Code-Monkey commented 5 years ago

I have another example of where i have an svg icon inside of an image tag that is inside a label with html for and i have the word upload photo on it and it is throwing the error up.

delroh commented 5 years ago

This breaks the rule: alt="Photo booth catalog"

This doesn't break the rule: alt="Photos"

First one isn't redundant, the second one is.

I'll allow myself to quote:

The key principle is that computers and screen readers cannot analyze an image and determine what the image presents. As developers, text must be provided to the user which presents the CONTENT and FUNCTION of the images within your web content.

From https://webaim.org/techniques/alttext/

Another example: a book title "Image of the world", you have the cover image of the book linking to another place with more info about it. So if I am understanding correctly, the alternative text "Image of the world book" is correct and not redundant. So, "image" could be used as part of an alternative text too and there is a need to use that word.

I may not be understanding the actual purpose of this rule because it seems to me that having a rule checking for the use of the word "photo" or "image" is too simple for a case that depends on context.

lukeic commented 4 years ago

I think this deserves re-thinking, as put forth in the cases above. I've just noticed this 'warning' in a project. There are too many scenarios to cater for; people should be free to be descriptive in whatever way they please. This blanket 'rule' does more harm than good in that it encourages less-descriptive alt tags (which is enough of an issue already) by embedding the idea that it's wrong to write a certain way. Makes 0 sense.