Prevent accidents
Review the UW Accident Prevention Plan and your unit's Supplemental Accident Prevention Plan.
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
-
-
Complete safety training
Complete all required and recommended safety training courses prior to beginning work with a hazard.
-
Report workplace incidents
Review the steps for reporting incidents, the types of incidents and reporting requirements.
Cards using the section element
The following example uses the <section> element to group related content within a card. This
has been added to determine if a section with an accessible label will announce the beginning and end of a
card. And if that is the case, what scenarios make sense for use of <section> element
as opposed to the <article> element when coding a card.
Fish ladder facts
-
What is a fish ladder?
A fish ladder is a structure built around barriers like dams to help fish migrate upstream by providing a series of ascending pools.
-
Why are fish ladders important?
Fish ladders help maintain healthy fish populations by allowing species like salmon to reach their spawning grounds, supporting biodiversity.
-
How do fish ladders work?
Fish ladders use a series of steps or pools that slow the water flow, making it easier for fish to swim upstream past obstacles.
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. In this example the heading is placed before the image in the DOM, but in the visual layout, the image appears first via CSS grid.
A fish ladder near you
The Ballard Locks fish ladder is located where salt and fresh water meet in the Lake Washington Ship Canal.
Articles or sections?
When should you use the <article> element and when should you use the
<section>
element?
This excerpt from 4.3.12.1 of the HTML Standard helps to answer that question (emphasis mine):
A section forms part of something else. An article is its own thing. But how does one know which is which? Mostly the real answer is " it depends on author intent".
For example, one could imagine a book with a "Granny Smith" chapter that just said "These juicy, green apples make a great filling for apple pies."; that would be a section because there'd be lots of other chapters on (maybe) other kinds of apples.
On the other hand, one could imagine a tweet or reddit comment or tumblr post or newspaper classified ad that just said "Granny Smith. These juicy, green apples make a great filling for apple pies."; it would then be articles because that was the whole thing.