WebAIM - Web Accessibility In Mind

E-mail List Archives

Thread: Landmark and HTML 5

for

Number of posts in this thread: 5 (In chronological order)

From: Jayakar, Ritu
Date: Mon, Mar 09 2020 12:20PM
Subject: Landmark and HTML 5
No previous message | Next message →

Hello Everyone,



I find contradictory information on using "role" for the HTML elements main, nav, aside and header footer. Some say these elements should be used in conjunction with aria role e.g.: <main role="main"> so that screen readers which do not recognize HTML 5 can read the role tag to recognize the section. My site needs to be tagged with landmark, I need to decide if it useful to implement, if yes what is the best practice to implement landmarks, add the role to HTML 5 elements or not.



I plan to main do two things:

1. Contain all elements/content in landmarks
2. Add uniquely identifiable landmarks especially for navigation- we have top site navigation, left bar for section navigation, breadcrumbs and repeat bottom navigation



Looking forward to hear your thoughts on this.

Thank you everyone for sharing your expertise with the community.



Kind Regards

Ritu Jayakar

From: Patrick H. Lauke
Date: Mon, Mar 09 2020 2:04PM
Subject: Re: Landmark and HTML 5
← Previous message | Next message →

On 09/03/2020 18:20, Jayakar, Ritu wrote:
>
> I find contradictory information on using "role" for the HTML elements main, nav, aside and header footer. Some say these elements should be used in conjunction with aria role e.g.: <main role="main"> so that screen readers which do not recognize HTML 5 can read the role tag to recognize the section. My site needs to be tagged with landmark, I need to decide if it useful to implement, if yes what is the best practice to implement landmarks, add the role to HTML 5 elements or not.

Out of the "modern" browsers, I believe only IE11 has problems with
recognising/exposing <main> (and I seem to remember that some screen
readers will silently patch this issue by looking at the actual DOM).

In general, unless you're explicitly targetting older browser/AT
versions (e.g. because you know from your stats/your market that older
versions are still widely in use for your particular audience), you can
just use the native HTML5 elements without additional redundant
role="..." attribute.

Having said that, adding redundant role attributes won't do any harm
either. They may be superfluous, but don't really add that much more
weight to your page. So you could play it safe and do both (native HTML
element with redundant role that says the same thing). It won't have any
adverse effect.

P
--
Patrick H. Lauke

https://www.splintered.co.uk/ | https://github.com/patrickhlauke
https://flickr.com/photos/redux/ | https://www.deviantart.com/redux
twitter: @patrick_h_lauke | skype: patrick_h_lauke

From: Jared Smith
Date: Mon, Mar 09 2020 2:21PM
Subject: Re: Landmark and HTML 5
← Previous message | Next message →

> So you could play it safe and do both (native HTML
> element with redundant role that says the same thing). It won't have any
> adverse effect.

... so long as the appropriate roles are used. We see incorrect roles
attached to regions all time time - like <nav role="menu"> (instead of
"navigation") or <footer role="complementary"> (instead of
"contentinfo"), not to mention <h2 role="header">, <input
role="search">, etc., etc.

Because of the broad current support, I no longer advise doubling up.
While doing so causes no issues if done correctly, these introduce a
place for breakage that tends to happen rather frequently.

Thanks,

Jared

From: glen walker
Date: Mon, Mar 09 2020 4:54PM
Subject: Re: Landmark and HTML 5
← Previous message | Next message →

One other comment from a spec perspective. If you look at the spec for the
<main> element or <nav> or other landmarks it specifically says:

https://www.w3.org/TR/html53/grouping-content.html#the-main-element
Allowed ARIA role attribute values: main role (default - do not set).

And then there's a definition of "do not set" at
https://www.w3.org/TR/html53/dom.html#do-not-set

But as others have said, it doesn't hurt to set it, assuming you're setting
it to a valid value, but I tend to keep my code as simple as possible and
not set things that aren't needed.

From: Max Starkenburg
Date: Mon, Mar 16 2020 8:59AM
Subject: Re: Landmark and HTML 5
← Previous message | No next message

Hi Ritu,

Others have already responded with what I think is sound feedback on this.
For what it's worth, I also wondered about such roles, but only because our
SiteImprove account would flag these redundancies as a supposed "issue" on
sites crawled for us, and because certain folks couldn't be convinced
things like this were actually a non-issue, and/or were overly concerned
with raising our SiteImprove score for the sake of higher-ups incapable of
digesting anything beyond an overly simplistic score, we wasted developer
time "fixing" our pages to remove the redundancies.

Others out there have also told me that continuing to use such redundant
roles encourages others to keep needlessly doing so, allowing makers of
assistive technology or browsers to rest on their non-standard laurels, or
propagating myths about their continued usefulness, but I thought it was
overly flattering to assume anybody would ever look at my code as a paragon
of best practices, haha.

With regard to your second bullet about making the different navigations
uniquely identifiable, my understanding is that, indeed, having different
labels (e.g. via aria-label or aria-labelledby) for the different navs is
quite important/appreciated for screen reader users.

Max
--
Maxwell M. Starkenburg
= EMAIL ADDRESS REMOVED =
https://maxwell.fyi


On Mon, Mar 9, 2020 at 2:21 PM Jayakar, Ritu < = EMAIL ADDRESS REMOVED = > wrote:

> Hello Everyone,
>
>
>
> I find contradictory information on using "role" for the HTML elements
> main, nav, aside and header footer. Some say these elements should be used
> in conjunction with aria role e.g.: <main role="main"> so that screen
> readers which do not recognize HTML 5 can read the role tag to recognize
> the section. My site needs to be tagged with landmark, I need to decide if
> it useful to implement, if yes what is the best practice to implement
> landmarks, add the role to HTML 5 elements or not.
>
>
>
> I plan to main do two things:
>
> 1. Contain all elements/content in landmarks
> 2. Add uniquely identifiable landmarks especially for navigation- we
> have top site navigation, left bar for section navigation, breadcrumbs and
> repeat bottom navigation
>
>
>
> Looking forward to hear your thoughts on this.
>
> Thank you everyone for sharing your expertise with the community.
>
>
>
> Kind Regards
>
> Ritu Jayakar
>
> > > > >