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 12:43PM

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>