Improving demo examples for my upcomming accessibility talk - now with interactive annotations 💡
Now it's finished 🎉: https://darekkay.github.io/presentations/accessible-web/resources/example-bad.html
@darekkay Could you elaborate the bottom and right annotation?
I'm intersted in reasoning behind design decisions, but being outside the web dev world it's hard to stay on track.
@floppy Here are the examples for some contex (with no annotations, yet): https://darekkay.github.io/presentations/accessible-web/resources/index.html
The "wrong headline order" is a technical issue. In this example, we've got H1 and H2 headlines, and those cards use H5.
"Non-descriptive link text" is about using "read more..." links. For screen reader users, this is an issue, because they could TAB through the website and all they hear is "Read more link. Read more link. Read more link.". See the accessible version for a better solution
@darekkay Thank you very much for the explanation! Yes in only the image those points were not directly obvious, but they make much sense now! I will have a look at your website examples.
Fosstodon is an English speaking Mastodon instance that is open to anyone who is interested in technology; particularly free & open source software.