Not the OP, but I think I might be able to answer a few of your questions there.
For dropdown menus, there are a few ways to satisfy accessibility according to the standards in WCAG 2, but I typically like "Approach 2" on the W3C page on Fly-out menus. This method ensures that keyboards and screen readers get the advantage of a mouse user by being able to jump past content that is irrelevant to them and then choose when to expand the menu.
As for your question on making sure elements are tabbable, there are a number of elements that inherently are tabbable, no additional code required. Key examples are <a> (assuming it has an href attribute), <button>, <input>, <select> and <textarea>. All browsers do this automatically.
It is generally never recommended to use tabindex unless you are using the -1 value to remove an element from the natural tabbing order (or creating a target for tabbing), or the 0 value to give an element tab focus that does not normally receive it. The order of tab focus is predetermined by the order in the DOM (therefore, the way to make your site accessible for tab order is to make sure the order of elements in code is the same order you expect a user to read the content).
If you want up to date information on accessibility practices, I would definitely use the W3C Web Accessibility Initiative resource and I'd also highly recommend WebAIM as well.
Thanks for writing this article as well, spreading the word about accessibility is definitely important, especially as it becomes more of a requirement for many organizations.
Not the OP, but I think I might be able to answer a few of your questions there.
For dropdown menus, there are a few ways to satisfy accessibility according to the standards in WCAG 2, but I typically like "Approach 2" on the W3C page on Fly-out menus. This method ensures that keyboards and screen readers get the advantage of a mouse user by being able to jump past content that is irrelevant to them and then choose when to expand the menu.
As for your question on making sure elements are tabbable, there are a number of elements that inherently are tabbable, no additional code required. Key examples are
<a>(assuming it has anhrefattribute),<button>, <input>, <select> and <textarea>. All browsers do this automatically.It is generally never recommended to use
tabindexunless you are using the -1 value to remove an element from the natural tabbing order (or creating a target for tabbing), or the 0 value to give an element tab focus that does not normally receive it. The order of tab focus is predetermined by the order in the DOM (therefore, the way to make your site accessible for tab order is to make sure the order of elements in code is the same order you expect a user to read the content).If you want up to date information on accessibility practices, I would definitely use the W3C Web Accessibility Initiative resource and I'd also highly recommend WebAIM as well.
Thanks for writing this article as well, spreading the word about accessibility is definitely important, especially as it becomes more of a requirement for many organizations.
Thank you, @sg667 . I will make sure to check out W3C's accessibility page.
Great response, @sg667 👍🏻