WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Explicit association with <header> required/recommended for <article>?

for

From: Robert Fentress
Date: Feb 5, 2018 11:35AM

Interestingly, the "region" role is defined by ARIA 1.1 (
https://www.w3.org/TR/wai-aria-1.1/#region) as a subclass of landmark (one
not otherwise defined more specifically), so the fact that JAWS "region"
navigation includes things marked up with the <article> tag is a potential
source of confusion. The <article> tag is defined in HTML5 as "sectioning
content" (https://www.w3.org/TR/html5/sections.html#the-article-element)
though, so I wonder if, maybe, it would be better for JAWS to use that
nomenclature. So, rather than suggesting to users that they are navigating
by *region*, JAWS should indicate they are navigating by *section*,
instead.

Also, it appears as though NVDA doesn't do anything with the <article> tag.
However, it does list any <header> tags in the "Elements List" dialog under
"Landmarks" as "banner" (but only in IE). This is interesting, since I
aways saw a subtle difference between the <header> tag and the "banner"
role, in that you can only have one element with the role "banner" per
page, but can have multiple <header> tags. So, all banners are <header>s,
but not all <header>s are banners.

Or so I thought. NVDA seems to see them as the same, based on this.

Perhaps, I misinterpreted things, though, because <article> is defined as a
subclass of "document". So maybe the rule isn't that there can't be only
one banner per page, but, rather, only one banner per document?

Maybe to benefit those NVDA users, you should use "aria-labelledby" on both
the <article> *and* the <header> tags, with both pointing to the id of the
heading in the <header>. If you do that, those labelled headers are listed
as *Your heading goes here; banner* in the "Elements List" dialog.

On Mon, Feb 5, 2018 at 1:24 PM, Jonathan Cohn < <EMAIL REMOVED> > wrote:

> Also, with VoiceOver on Macintosh Articles can be blocks that need to be
> interacted with in at least "Group Navigation" mode. If they are not given
> a label than VoiceOver will just say "article".
> Thanks,
>
> Jonathan Cohn
>
> On Mon, Feb 5, 2018 at 12:32 PM Robert Fentress < <EMAIL REMOVED> > wrote:
>
> > So, checking in JAWS 18, CTRL+Insert+R brings up a list of regions on the
> > page. If you have labelled your region by pointing aria-labelledby to
> the
> > id for the heading, then the article is listed with that name.
> Otherwise,
> > it just says article, even if you have a heading in the article.
> > Basically, it must be explicitly named.
> >
> > On Mon, Feb 5, 2018 at 11:53 AM, Robert Fentress < <EMAIL REMOVED> > wrote:
> >
> > > Yeah, I guess you're right. A header could contain content other than
> a
> > > heading. So does the accessible name for the article automatically get
> > > populated with the highest heading level it contains then?
> > >
> > > My use case is if the user wants to have navigate amongst multiple
> > > articles on a page without diving into the contents of each. If there
> > are
> > > multiple nav elements on a page, you would need to label them to enable
> > the
> > > user to quickly jump to the one that is most relevant. In the same
> > sense,
> > > wouldn't you want to label articles? Actually, I don't even remember
> if
> > > any screen readers provide affordances for jumping between or listing
> > > articles, per se, but, if they did, I'd think this would be useful.
> > >
> > > On Mon, Feb 5, 2018 at 11:09 AM, < <EMAIL REMOVED> > wrote:
> > >
> > >> I think you mean heading, not header.
> > >>
> > >> Headers are repeating elements at the top of something, such as a page
> > >> header or table header.
> > >>
> > >> The Article tag's definition is that it designates a self-contained
> > >> portion of a larger document. It is a grouping or container tag that
> > >> encompasses, by definition, other tagged elements such as P and Hx
> tags.
> > >>
> > >> To me, the relationship is already explicit because the Hx tag is
> within
> > >> the Article tag.
> > >>
> > >> — — —
> > >> Bevi Chagnon, founder/CEO | <EMAIL REMOVED>
> > >> — — —
> > >> PubCom: Technologists for Accessible Design + Publishing
> > >> consulting ' training ' development ' design ' sec. 508 services
> > >> Upcoming classes at www.PubCom.com/classes
> > >> — — —
> > >>
> > >>