WebAIM - Web Accessibility In Mind

E-mail List Archives

ARIA heading - hierarchy and screen readers

for

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

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