WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: h2 headers for main and footer nav elements

for

From: Birkir R. Gunnarsson
Date: Aug 5, 2019 6:24AM

The short answer, it's an opinion.

The long answer.
Even if ARIA landmarks have been around for 5 or 6 years now they do
not appear to be widely used by screen reader users.
Some screen readers, I am looking at you Jaws, have even scaled down
landmark visibility by moving it into advanced verbosity or special
navigation settings (they are not announced by default), that
particular decision makes no sense to me, but that doesn't mean it
wasn't warranted.
But users are used to navigate by headings, that's what they've always
done sort of thing.
If they do you kind of have mark key landmark regions of the page with
a heading, to separate it from other sections of the page. In a screen
reader usability test I observed a user who got confused because there
were a number of h5 headings in the footer but the last article in the
main content of the page had an h3 heading title, that user thought
the footer sections were subsections of the article (and going by the
page heading structure that impression was logical).
So it helps to use h2 headings to separate sections of the page for
people who rely on headings, not landmarks.

I don't like a lot of headings and I don't like a lot of screen reader
only text, but in the case you describe, where you have headings that
also serve as landmark labels, I think you got the best of both worlds
with this setup.
So I'd leave it as is for now, we all need to figure out how users can
better take advantage of landmarks, because they have a couple of
advantages over headings:
* They they correspond to the visual layout, not the content, so they
are much more standard across webpages
* A landmark region has clear boundries, headings only label the start
of a section of content




On 8/4/19, Abby Kingman < <EMAIL REMOVED> > wrote:
> I have a question about using header markup for labeling main and footer
> nav areas.
>
> To me, it does not make sense semantically to use this method, it seems
> like these are not section areas they are nav areas, so simply adding
> aria-label to the nav elements so each one is uniquely identifiable makes
> the most sense.
>
> However, it's my understanding that these nav areas in drupal are marked up
> out-of-the-box with headers that are visible to screen readers only, then
> aria-arialabelledby is used to apply the h2 header as a unique accessible
> name for the nav element.
>
> It seems like I'm being a PITA if I ask the devs to change this every time
> (to removing the header markup and use aria-label instead), and it also
> looks like someone has thoughtfully documented the rationale for the
> heading approach (see below), so maybe it's really just a matter of opinion
> and I should leave it alone?
>
> * Headings should be used on navigation menus that consistently appear on
> * multiple pages. When this menu block's label is configured to not be
> * displayed, it is automatically made invisible using the 'visually-hidden'
> CSS
> * class, which still keeps it visible for screen-readers and assistive
> * technology. Headings allow screen-reader and keyboard only users to
> navigate
> * to or skip the links.
> * See http://juicystudio.com/article/screen-readers-display-none.php
> and * http://www.w3.org/TR/WCAG-TECHS/H42.html for more information.
>
>
> --
> Abby Kingman, CPACC
>
> Last Call Media
> > > > >


--
Work hard. Have fun. Make history.