Figure 1 Example of 3 side-by-side Card widgets consisting of heading, image, text information and link.
Cards are widgets consisting of different types of objects:
Images
Text
List groups
Links, and more.
Although they look like physical cards, they can come in a variety of shapes and sizes.
The key advantage of using a card widget on the website are:
Well suited for mobile layouts along with the desktop layouts.
Typically provides a clickable or tappable area that is large enough.
Simplifies the layout by maintaining the consistency of stacking the content.
NOTE:
New to accessibility or uncertain of requirements, it will be helpful to review all sections below.
Already familiar with requirements, skip to the “Working Example” section for sample HTML, CSS
and JavaScript (when needed), along with a working demo.
The textual based content in the card MUST be at least 4.5:1 against the background
color if it’s a standard text in default, focused and hover state.
The minimum contrast requirement ratio of 3:1 for the large text or text with 14pts and bold
MUST be met in default, focused and hover state.
The contrast requirement of 3:1 ratio MUST be met with the adjacent colors for the
custom focus indicator if used for the interactive elements.
The contrast ratio requirement of 3:1 MUST be met with the adjacent colors for the user
interface control in default, focused and hover state.
Color only MUST not be used to distinguish the links from the surrounding text of the
paragraph in which the link is present.
The foreground color of link text SHOULD meet the color contrast ratio
requirement of 4.5:1 (standard text) or 3:1 (if large text i.e., 18pts or 14pts and bold) with
the surrounding text color.
There CAN be a visual cue like underline, bold formatting, or icons that be
used to help distinguish the links from the surrounding text.
An <article> or a generic element such as a div with a role="group"
element SHOULD be used as the card container.
A heading SHOULD be used in every card and placed at the top of the card.
As cards CAN consist of text, button, links and images. The respective objects should
be structured within separate native HTML elements.
For example,
<div>
<article>
<h2>
<a href="#" id="cardtitle1">Learning Catalytics</a>
</h2>
<img src="https://www.pearson.com/content/dam/global-store/global/educator/1600x800-GettyImages-1138142697-LowRe.jpg.transform/card-size/img.jpeg" alt="" >
<p>
Hear from every student when it matters most as they respond using
their own smartphones, tablets or laptops
</p>
<a href="#">Explore Learning Catalytics</a>
</article>
...
</div>
The heading level for the title that describes the card content MUST follow the
page’s content structure.
Any informative images that are used within the card widget MUST have a meaningful
textual description.
Any decorative images that are used within the card widget MUST be hidden
programmatically from the assistive technology users.
Any button or link that has identical names across the cards such as Explore Now, Shop Now, Explore
More, and so on MUST be descriptive enough using aria-labelledby
attribute.
The id attribute value of the button/link text along with the heading that defines the content of the
card must be referenced within the aria-labelledby attribute specified for the button or
link.
A well-defined card widget benefits majorly the below users.
People with cognitive disabilities
People using speech input
People with limited dexterity
People using keyboard only
People using screen readers
<div class="cards">
<article class="card reorder">
<h2><a href="#" id="cardtitle1">Learning Catalytics</a></h2>
<img src="../common-images/student-with-raised-hand.jpg" alt="" loading="lazy" width="250" height="100">
<p>Hear from every student when it matters most as they respond using their own smartphones, tablets or laptops</p>
<div class="cardLink">
<a href="#">Explore Learning Catalytics</a>
</div>
</article>
<article class="card reorder">
<h2><a href="#" id="cardtitle2">StatCrunch</a></h2>
<img src="../common-images/educator.jpg" alt="" loading="lazy" width="250" height="100">
<p>Put the power of data in students’ hands as they analyze data sets easily from their text and exercises</p>
<div class="cardLink">
<a href="#">Explore StatCrunch</a>
</div>
</article>
<article class="card reorder">
<h2><a href="#" id="cardtitle3">MediaShare</a></h2>
<img src="../common-images/student-working-at-computer.jpg" alt="" loading="lazy" width="250" height="100">
<p>Bring course concepts to life and engage students with media-rich activities, created with Pearson or your own content</p>
<div class="cardLink">
<a href="#">Explore MediaShare</a>
</div>
</article>
</div>
