Published on May 26, 2017 by Chrome

Accessibility Fundamentals: Semantics and Navigating Content
goo.gl/KgU3v3

One of the key goals in building an accessible experience is to make sure users of assistive technology can browse the page efficiently. Proper usage of h1-h6 headings can really improve the browsing experience for someone on a screen reader, because they help the user quickly create a mental outline for the page content. Combine this with HTML5 landmark elements like main and nav, and the user can take advantage of built-in screen reader feature to quickly jump from one section of the site to the next. Today on A11ycasts I’ll show you how this works using the VoiceOver screen reader and a few simple examples.

Screen reader navigation strategy survey: goo.gl/H6H8OB

Watch all A11ycasts episodes: goo.gl/06qEUW

Subscribe to the Chrome Developers YouTube channel for updates on new episodes of A11ycasts: goo.gl/LLLNvf

Leave a Reply

13 Comments on "Why headings and landmarks are so important — A11ycasts #18"

Notify of
avatar

Jonathan Hodgson
Guest
Jonathan Hodgson
3 days 23 hours ago

I have heard a lot of people saying that each <section> element should now contain an H1. Is this advisable from an accessibility point of view?

François Bacconnet
Guest
François Bacconnet
20 days 2 hours ago

There's one (or two) things that will always save the image I have of Google: your care for accessibility. I was sensitized to that issue in the web more than ten years ago. I'm sure that if we want a better web for everyone, someone has to teach web developers​ how to do things well.Thank you Rob for those basic tricks that are very easy to implement. And yes, please slow a little your speech for foreigners with a not so good level in English. Cheers!

Thiago Cruz
Guest
Thiago Cruz
25 days 15 hours ago
Before I say something, thanks for the video, really helpful.I would appreciate if you do not teach people hacks, like hiding content as useful tool, if you are going to properly add something to the screen reader read, you have to actually make it visible for the other users as well, not just for a robot or the screen reader. This is bad practice for HTML and coding, if you want something to be useful make it useful for everyone. At least that is my opinion, I may be wrong, but I do not like hiding content and I don't… Read more »
Thiago Cruz
Guest
Thiago Cruz
24 days 18 hours ago

Thanks! I really didn't know that, good to know! But I still don't think we should hide tags, but in certain aspects I know it's needed. That is great news for me!Thanks for sharing this!

Jonathan Neal
Guest
Jonathan Neal
24 days 19 hours ago
This is a well written concern that I faced as well. Thankfully, Google addressed this somewhat recently. The verdict: Hiding headings is SEO-friendly, or at least Google friendly. As explained:> Using something like that is fine. In general, what happens in a case like this is that we focus on the visible, primary content of the page, and de-emphasize the hidden / out-of-view content. So if you're providing extra context & hints like that, that would be fine. There's no "penalty" or "demotion" for having such additional content on a page (and at the same time, it's not something where… Read more »
Avi Mehra
Guest
Avi Mehra
26 days 15 hours ago

why is he using a Mac?

Сергей Шалаев
Guest
Сергей Шалаев
28 days 4 hours ago

Oh God, speak more slowly please.

Susan Jones
Guest
Susan Jones
16 days 21 hours ago

You can go to settings and adjust the speed. I often speed things up but don't for him 🙂

BlueBockser
Guest
BlueBockser
28 days 12 minutes ago

He speaks at a very normal pace in my opinion

Brooks Becton
Guest
Brooks Becton
28 days 16 hours ago

These are always super awesome. Thanks for putting these together!

Prashanth Kumar
Guest
Prashanth Kumar
28 days 16 hours ago

Thanks, Rob. where is the code shown in the example?

Prashanth Kumar
Guest
Prashanth Kumar
28 days 12 hours ago

Cool. Thanks, Rob. I like your tutorials all the time. Great help!

Rob Dodson
Guest
Rob Dodson
28 days 14 hours ago

this exact example isn't staged anywhere, but it's based on the final project from our Udacity course at bit.ly/web-a11y

wpDiscuz