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.
Great except for your very last example, unfortunately you made a mistake (I thought that was funny given it was a common mistakes section 🤣).
You should (almost) never make a <h1>, <p> etc. focusable.
Screen readers have loads of ways that a person can access information on a page. For example one of those is the ability to jump between headings with the keys 1-6, so they do not need to be able to focus them, the screen reader handles all of that.
If you make headings focusable it causes two issues.
The first is for keyboard users (not using a screen reader), you are introducing unnecessary tab stops into the page which can make navigation annoying or (if you really over do it) nearly impossible.
The second is that for screen reader users it may (depending on settings) announce that an item is focusable, meaning people using a screen reader will think it may be interactive, or worse it may actually announce "clickable" as it is expected that if you can focus something it is interactive.
Full-Stack Software Engineer, creating digital solutions across various platforms. Programming and software engineering are essential part of my life just like air 😎
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.
No problem, I enjoyed the article and you highlighted the use of semantic HTML as the number one priority beautifully, so I was always going to enjoy the article once I saw that 😋
For further actions, you may consider blocking this person and/or reporting abuse
We're a place where coders share, stay up-to-date and grow their careers.
Great except for your very last example, unfortunately you made a mistake (I thought that was funny given it was a common mistakes section 🤣).
You should (almost) never make a
<h1>,<p>etc. focusable.Screen readers have loads of ways that a person can access information on a page. For example one of those is the ability to jump between headings with the keys 1-6, so they do not need to be able to focus them, the screen reader handles all of that.
If you make headings focusable it causes two issues.
The first is for keyboard users (not using a screen reader), you are introducing unnecessary tab stops into the page which can make navigation annoying or (if you really over do it) nearly impossible.
The second is that for screen reader users it may (depending on settings) announce that an item is focusable, meaning people using a screen reader will think it may be interactive, or worse it may actually announce "clickable" as it is expected that if you can focus something it is interactive.
As I said other than that, a great article ❤🦄
Thanks for your comment and explanation😀, I’ll take that out
No problem, I enjoyed the article and you highlighted the use of semantic HTML as the number one priority beautifully, so I was always going to enjoy the article once I saw that 😋