E-mail List Archives
Thread: using article tag on card view
Number of posts in this thread: 4 (In chronological order)
From: Lucy Greco
Date: Mon, Jul 15 2024 1:00PM
Subject: using article tag on card view
No previous message | Next message →
hello:
We are working on a project that shows a listing of posts as a card with a
few details from each post. Currently the screen reader reads article
start title one line of a snippet and then article end. as this means that
the screen reader user is always hearing article start and end would i be
write to say that these cards should not be marked up as articles to reduce
the verbosity of article start and end over and over again thanks lucy
Berkeley IT <https://technology.berkeley.edu/home>
Lucy Greco, Web Accessibility Evangelist
Campus IT Experience
Phone: (510) 289-6008 | Email: = EMAIL ADDRESS REMOVED = |
We champion diversity. We act with integrity. We deliver. We innovate.
From: jp Jamous
Date: Tue, Jul 16 2024 12:58PM
Subject: Re: using article tag on card view
← Previous message | Next message →
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.
From: jeffgutsell
Date: Tue, Jul 16 2024 1:57PM
Subject: Re: using article tag on card view
← Previous message | Next message →
I recently encountered a site that used the article tag as the container for a log-in form. Rather annoying.
Jeff Gutsell
Jeff Gutsell
From: Birkir R. Gunnarsson
Date: Tue, Jul 16 2024 5:23PM
Subject: Re: using article tag on card view
← Previous message | No next message
The <article> tag by itself mostly adds verbosity without much benefit,
though you can use the "o" key to skip to next article (in Jaws).
The trick is for users to know where one card or section ends and another
begins if it's important.
There are many ways to do it:
* If every card starts with a heading and there's no content between cards,
you can use headings
* If cards don't start with headings or there is extra content between
cards, it is helpful to add some structure around them.
It could be
* list items in a list
* regions (though a region landmark needs an accessible name), you get a
region using the <section> element or <div> with role="region"
* it could be articles.
For regions and articles to be helpful they need to have an accessible name.
you should have an aria-label with a descriptive title on each
region/article element
Of course if cards consistently have titles and if the titles are coded as
headings, then you don't really need the extra markup.
On Tue, Jul 16, 2024 at 3:57 PM < = EMAIL ADDRESS REMOVED = > wrote:
> I recently encountered a site that used the article tag as the container
> for a log-in form. Rather annoying.
>
> Jeff Gutsell
>
>
> Jeff Gutsell
>
>
>