WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: ARIA heading - hierarchy and screen readers

for

From: Birkir R. Gunnarsson
Date: Apr 8, 2015 11:41AM

I actually believe this is very much in line with proper heading hierarchy.
This is a subsection of less importance )or at least less content)
than the next subsection on the page.
Yes, you may be skipping heading levels which is not an accessibility
failure under WCAG 1.3.1 except in some seriously strict
interpretation.
It will help screen reader users rather than hinder them.
The problem would come up if you marked these as h1 or h2 headings,
and then these little messages would look like primary content on the
page and disrupt the screen reader heading navigation that the user
expects.



On 4/8/15, Druckman,Geri < <EMAIL REMOVED> > wrote:
> 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.
>>>>>>>>>
> > > > >


--
Work hard. Have fun. Make history.