WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: ARIA heading - hierarchy and screen readers

for

From: Duff Johnson
Date: Apr 8, 2015 12:55PM

Whatever you say about headings here... is this really generalizable?

Consider the case of a lawnmower manual. The most "important" text in the manual is the warning not to try to clear the mower while it's running. However, this may well not be "heading" text - maybe it's simply a paragraph within the "Critical Information" section, or whatever.

So what are you to do, with this "headings mean importance" idea in such a case?

- Following the idea that heading tags definitely connote "importance" you could argue that the warning text get should be H1 or H2.
- Following the idea that "this warning isn't a section heading, but it's still important" you could (I guess) justify using H5 or H6.

Either way, you have left any chance at consistent and predictable navigation far behind. "Importance" per se is wholly subjective - after all, instructions for starting the mower are also very "important".

"Importance" is far from synonymous with "heading". Want to use a semantic tag for this purpose? Use <strong> instead.

Note that HTML5 (and PDF, for that matter) is clear on this exact question: Heading tags are about sections - ***not*** importance.

Maybe I'm a purist. In my view (and I'm interested to hear from others on this): for HTML5, you can't get 1.3.1 (not to mention 4.1.1) right if you use headings to connote "importance" rather than following HTML5's unambiguous design intent (as evidenced by the change from HTML 4).

I blame this endless confusion about headings (an idea at the very CORE of accessibility!) on the fact that HTML4 (at least) is a very poor facsimile of the semantics people actually need (and use) in their documents.

That, and the fact that since web pages are short the size and organization of each "page" just hasn't, historically, mattered that much.

That's why there are rules for "web pages" and somewhat different rules for other forms of content….

Duff.



> On Apr 8, 2015, at 13:41, Birkir R. Gunnarsson < <EMAIL REMOVED> > wrote:
>
> 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.
> > > >