Card
This page contains the inaccessible version of the component including the description of issues, additional considerations, and also the more accessible version of the component for comparison.
(future video slot)
Inaccessible Version
Issues
Anchor wraps the whole card.
If the whole card should be clickable, it might seem like a good idea to wrap it whole in the anchor. But since the card contains multiple elements, such as a heading, text, and a link, the browser treats all these elements as a part of the link which is semantically incorrect. When screen reader users land on the card, everything inside the link is announced at once and when browsing element-by-element, it announces "link" before each element.
Anchor inside another anchor.
To place <a> into another <a> is forbidden in HTML specification, links cannot be nested, nor any other interactive content cannot be placed inside the link.
The heading is made as an image.
Images of text should be used only if it's essential (such as demonstrating a specific font family or using a company logo), or optionaly, if the desired styling is not possible to achieve with CSS. However, it is the most inclusive practice to not use images of text because users cannot change the text format to their needs (size, color, letter spacing, line height, even font family) and if the image does not have an alternative text, which should be the same as the text on the image, then screen reader users miss the information.
The heading image has the wrong accessible name.
The heading image has the correct text present in the alt attribute. However, it is overidden by another attribute - aria-label. The alt attribute is completely ignored by assistive technologies since the aria-label attribute has precedence in terms of computing the accessible name. So, it is like the alternative text is not there at all, and instead, the useless text "Card title" is used. There is no need to set the aria-label as alt attribute is the only thing images need to set the accessible name.
The link text "Read more" is not descriptive enough.
Sighted users will most likely recognize that the "Read more" link belongs to the specific card as it is visually included inside. However, users of assistive technologies who do not rely on their sight might not recognize that so easily. Also, when screen reader users view the list of links on the page (which is possible to do in most screen readers), there are multiple links with the same text and leading to different locations.
Texts like "read more" or "more information" are mostly unclear to users. The purpose of the link should be identified from the link text alone. Optionally, the accessible name of the link can be extended by supplying more context in the aria-label attribute, such as aria-label="Read more about Perceivable".
Main image alternative text is redundant.
The main image of the card is decorative and no information would be lost if it would not be there. The card title together with the text conveys all the necessary information. But thanks to the alt="Card image" attribute, the image is treated as informative and is announced to screen reader users. Not only this text is completely useless as it does not bear any new information, but in this case, it is also not wanted as purely decorative images should be hidden from screen readers by providing the empty alt="" attribute.
The text description is made as a heading.
There is a textual description of the card wrapped inside the <h4> just below the card heading. Since this text content is a standard paragraph that is not a part of the page structure layout, it should be made as the <p> element. Currently, it makes the document structure extra verbose and the usage of the heading is not useful for users.
Links point to invalid URLs.
Having incorrect links on the page is a usability issue. Users expect to find relevant information by visiting the link, but when it leads to nowhere, they cannot access it.
The image can cause content jumping.
When images are not styled to preserve space before they load (such as by specifying the aspect-ratio or height), it can cause content jumping issues which is especially problematic for users with slower internet connections as they start to read the content, and suddenly the large image loads and shifts the content below. Users can easily get lost and need to find the place where they were reading the content again.
Read more about the content jumping at the article How we treat images.
Considerations
The usage of certain techniques depends on the circumstances. Expand each consideration to learn more.
Consider making the whole card clickable while using only one link.
It is possible to make the whole card clickable by using the pseudo-element overlay on a single link as shown in the accessible version of the component. However, then all the text in the card becomes unselectable by default, creating potential barriers for users. The text can be made selectable again by CSS (position: relative), however, then the card is not clickable everywhere, only in places where there is no text.
Consider the usage of a list.
When there are multiple cards together, it is useful for screen reader users to know how many of them there are. When using ul and li elements, this is announced automatically.
Consider implementing a hover effect.
It is easier for sighted mouse users to perceive that the card is interactive when the UI reacts to the hover effect.
Consider adjusting the heading structure.
The component itself does not have the correct heading structure respective to this very page as the <h3> element is missing, however, the usage of heading levels will depend on where the component will actually be used, and in this project it is perceived to be out of context, serving just as an example.