Card Component does not have alt prop for image
is4g4i opened this issue · comments
The alt prop for the image is "" and does not appear at the astro props.
const {
url = '#',
img = 'https://fakeimg.pl/640x360',
title = 'Default title',
footer = 'Your name'
} = Astro.props
Hey @is4g4i! Thanks for submitting the issue. The <img> tag of the Card component has an empty alt="" attribute because in most cases, it will be decorative. That's how it's intended for this particular component. Do you have a use case where you need the image to be informative?
If it's intended, maybe an optional prop can be the solution.
The alt in images is suppossed to be always present for those folks with visual disabilities.
Alt attributes enable screen readers to read the information about on-page images for the benefit of a person with complete lack of sight, visually impaired, or who is otherwise unable to view the images on the page.
In a use case, maybe a lot more of context about for example an blog entry. For us this tag is just decorative, but for those folks means all.
Also SEO and A11y reports improved 👍
I agree with you @is4g4i! If it is intended to be informative then there should be an option. In must cases though, the heading and the paragraph of the Card will convey the message to sighted and visually impaired users. That's how this Card was designed. The image should only describe something that isn't already told by the heading and the paragraph and could lead to repeating the same information if not used correctly. The Card design is inspired by Heydon Pickerings view of how to build a Card component, in which he uses an empty alt="" tag. He does mention the use of a descriptive image, but this means the structure becomes incorrect (content before a heading), which can be solved using the Flexbox order property. With that it should work, but it will look a little funny to sighted users as the visual focus is a little weird this way.
Taking al this into account it both has advantages and disadvantages. Since most use cases (9 out of 10) won't be using the alt tag it would be better to keep it this way rather then to switch the order (and thus the visual focus) using Flexbox. It would however be a great idea to design another Card that ís descriptive in it's nature, intended for the other use case 🙂
Closing this for now and keeping an alternative Card component on the roadmap.