Null value for Alt text

We encourage users to post events happening in the community to the community events group on https://www.drupal.org.
sdelorey's picture

I am using Adaptive theme to make many websites, and despite it being possible to create an alt field for all of my images I am unsure of what to do with a decorative image that should display the alt text of "".

If I leave the alt text field empty, the result is alt=

If I add "" to the alt text field, the result is alt=""""

Does anyone know of a good solution for this issue?

Comments

Sounds like a bug to me. It

Liam Morland's picture

Sounds like a bug to me. It shouldn't be possible to get a quote to appear inside an attribute value; it should be escaped to prevent alt="""". It should always generate the quotes for the attribute value, so it should never display 'alt='.

Can you simply add a space to

lambch's picture

Can you simply add a space to the alt field? With luck it should result in alt=" ".
But besides that, is it possible to add decorative images via your CSS?

No, it must produce alt=""—with no space.

Cliff's picture

Here's the problem—when there is anything between the quotes of the alt attribute, a screen reader will announce that the image is present and read out what the alt attribute contains. When the alt attribute is present but empty—alt=""—then the screen reader is supposed to ignore the image. That's the way we show that the image is eye candy and should be ignored.

If we leave the alt attribute out, then the screen reader will always announce that the image is present (we haven't said it conveys no meaning, so it might) and will read the filename—and that's usually gibberish. The person using the screen reader will know something is there, but not whether it meant anything. That would be confusing.

If we put in the alt attribute as you describe—alt=" "—then the screen reader would announce that an image was there, but say nothing. So the person using the screen reader would get half as much noise, but still useless noise, each time they encounter a decorative image. They still wouldn't know that the image is decorative, so they would again be confused.

On the other hand, I'm not sure what a screen reader or browser would do with alt="""". I imagine the second quote mark would close off the attribute immediately, so the image would be recognized as decorative. The additional quotes might be ignored, so although this is a bug it would be a harmless one. I'll write a test file and read it with several screen readers in several browsers and let you know what I find. And I'll research the issue queues to see what you should enter. If I recall correctly, we intended for the user to enter "", but now that I think of it on the site I'm helping with now I've been entering nothing when the image is decorative. Hmmmm.

Either way, you've found a bug. Good catch! Now how to fix it… .

Issues

mgifford's picture

I think that issue would probably already be in the issue queue https://www.drupal.org/project/issues/adaptivetheme?text=alt&status=All

I didn't see it though. Could you verify that you can repeat the problem by setting it up in SimplyTest.me:
https://simplytest.me/project/adaptivetheme

That helps establish that it's a generic problem not due to any custom code.

Blank alt text field for null alt text

sdelorey's picture

I recently had the opportunity to do some testing with a user of screen reader technology, and tested both NVDA (Windows) and Voiceover (Mac), and a solution in Drupal 7 is to leave the alternative text field blank. In the inspector it does not render alt="", rather just alt. However, the behavior of the screen reader is to ignore the decorative image, which is the goal of the null value.

This makes me wonder what the best solution is in D8 as alt text is required by default on all image fields. There are many instances where null value is the most appropriate alternative text, and unless there is another solution in D8, this will be very frustrating to users accessing Drupal websites with screen readers.

Blank alt text

gdruckman's picture

The code you see in inspector varies. I can only guess you are using Chrome, and that is correct. Chrome will render an empty alt attribute (alt="") that way and only display alt, Safari does the same. If you do check the same in FireFox, chances are you will see the full alt="".

Test in more than one browser, and see.

  • Word of caution about FireFox, it has the tendency to close tags for you which at times can make debugging harder *