There are two approaches to managing cards: making the entire card clickable or allowing individual elements within the card to be clickable. It is not recommended to combine these methods, as it can introduce complications, especially with nested hyperlinks.
Given that there are two distinct links within the cards leading to different destinations, opting for the latter option would be more effective.
Here are some recommendations to improve your HTML structure based on the presence of dual links in the card:
Your current HTML layout is robust, but minor adjustments are necessary.
1. Avoid using tabindex="0" for the entire card.
The use of tabindex="0" to make the entire card focusable serves no real purpose, particularly with multiple internal links, and is redundant.
Remember, it's best to only make elements focusable if they have associated actions, aiding keyboard users without sight impairments.
2. Use descriptive link text.
Clearly labeling links is crucial for screen reader users who rely on them for navigation. Consider providing meaningful descriptions like "Project X Demo" and "View Project X."
You have a couple of options:
- Opt for descriptive link text universally, potentially stacking buttons instead of placing them side by side, using labels like "X project Demo" and "View X Project".
- Include visually hidden text to offer context to screen reader users.
If possible, prioritize the first approach by adjusting the design to accommodate expanded text.
Additional Link Considerations
As each link should now be accessible, ensure that tabindex="-1" is removed accordingly.
If links open in new windows, consider indicating this behavior to users for clarity.
Including a subtle icon next to such links can signify their functionality, enhancing the user experience.
Implementing a simple CSS technique can automate this process:
a[target="_blank"]::after {
content: '\29C9';
content: '\29C9' / " (opens in new window)";
margin: 0 3px 0 5px;
}
Note the duplication in the content declaration - one for visual display and the other containing alternative text for screen readers.
The chosen character may vary, but its relevance should be maintained effectively.
Does the Image Provide Value?
Analyze whether the image contributes significant information to the page. If not, treat it as decorative. An image adds value when its contents do not convey essential details.
To designate an image as decorative, set the alt attribute to an empty string, ensuring the attribute remains present. For instance, <img alt="" /> is appropriate, while <img alt /> is not as valid. Using alt="" ensures proper image handling by screen readers.
Updated HTML Structure incorporating Visually-Hidden Text Responsibly
Highlighted changes made to the HTML code above aim to enhance accessibility while maintaining visual appeal through CSS techniques.
Utilize CSS guidelines to hide text visually yet retain accessibility for screen reader users.