WebAIM - Web Accessibility In Mind

E-mail List Archives

h2 headers for main and footer nav elements

for

From: Abby Kingman
Date: Aug 4, 2019 8:31PM

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