Often times, web accessibility is talked about as some abstract, intangible concept.
In reality, there are a few very actionable ways to drastical...
For further actions, you may consider blocking this person and/or reporting abuse
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 ❤️🦄!
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.
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 🤣).
Nice tips! Number 2 was new to me, very nice to know!
In fact, I'd reckon they usually shouldn't match. If they're the same then the screenreader ends up announcing the same thing twice. Usually I think of the caption as providing additional context to an image not necessarily evident from the content of the image alone, or highlighting what should be noticed in the image.
Yep! It's definitely ideal for longer, more detailed descriptions.
Thanks for the new knowledge in this article. I will explore more about prefers-reduced-motion. Great Article.
Thanks Imia!
Thanks Harsh! Not sure I understand what that link is for though.
it's a spam comment ;) ignore it, will get deleted soon