1. Put role="main" on the element that contains the main content of the page.
2. Make sure your headings are semantic (h1, h2, etc.), not just visual (e.g. divs or paragraphs with certain font sizes).
The rest is nice, but much less important IMO.
Don't get me wrong, I'm glad to see an article on this subject on the front page, and it's very thorough. I just thought a very brief summary of the essentials might be helpful.
As far as I'm aware, article and section don't do anything for screen readers. Someone please correct me if I'm wrong on that.
On the other hand, nav and banner (among others) are types of landmarks. It's nice to have those, but the one that screen reader users will want all the time is main.
I believe `<main>` is not supported in IE11 - here is a resource that you can use to check HTML5 accessibility compatibility: https://www.html5accessibility.com/
The tricky thing about when you're talking about screen readers is that you now have to take into account browser support AND screen reader support, which can sometimes multiply the amount of test cases for things.
1. Put role="main" on the element that contains the main content of the page.
2. Make sure your headings are semantic (h1, h2, etc.), not just visual (e.g. divs or paragraphs with certain font sizes).
The rest is nice, but much less important IMO.
Don't get me wrong, I'm glad to see an article on this subject on the front page, and it's very thorough. I just thought a very brief summary of the essentials might be helpful.