WebAIM - Web Accessibility In Mind

E-mail List Archives

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

for

From: Steve Faulkner
Date: Feb 11, 2018 5:40AM

>1. What should assistive technologies do with the article role? Jaws
>lumps it in with landmarks rather than inventing a whole new way to
> navigate the page (sensible).

JAWS did lump article in with regions, but no longer does (JAWS 2018).
Reason why not? it is not a region.
There is an open bug to add a separate method to navigate to article
elements.
https://github.com/FreedomScientific/VFO-standards-support/issues/28
What I have suggest to my colleagues at Freedom Scientific is to repurpose
the ctrl+z shortcut, which provides navigation to <div>s, to provide
article navigation.

--

Regards

SteveF
Current Standards Work @W3C
<http://www.paciellogroup.com/blog/2015/03/current-standards-work-at-w3c/>;

On 6 February 2018 at 08:35, Mallory < <EMAIL REMOVED> > wrote:

> 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>
> > > > > > > > > > > > >