Icon List
An icon list that does things right
Begins with structure, clear and tight.
Use a <ul> to group with grace,
So screen readers can keep their pace.
If icons speak, give them a role,
Use role=”img” to show their goal.
But if they’re just for style or flair,
Set aria-hidden to show they’re bare.
Testing elements
Greyd list. This is not an icon list in the classic sense. It’s initially a bullet list where can set icons instead of bullets. And each list item can have an individual icon when you choose overwrite style in the block settings of the individual list element.
A happy little list item
A cogwheel for more stuff
A question for an FAQ?
What’s being tested
Unordered list
aria-hidden is true
Icon list wraps and reflows when Zooming