WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: landmarks/regions

for

From: David Engebretson Jr.
Date: Oct 9, 2021 4:20PM

What, in your opinion, is the best resource to learn from to preach semantic HTML?

I was just looking at https://www.w3schools.com/html/html5_semantic_elements.asp and was a little underwhelmed because the DOM seems to output things that aren't important to me. Note that I don't think everything I say or do while preaching semantics is totally correct I just have some ideas for our developers that I think could (and should to avoid irony) be used at w3Schools. Here is my screen reader (latest JAWS 2021) speech output:
HTML Semantic Elements heading level 1
Link ❮ Previous
Link Next ❯
* why can't the above links just be semantic buttons?
separator
* why is a separator exposed to screen reader users?
Semantic elements = elements with a meaning.
* I like this definition...

Anyhow, I'm super interested in all of your opinions and resources regarding preaching semantic HTML,
David

-----Original Message-----
From: WebAIM-Forum < <EMAIL REMOVED> > On Behalf Of glen walker
Sent: Saturday, October 09, 2021 2:14 PM
To: WebAIM Discussion List < <EMAIL REMOVED> >
Subject: Re: [WebAIM] [EXTERNAL] landmarks/regions

>
> What surprised me the most is that headers and footers were not
> automatically landmarks.
>

Just to clarify, the header and footer elements are absolutely (*) landmark roles by default. Now, whether the verbosity setting on your screen reader is set to announce them is another issue but any tool you use to highlight all the landmarks will show the header and footer elements.

(*) Ok, maybe not "absolutely" because if a header or footer is a child of an article, aside, main, nav or section element, then the header or footer does not have a role (https://w3c.github.io/html-aria/#el-header). I don't see that structure very often, though. Most scanning tools don't honor the spec even though the accessibility tree is correct (at least in Chrome and Firefox). That is, scanning tools will complain that there are two heading landmarks if you have something like this:

<header>stuff</header>
<article><header>more stuff</header></article>

Even though the second header is marked as "role: HeaderAsNonLandmark" in the a11y tree.

Keep preaching semantic html.