Accessibility First DevRel. I focus on ensuring content created, events held and company assets are as accessible as possible, for as many people as possible.
The skip links section you need to make it clear that the skip link should be offscreen / visually hidden but still focusable and then visible when focused.
It isn’t really for screen readers as they use other ways to navigate, it is for people who don’t use a mouse and use the Tab key to navigate.
<main> should wrap all of the main content not just be part of a section so your example is misleading on semantic HTML. w3.org/TR/html-main-element/#the-m...
<time> should always have a datetime attribute to ensure it is announced correctly in screen readers, not just for SEO, your second one is correct but you missed it on the first one.
Figcaption should be different to alt as pointed out in another comment otherwise this cause unnecessary duplication.
Summary and Details aren’t dropdowns, that may confuse people calling them that. They are disclosure elements or you could call them accordions if you want to make it easier to understand.
With all that being said (and most of them are minor points) this is a great article and introduction to accessibility “quick wins” that people can easily implement.
Accessibility First DevRel. I focus on ensuring content created, events held and company assets are as accessible as possible, for as many people as possible.
Further to the skip links - "modern" accessibility tools including Apples VoiceOver uses semantic markup first before things like skip links. This means each page you visit it will look for a <main> and automatically skip to it or bypass anything in <nav> making the skip links even less useful for screen reader tech (keyboard nav is different kettle of fish)
The skip links section you need to make it clear that the skip link should be offscreen / visually hidden but still focusable and then visible when focused.
It isn’t really for screen readers as they use other ways to navigate, it is for people who don’t use a mouse and use the Tab key to navigate.
<main>should wrap all of the main content not just be part of a section so your example is misleading on semantic HTML. w3.org/TR/html-main-element/#the-m...<time>should always have adatetimeattribute to ensure it is announced correctly in screen readers, not just for SEO, your second one is correct but you missed it on the first one.Figcaption should be different to alt as pointed out in another comment otherwise this cause unnecessary duplication.
Summary and Details aren’t dropdowns, that may confuse people calling them that. They are disclosure elements or you could call them accordions if you want to make it easier to understand.
With all that being said (and most of them are minor points) this is a great article and introduction to accessibility “quick wins” that people can easily implement.
Definitely deserves a ❤️🦄!
Thanks for your feedback - all your points are correct and helpful! I definitely should have been more clear about the skip link.
But yes, the goal is to provide examples of some actionable quick wins for people just getting started.
Then you did that beautifully as the article explains why and how to do things really well.
I did think you knew skip links as you explained all the bits, just maybe a phrasing issue (or the way I read it 🤣).
Further to the skip links - "modern" accessibility tools including Apples VoiceOver uses semantic markup first before things like skip links. This means each page you visit it will look for a
<main>and automatically skip to it or bypass anything in<nav>making the skip links even less useful for screen reader tech (keyboard nav is different kettle of fish)Interesting, I hadn't heard this before, thanks for sharing! In any case, it is still useful for users that use their keyboard to navigate.