No alt text on images

[becka11y]

I expected that the information I was adding into an image was being implemented as alt text. Alas, it is not. The information is being added as the title attribute - this is incorrect! The title attribute only helps mouse users. Any description of the image should be added onto the <img> element in the alt attribute. This is a serious accessibility issue.

There should also be a way to indicate that the image is decorative and does not need a description. If I enter then an empty alt attribute should be inserted. This can be accomplished via <img src="thesource" alt> or &ltimg src="thesource" alt="">

This is a serious accessibility issue.

[gitpitch]

Hi Becky, I've finally looked into this and implemented a patch that allows you to activate alt text on images. The solution basically promotes title text into the alt property on any image. For example:

![BIG PICTURE](assets/img/picture.png)

This syntax results in an image with "BIG PICTURE" activated as both title and alt on the image.

![title=BIG PICTURE](assets/img/picture.png)

This syntax is identical as it results in an image with "BIG PICTURE" activated as both title and alt on the image.

![title=BIG PICTURE, shadow](assets/img/picture.png)

This syntax results in an image with "BIG PICTURE" activated as both title and alt on the image. It also activate the shadow custom CSS style rule on the image. You can read more about compound properties on images in the Pro Inline Images Guide.

To try this out you will need to download the latest version of the Desktop. When you have a chance please test it out and let me now how it goes. Thanks, David.

[becka11y]

This is great news, thanks! I will try this out as soon as I can (likely next week) thanks very much, -becky

…

On Apr 24, 2020, at 2:26 PM, David Russell ***@***.***> wrote: Hi Becky, I've finally looked into this and implemented a patch that allows you to activate alt text on images. The solution basically promotes title text into the alt property on any image. For example:  This syntax results in an image with "BIG PICTURE" activated as both title and alt on the image.  This syntax is identical as it results in an image with "BIG PICTURE" activated as both title and alt on the image.  This syntax results in an image with "BIG PICTURE" activated as both title and alt on the image. It also activate the shadow custom CSS style rule on the image. You can read more about compound properties on images in the Pro Inline Images Guide <https://gitpitch.com/docs/image-features/image-manipulation/>. To try this out you will need to download the latest version of the Desktop <https://gitpitch.com/docs/work-offline/desktop-faq>. When you have a chance please test it out and let me now how it goes. Thanks, David. — You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub <#288 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AACN4C53EODA3QRTBH6RWQ3ROHKT5ANCNFSM4KZLLQ7Q>.

[gitpitch]

Some further clarification to address the secondary issue you raised re. how to indicate that the image is decorative and does not need a description . This now happen automatically when title text is omitted, for example:

![](assets/img/picture.png)

The rendered image tag will have an empty alt property. I believe this will give you what you need but you can let me know once you test. And one final note, this support is also live on gitpitch.com.

[becka11y]

Hi, David, I updated to the April 24 version of gitpitch this morning. I do see the title and alt values match what I entered. But, I also see the class value set to the same value. I see this on all of my images. this:  results in this: <img src="http://localhost:9000/pitchme/cdn/desktop/gitpitch/desktop/master/assets/img/a11y-numeronym.png" title="a plus 11 letters plus y represents accessibility" alt="a plus 11 letters plus y represents accessibility" class="a plus 11 letters plus y represents accessibility"> I also updated the .yaml with the language and I do see that: <html lang="en”> best, -becky

…

On Apr 24, 2020, at 2:50 PM, David Russell ***@***.***> wrote: Some further clarification to address the secondary issue you raised re. how to indicate that the image is decorative and does not need a description . This now happen automatically when title text is omitted, for example:  The rendered image tag will have an empty alt property. I believe this will give you what you need but you can let me know once you test. And one final note, this support is also live on gitpitch.com. — You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub <#288 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AACN4C2J4AL6PH6SUMLOMRLROHNQPANCNFSM4KZLLQ7Q>.

[gitpitch]

Thanks for testing and for the additional feedback. You have reminded me that the title text using the ![title-alt text](xxx) syntax can now end up with the text within the class property since I introduced Pro Image Manipulation. Something I will look into.

But for now you can either ignore the underlying dirty generated HTML snippet which should still work or you can use the alternative and cleaner ![title=title-alt text](xxx) syntax.

[becka11y]

So, I should have pointed this out earlier. Generally the title and the alt attribute should not be the same. The alt attribute describes the image for assistive technology (screen reader) or marks the image as decorative when alt is empty. The title text provides any additional description. Title values really don't help with accessibility. The title text is only displayed on mouse over - thus it doesn’t help keyboard only users. Also, some screen readers can be set to speak the title text. When the title and alt are the same, a screen reader might hear it twice which is annoying. So, to be really comprehensive the user should be able to enter both. But, in the real world I rarely see both used unless they are set to the same value. People also think that title serves as the alternative text for screen readers, which it does not. Thus, I’d be just as happy if the image description just converted to alt. Of course, I’m sure someone else will want title, or both. But, with respect to accessibility, just the alt attribute - either empty or with a description are sufficient. thanks, -becky

…

On Apr 27, 2020, at 3:59 PM, David Russell ***@***.***> wrote: Thanks for testing and for the additional feedback. You have reminded me that the title text using the  syntax can now end up with the text within the class property since I introduced Pro Image Manipulation <https://gitpitch.com/docs/image-features/image-manipulation/>. Something I will look into. But for now you can either ignore the underlying dirty generated HTML snippet which should still work or you can use the alternative and cleaner  syntax. — You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub <#288 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AACN4CY7NHP62BAF7EWMQTDROXPYZANCNFSM4KZLLQ7Q>.

[gitpitch]

Thanks for the additional clarification Becky. I live and learn. Sometimes slowly :)

So, to be really comprehensive the user should be able to enter both.

I think if we are going to do this we should do it right. So I plan to add support for alt text. As distinct to title text as you pointed out. Once I have something for you to test I will let you know. Thanks again. David.

[gitpitch]

A new patch is now live that introduces explicit support for the alt attribute on images. This support extends but is independent of pre-existing image manipulation properties including the title property.

1. To activate alt text on an image use the alt= property on your image markdown as follows:

![alt=Your custom alt text](path/to/file.png)

2. If the alt property is not explicitly set then the alt attribute is disabled on the corresponding image tag as follows <img src="xxx" alt />.

3. This new property can be used in conjunction with any of the existing properties, for example:

![width=400, alt=Cloud deployment architecture diagram](path/to/file.svg)

This patch is now available in the latest release of the Desktop. And live in the cloud on gitpitch.com. When your time permits can you please test and let me know how it goes. Thanks, David.

[becka11y]

Hi, David, I just came up with another scenario. What if I want no alt and no title?  Results in: <img src=“url" title="alt title" alt="" class="alt title”> // I realize the class will be fixed in a future build I also tried:  Results in: <img src=“url" title="" alt="" "="" title"=“"> And, on another point, I personally would prefer that the default, with no attrib name specification would be to input an alt rather than a title attribute. Although, I realize that presents some backward compatibility issues. Thus, I understand if you don’t change. Just getting people to add the description is difficult enough, now they have to actually understand that they are explicitly adding alt text AND a title. My images right now all look like: ![alt=description text title] so that I just get alt and no title. I do like that I can add a title if I think it is important but I generally don’t since title is really only helpful to sighted mouse users. Just food for thought. Makes me think I need to write a blog post on alt vs. title! Thanks for your work on this, I’m excited to see accessibility improvements. Once my training is over next week I will go through my long email and add my wishlist as separate issues. best, -becky

…

On Apr 28, 2020, at 1:04 PM, David Russell ***@***.***> wrote: A new patch is now live that introduces explicit support for the alt attribute on images. This support extends but is independent of pre-existing image manipulation properties <https://gitpitch.com/docs/image-features/image-manipulation/> including the title property. To activate alt text on an image use the alt= property on your image markdown as follows:  If the alt property is not explicitly set then the alt attribute is disabled on the corresponding image tag as follows <img src="xxx" alt />. This new property can be used in conjunction with any of the existing properties, for example:  This patch is now available in the latest release of the Desktop. And live in the cloud on gitpitch.com. When your time permits can you please test and let me know how it goes. Thanks, David. — You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub <#288 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AACN4C7NQ3HMIQ2ILOZMMU3RO4ECXANCNFSM4KZLLQ7Q>.

[gitpitch]

I just came up with another scenario. What if I want no alt and no title?

No alt and no title is the default, so you could:

![](path/to/image.png)

They property syntax you used ![alt title](path) is not valid. But you could use valid property syntax if you wanted to be explicit:

![alt=, title=](path/to/image.png)

Both these these approaches should result in the following:

<img src=“url" title alt>

Which I believe is what you are after. Is that right?

And, on another point, I personally would prefer that the default, with no attrib name specification would be to input an alt rather than a title attribute. Although, I realize that presents some backward compatibility issues.

That would present some (probably minor) backwards compatibility issues. But I'll consider it and update you here if I make that change.

Just getting people to add the description is difficult enough, now they have to actually understand that they are explicitly adding alt text AND a title. My images right now all look like: ![alt=description text title] so that I just get alt and no title.

I actually thought until today that this is exactly what you wanted. But now I realize (I think) that you want ![description text title] to render the description as alt text for the image. Is that right? I'm asking for clarification here again so I can understand without ambiguity what you want/need. Thanks.

[gitpitch]

I personally would prefer that the default, with no attrib name specification would be to input an alt rather than a title attribute.

The new default behavior for images across all GitPitch products is to set alt text not title text when using ![descriptive text](path/to/img) markdown syntax. The Image Manipulation Guide has been updated to reflect this change. The guide also provides a brief description of the benefits of using alt text on images as I felt that might be helpful to people (like me) who did not fully appreciate their importance in the context of accessibility.

Testing appreciated. And please let me know if this issue is now resolved? Thanks, David.

[becka11y]

Wow, thanks! I will give it a look on Friday. Knowbility is hosting our virtual accessU conference today so am tied up.

…

-becky

On May 14, 2020, at 5:37 AM, David Russell ***@***.***> wrote: I personally would prefer that the default, with no attrib name specification would be to input an alt rather than a title attribute. The new default behavior for images across all GitPitch products is to set alt text not title text when using  markdown syntax. The Image Manipulation Guide <https://gitpitch.com/docs/image-features/image-manipulation#image-alt-text> has been updated to reflect this change. The guide also provides a brief description of the benefits of using alt text on images as I felt that might be helpful to people (like me) who did not fully appreciate their importance in the context of accessibility. Testing appreciated. And please let me know if this issue is now resolved? Thanks, David. — You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub <#288 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AACN4C5SPDZYABDTYFEV7KLRRO3W5ANCNFSM4KZLLQ7Q>.

[gitpitch]

Ok, no rush Becky. Good luck with your conference today.

[gitpitch]

Closing issue as resolved. If you have additional input please feel free to re-open the issue anytime. Cheers, David.