WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: using article tag on card view

for

From: jp Jamous
Date: Jul 16, 2024 12:58PM

Hi Lucy,

I totally agree that this is quite annoying for a screen reader user. We implemented such a thing on a massive platform that allows users to pull up a list of doctors. The developers just wrapped the card with <article> tag.

After working with them and going over W3C recommendations on using the Article tag, they were cooperative enough to redo the component. We ended up with something similar to this.

<div role="region" aria-label="Business Card">
All the links, images and text went here
</div>

Although you might think that the aria-label and role would be a catch 22, they were quite helpful for screen readers.
1. They allowed the SR user to skip from one region to another using quick navigation keys
2. When redundancy occurred with the same doctor having duel specialties, the announcement at the start and end help keep the user oriented
3. It was a better HTML tag for the card as <article> was not meant for a business card.