WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: ARIA heading - hierarchy and screen readers

for

From: Druckman,Geri
Date: Apr 8, 2015 11:22AM

Yes, the title line is visually designed to look like a heading.
If it is needed to specifically indicate the heading level, then I¹d
rather straight up use h5 or h6 (isn¹t simpler better?), but then if that
promo component is placed on the page following a h2 header, and followed
by a h3 header, all accessibility testers will alert that the headers are
not in hierarchical order.

Does the order not matter as much?

Which is the lesser ³evil²? Not marking a heading on a component that is
not really part of the content/story, or marking heading and risking it to
disrupt the heading order and hierarchy on the page?

Geri

On 4/8/15, 12:06 PM, "Birkir R. Gunnarsson" < <EMAIL REMOVED> >
wrote:

>Hi
>
>Does the title line visually look like a heading?
>If it does, , I would advocate for marking it up as such.
>I believe it is not valid to use heading role without an aria-level,
>even if it were its behavior is unpredictable and a.t. support maybe
>spotty or inconsistent.
>I would use aria-level="5" or "6" for these types of headings. That
>definitely reflects their place within the page hierarchy, does not
>disrupt user navigating by headings to any major sections (which
>should be marked with h1, h2 or h3) and still enables users to quickly
>locate these messages, if they so choose.
>Cheers
>
>
>On 4/8/15, Druckman,Geri < <EMAIL REMOVED> > wrote:
>> Hi,
>>
>> We're in the process of re-doing our website, and with it a re-design.
>> Within the re-design we have several floating components, and by
>>'floating'
>> I do not mean CSS but they can be placed in varies spots on a page.
>>Those
>> components are short, promo like, snippet that have a title/header like
>> line, a short paragraph, and a 'call to action' link at the end of it.
>>
>> Something like the following:
>> Strength in Numbers (=title)
>> Whether you're a fighter or caregiver, support is available to you and
>>your
>> loved ones. (=short paragraph)
>> Connect with the Anderson Network (Êll to action link)
>>
>> My question is, should the title of this short promo snippet marked as a
>> header?
>> If not, we stop here, and it's all good.
>>
>> If it should be a header then this is where I have the next question.
>>Those
>> components can be placed anywhere on the page, and there is no way to
>> predict header hierarchy, and proper nesting.
>>
>> My initial thought was to mark those titles with ARIA role="heading"
>>and NOT
>> use a aria-level. Is it acceptable to just use role="heading" without
>> designating the header level?
>>
>> I also noticed when testing it (VoiceOver on MacOS 10.9.5, and JAWS
>> 15.0.12085) that there are differences in how screen readers handle
>> role="heading" without a specific level.
>>
>> JAWS read all the none defined role="heading" as heading level 2
>>regardless
>> of their place on the page, or what the previous header was, and
>>VoiceOver
>> read all (with or without a level indicated) as "A X Header".
>>
>> In your opinion, can and should those promo snippets be marked with just
>> role="heading" and no level, or should they just be left as-is
>>untouched?
>>
>> Thanks,
>>
>> Geri Druckman
>>
>> Web Development Specialist
>>
>> Accessibility & Usability
>>
>> Department of Digital Experience
>>
>> MD Anderson Cancer Center
>>
>> T 713-792-6293 | F 713-745-8134
>> >> >> >> >>
>
>
>--
>Work hard. Have fun. Make history.
>>>>