Images in image grids, new feeds, and the quote image don't have alt text, and aren't marked as decorative

[codywall]

Noticed by Tom via Siteimprove

[codywall]

@thburns I looked into this, and all of those blocks are in fact marked as decorative. They all use an empty alt tag to denote them as decorative, which is the WCAG-preferred way of labeling things as decorative. I'm not sure why Siteimprove would flag these as accessibility problems. It might be worth asking them.

Source: WCAG tutorial on w3.org

[thburns]

It is confusing.... cause sometimes I see that alt="" other times I don't My question is what does this do - alt class="css-cet0rr e16tqk581"

Here is the link in siteimprove for one - https://my2.siteimprove.com/Inspector/910342/Accessibility/Page?pageId=11128627866&impmd=B9978FDB7E70ED867B2AD95D97349946#/Criterion/1.1.1/Check/77

[codywall]

Ah, that makes sense. Siteimprove is asking us to visually check each of the decorative images on our site and decide whether or not they are actually decorative. I think if we mark them as approved they won't be flagged an issue anymore, but I can't remember how that works. I'm not sure how we would 'use CSS to completely separate content from presentation'. That's probably a good question for Adam.

We use the obfuscated class names because it makes our site smaller in size, which leads to increased performance. It definitely make it harder to figure out which elements are which though.

[thburns]

yeah we can make it as ignore those sites in site improve. I am also chatting with their support team now.

-Tom

On Thu, Aug 27, 2020 at 1:18 PM Cody Wall notifications@github.com wrote:

Ah, that makes sense. Siteimprove is asking us to visually check each of the decorative images on our site and decide whether or not they are actually decorative. I think if we mark them as approved they won't be flagged an issue anymore, but I can't remember how that works. I'm not sure how we would 'use CSS to completely separate content from presentation'. That's probably a good question for Adam.

We use the obfuscated class names because it makes our site smaller in size, which leads to increased performance. It definitely make it harder to figure out which elements are which though.

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/csumb/csumb-gatsby/issues/476#issuecomment-682169511, or unsubscribe https://github.com/notifications/unsubscribe-auth/AK2UUPAC4JFWYZRH3Z36NG3SC25QXANCNFSM4P5GICTQ .

-- Tom Burns User Experience Specialist Web Services 831-582-3732 California State University, Monterey Bay

[codywall]

Awesome. Let me know if they suggest a better way of doing it.

[thburns]

I am just now more confused....

This is what they sent back as a screen share.

https://www.screencast.com/t/6gssCPwy

the alt="" is already there and according to wcag that is fine....

Who knows.

On Thu, Aug 27, 2020 at 2:01 PM Cody Wall notifications@github.com wrote:

Closed #476 https://github.com/csumb/csumb-gatsby/issues/476.

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/csumb/csumb-gatsby/issues/476#event-3701404982, or unsubscribe https://github.com/notifications/unsubscribe-auth/AK2UUPDDX6ONKZICRES4CW3SC3CRZANCNFSM4P5GICTQ .

-- Tom Burns User Experience Specialist Web Services 831-582-3732 California State University, Monterey Bay

[codywall]

That's weird...the image doesn't provide any additional information, and the alt text they added is redundant as it is the same text as the caption below it. It doesn't seem like that would be accessibility-wise.

¯\(ツ)/¯