Cards example

In the example below, cards are grouped in an unordered list so that a screenreader or other assistive device will announce the number of cards. An ordered list can be used as well.

For the cards themselves, use the <article> element with the aria-labelledby attribute pointing to the card heading.

For stand-alone cards, use the same technique with the article element and label, but do not put in a list.

View source for the HTML/ARIA markup.

Key safety steps

Card with photo

The example card below is here to prompt a discussion of how to handle the order of a meaningful image within a card.

A person in the fish ladder viewing room gazing through a window where salmon are swimming by

A fish ladder near you

The Ballard Locks fish ladder is located where salt and fresh water meet in the Lake Washington Ship Canal.