WebAIM - Web Accessibility In Mind

E-mail List Archives

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

for

From: Mallory
Date: Feb 6, 2018 1:35AM

Hi,
regarding this:
>However, it does list any <header> tags in the "Elements List" dialog under
"Landmarks" as "banner" (but only in IE).

This is an IE bug :)

JAWS also calls all headers "banners" in all browsers.

The moving-by-article seems to be a JAWS thing as well.
https://github.com/FreedomScientific/VFO-standards-support/issues/35

cheers,
Mallory

On Mon, Feb 5, 2018, at 8:43 PM, Robert Fentress wrote:
> Also, starting at MacOS High Sierra, it is possible to navigate by article
> from the Web Rotor on VO (thanks to Scott O'Hara for the heads up on
> this). So, in that context, labeled articles is of benefit, as well.
>
> On Mon, Feb 5, 2018 at 1:35 PM, Robert Fentress < <EMAIL REMOVED> > wrote:
>
> > 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
> >> > >> — — —
> >> > >>
> >> > >> -----Original Message-----
> >> > >> From: WebAIM-Forum [mailto: <EMAIL REMOVED> ] On
> >> > >> Behalf Of Robert Fentress
> >> > >> Sent: Monday, February 5, 2018 11:00 AM
> >> > >> To: WebAIM Discussion List < <EMAIL REMOVED> >
> >> > >> Subject: [WebAIM] Explicit association with <header>
> >> > required/recommended
> >> > >> for <article>?
> >> > >>
> >> > >> If content is marked up with the <article> tag and within that
> >> <article>
> >> > >> tag there is a <header> tag, is it required or recommended to make an
> >> > >> explicit association between them using aria-labelledby attribute or
> >> > would
> >> > >> that be redundant or too verbose? Thanks!
> >> > >>
> >> > >> --
> >> > >> Rob Fentress
> >> > >> Senior Accessibility Solutions Designer
> >> > >> Assistive Technologies at Virginia Tech
> >> > >> Electronic Business Card (vCard)
> >> > >> <http://search.vt.edu/search/person.vcf?person54847>
> >> > >> LinkedIn Profile
> >> > >> <https://www.linkedin.com/in/rob-fentress-aa0b609?trk=profile-badge>
> >> > >>
> >> > >> > >> > >> > >> > >> > >> > >> > >> > >>
> >> > >
> >> > >
> >> > >
> >> > > --
> >> > > Rob Fentress
> >> > > Senior Accessibility Solutions Designer
> >> > > Assistive Technologies at Virginia Tech
> >> > > Electronic Business Card (vCard)
> >> > > <http://search.vt.edu/search/person.vcf?person54847>
> >> > > LinkedIn Profile
> >> > > <https://www.linkedin.com/in/rob-fentress-aa0b609?trk=profile-badge>
> >> > >
> >> >
> >> >
> >> >
> >> > --
> >> > Rob Fentress
> >> > Senior Accessibility Solutions Designer
> >> > Assistive Technologies at Virginia Tech
> >> > Electronic Business Card (vCard)
> >> > <http://search.vt.edu/search/person.vcf?person54847>
> >> > LinkedIn Profile
> >> > <https://www.linkedin.com/in/rob-fentress-aa0b609?trk=profile-badge>
> >> > > >> > > >> > > >> > > >> >
> >> > >> > >> > >> > >>
> >
> >
> >
> > --
> > Rob Fentress
> > Senior Accessibility Solutions Designer
> > Assistive Technologies at Virginia Tech
> > Electronic Business Card (vCard)
> > <http://search.vt.edu/search/person.vcf?person54847>
> > LinkedIn Profile
> > <https://www.linkedin.com/in/rob-fentress-aa0b609?trk=profile-badge>
> >
>
>
>
> --
> Rob Fentress
> Senior Accessibility Solutions Designer
> Assistive Technologies at Virginia Tech
> Electronic Business Card (vCard)
> <http://search.vt.edu/search/person.vcf?person54847>
> LinkedIn Profile
> <https://www.linkedin.com/in/rob-fentress-aa0b609?trk=profile-badge>
> > > >