added in alt and title values to the <img> element

[tpetts]

This was applied to 44 elements for accessibility purposes.

[jancborchardt]

Hi @tpetts @ramyaparimi – sorry, I only saw this now – as far as I know, these changes are not necessary for accessibility, since:

• Content in the alt tags duplicate what is already inside the link itself. E.g. the project name is always inside the link element in the h3. In this case an empty alt="" tag is recommended.
• For the same reason, the title tag is not needed (also not on the social links because it duplicates the alt text).
• If it’s a linked image which does need alt text, it only needs to say what it links to, the "image link" part could be left out.
• The Open Source Diversity logo actually does not need any alt or title text at all because it is decorative, so an empty alt="" tag is recommended here as well.

Testing with a screen reader, now it actually reads out: "Contributor Covenant Image Link Contributor Covenant […]". (More info on alt text: https://webaim.org/techniques/alttext/ )

@tpetts let me know if I’m missing something, and thanks for contributing! :)

[tpetts]

Hi there,

Good solid points! (I am a new coder starting out fresh in college, apologies for the repeats) I am curious, which screen reader were you testing with?

I apologize in advance for my idleness as of late. School has begun again, and I am in the working processes of trying to find a solid job in the developer career field.

Tia Petts Mobile Applications Development & Front End Development

From: Jan C. @.> Sent: Wednesday, August 25, 2021 12:02 PM To: @.> Cc: Petts, Tia @.>; @.> Subject: Re: [opensourcediversity/opensourcediversity.org] added in alt and title values to the element (#130)

Hi @tpettshttps://nam10.safelinks.protection.outlook.com/?url=https%3A%2F%2Fgithub.com%2Ftpetts&data=04%7C01%7Ctpetts%40madisoncollege.edu%7Cc22433a075ce46ecc6dd08d967ea19a2%7C33f001466fcc49e9b5687896b3069d44%7C0%7C0%7C637655077438132255%7CUnknown%7CTWFpbGZsb3d8eyJWIjoiMC4wLjAwMDAiLCJQIjoiV2luMzIiLCJBTiI6Ik1haWwiLCJXVCI6Mn0%3D%7C1000&sdata=ANvgycWjgaLBN8RyQAfP%2FMILASSkUPeHdHesj69Mmms%3D&reserved=0 @ramyaparimihttps://nam10.safelinks.protection.outlook.com/?url=https%3A%2F%2Fgithub.com%2Framyaparimi&data=04%7C01%7Ctpetts%40madisoncollege.edu%7Cc22433a075ce46ecc6dd08d967ea19a2%7C33f001466fcc49e9b5687896b3069d44%7C0%7C0%7C637655077438132255%7CUnknown%7CTWFpbGZsb3d8eyJWIjoiMC4wLjAwMDAiLCJQIjoiV2luMzIiLCJBTiI6Ik1haWwiLCJXVCI6Mn0%3D%7C1000&sdata=0x3jARWFRNJHe%2BebepmzYklQ%2FPTWmZ6LU%2Bh9zC1NyGo%3D&reserved=0 – sorry, I only saw this now – as far as I know, these changes are not necessary for accessibility, since:

• Content in the alt tags duplicate what is already inside the link itself. E.g. the project name is always inside the link element in the h3. In this case an empty alt="" tag is recommended.
• For the same reason, the title tag is not needed (also not on the social links because it duplicates the alt text).
• If it’s a linked image which does need alt text, it only needs to say what it links to, the "image link" part could be left out.
• The Open Source Diversity logo actually does not need any alt or title text at all because it is decorative, so an empty alt="" tag is recommended here as well.

Testing with a screen reader, now it actually reads out: "Contributor Covenant Image Link Contributor Covenant […]". (More info on alt text: https://webaim.org/techniques/alttext/https://nam10.safelinks.protection.outlook.com/?url=https%3A%2F%2Fwebaim.org%2Ftechniques%2Falttext%2F&data=04%7C01%7Ctpetts%40madisoncollege.edu%7Cc22433a075ce46ecc6dd08d967ea19a2%7C33f001466fcc49e9b5687896b3069d44%7C0%7C0%7C637655077438142215%7CUnknown%7CTWFpbGZsb3d8eyJWIjoiMC4wLjAwMDAiLCJQIjoiV2luMzIiLCJBTiI6Ik1haWwiLCJXVCI6Mn0%3D%7C1000&sdata=JlvVLGTs4ZyVaBsIAbEcPKZJjo1yLAJL7h%2BAYXgKMgk%3D&reserved=0 )

@tpettshttps://nam10.safelinks.protection.outlook.com/?url=https%3A%2F%2Fgithub.com%2Ftpetts&data=04%7C01%7Ctpetts%40madisoncollege.edu%7Cc22433a075ce46ecc6dd08d967ea19a2%7C33f001466fcc49e9b5687896b3069d44%7C0%7C0%7C637655077438142215%7CUnknown%7CTWFpbGZsb3d8eyJWIjoiMC4wLjAwMDAiLCJQIjoiV2luMzIiLCJBTiI6Ik1haWwiLCJXVCI6Mn0%3D%7C1000&sdata=uRmLRhVa9jLZ6FMXPxtFGK0z2alS37kHGAdWNtA5nEY%3D&reserved=0 let me know if I’m missing something, and thanks for contributing! :)

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHubhttps://nam10.safelinks.protection.outlook.com/?url=https%3A%2F%2Fgithub.com%2Fopensourcediversity%2Fopensourcediversity.org%2Fpull%2F130%23issuecomment-905713060&data=04%7C01%7Ctpetts%40madisoncollege.edu%7Cc22433a075ce46ecc6dd08d967ea19a2%7C33f001466fcc49e9b5687896b3069d44%7C0%7C0%7C637655077438152160%7CUnknown%7CTWFpbGZsb3d8eyJWIjoiMC4wLjAwMDAiLCJQIjoiV2luMzIiLCJBTiI6Ik1haWwiLCJXVCI6Mn0%3D%7C1000&sdata=NTqdAFdeNbUPQdZwUYDw7Vi9ooSIBBVe2H340s%2FTyjE%3D&reserved=0, or unsubscribehttps://nam10.safelinks.protection.outlook.com/?url=https%3A%2F%2Fgithub.com%2Fnotifications%2Funsubscribe-auth%2FAN4CI2GTO2UDMH27HOT67F3T6UOZXANCNFSM47C3ITNQ&data=04%7C01%7Ctpetts%40madisoncollege.edu%7Cc22433a075ce46ecc6dd08d967ea19a2%7C33f001466fcc49e9b5687896b3069d44%7C0%7C0%7C637655077438152160%7CUnknown%7CTWFpbGZsb3d8eyJWIjoiMC4wLjAwMDAiLCJQIjoiV2luMzIiLCJBTiI6Ik1haWwiLCJXVCI6Mn0%3D%7C1000&sdata=3cVWqjRlRAQ%2BSzmVHoBt3m2OsJvy4qnTO46HKzsQixk%3D&reserved=0. Triage notifications on the go with GitHub Mobile for iOShttps://nam10.safelinks.protection.outlook.com/?url=https%3A%2F%2Fapps.apple.com%2Fapp%2Fapple-store%2Fid1477376905%3Fct%3Dnotification-email%26mt%3D8%26pt%3D524675&data=04%7C01%7Ctpetts%40madisoncollege.edu%7Cc22433a075ce46ecc6dd08d967ea19a2%7C33f001466fcc49e9b5687896b3069d44%7C0%7C0%7C637655077438162122%7CUnknown%7CTWFpbGZsb3d8eyJWIjoiMC4wLjAwMDAiLCJQIjoiV2luMzIiLCJBTiI6Ik1haWwiLCJXVCI6Mn0%3D%7C1000&sdata=aQL8un%2B19iO2O7MqiVYpUrJEekPWfhkn9GaDrlN%2Fs9k%3D&reserved=0 or Androidhttps://nam10.safelinks.protection.outlook.com/?url=https%3A%2F%2Fplay.google.com%2Fstore%2Fapps%2Fdetails%3Fid%3Dcom.github.android%26utm_campaign%3Dnotification-email&data=04%7C01%7Ctpetts%40madisoncollege.edu%7Cc22433a075ce46ecc6dd08d967ea19a2%7C33f001466fcc49e9b5687896b3069d44%7C0%7C0%7C637655077438162122%7CUnknown%7CTWFpbGZsb3d8eyJWIjoiMC4wLjAwMDAiLCJQIjoiV2luMzIiLCJBTiI6Ik1haWwiLCJXVCI6Mn0%3D%7C1000&sdata=XQMW5ydJkjAx1HdvPJE3XxNoKieNXqrrUGtoIZulKTA%3D&reserved=0.

[jancborchardt]

@tpetts no worries at all, we’re all volunteers :)

I am curious, which screen reader were you testing with?

In this case I tested with the built-in screenreader of GNOME, but it should also come up when testing with others like ChromeVox (doesn’t load the language pack for me for some reason), or VoiceOver on macOS/iOS (don’t currently have access to an Apple device, would only be able to test in a month).

Which one do you use? Maybe ChromeVox works for you if you can check :)

[jancborchardt]

@tpetts did you look any further into this? I would recommend reverting the pull request, since with the version before there are no issues using it with a screen reader. :)