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
2 months 5 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
2 months 16 days 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
2 months 21 days 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
2 months 21 days 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
2 months 21 days 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
2 months 22 days ago

why is he using a Mac?

Сергей Шалаев
Guest
Сергей Шалаев
2 months 24 days ago

Oh God, speak more slowly please.

Susan Jones
Guest
Susan Jones
2 months 13 days ago

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

BlueBockser
Guest
BlueBockser
2 months 24 days ago

He speaks at a very normal pace in my opinion

Brooks Becton
Guest
Brooks Becton
2 months 24 days ago

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

Prashanth Kumar
Guest
Prashanth Kumar
2 months 24 days ago

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

Prashanth Kumar
Guest
Prashanth Kumar
2 months 24 days ago

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

Rob Dodson
Guest
Rob Dodson
2 months 24 days 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