Interactive elements such as a , and button do not need a tabindex applied to them, as they can already receive keyboard focus. Additionally, using tabindex values greater than 0 is discouraged, as it creates a tab order that differs from the natural document tab order. This can create a frustrating and disorienting experience for people who use assistive technology, as they may be prevented from navigating to an interactive element on the page, or be navigated to to one that they did not expect to follow next. The Paciello Group has written about this in more detail.
+1 to Eric's comments, especially the mention of accessibility getting covered!
One other thing I'd love you to add to any a element: please be sure those href attributes are not empty... that ensures that the a will be reachable by keyboard users.
Thanks again for making a good list for beginners to accessibility.
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.
I'm really happy to see accessibility getting covered! It's a really important part of web development, and it's a foundational part of the web.
That being said, there's a couple of antipatterns in this article that need addressing:
The
.sr-onlyshould be updated to use properties that does not create mispronunciation when read by a screen reader.Interactive elements such as
a, andbuttondo not need atabindexapplied to them, as they can already receive keyboard focus. Additionally, usingtabindexvalues greater than0is discouraged, as it creates a tab order that differs from the natural document tab order. This can create a frustrating and disorienting experience for people who use assistive technology, as they may be prevented from navigating to an interactive element on the page, or be navigated to to one that they did not expect to follow next. The Paciello Group has written about this in more detail.I would also advise against using the
accesskeyattribute, as it is problematic for a variety of reasons.The other techniques presented are great things to be aware of, and I'm really enjoying having them all collected in one place like this.
Thank you for your comment Eric, I'm a beginner myself with this topic, I'll read the links carefully.
+1 to Eric's comments, especially the mention of accessibility getting covered!
One other thing I'd love you to add to any
aelement: please be sure thosehrefattributes are not empty... that ensures that theawill be reachable by keyboard users.Thanks again for making a good list for beginners to accessibility.