(Photo by Bundo Kim on Unsplash)
Before diving into this post, you should know what accessibility is. A good place to start could be this "What is...
For further actions, you may consider blocking this person and/or reporting abuse
I'm pretty inexperienced with JS testing & just bad about including accessibility tags, so this may be an uneducated question: Could you kill two birds with one stone by using accessibility tags in your query selector?
If it's readable enough for you to write your tests wouldn't that also help you make sure screen readers, etc are getting the correct information?
Yes you can, in fact, Testing Library's
getByLabelTextwill actually check thearia-labelandaria-labelledbyattributes of elements when searching for nodes with the given label (see part of the magic in the source here)In some cases it can make perfect sense to include the ARIA attributes in your query selectors, in others not so much. Think of the assertion error message you would be getting in your terminal when running the test and evaluate if it is a clear representation of what's going on.
Also think of what it is that you are trying to assert, if we go back to one of the examples in the post, you could try to find an element with the
aria-busyattribute with just one query selector and kill two birds with one stone, like you said, but in reality, the presence of the element, and whether the element is busy or not are two separate points of failure that should have two separate expectations, instead of a combined one.Does it make sense?
This is a great list!! I never knew about the aria-busy attribute. Definitely going to be using that more in my apps instead of my classic “loading” class.
Do you have any good resources for the widely used aria attributes? I’ve tried to wade through docs before and really the only things I can find are the w3c docs...and those are pretty intimidating.
Hey Adam, great question! Here's the "official" list of state related ARIA attributes: w3.org/WAI/PF/aria-1.1/states_and_... (scroll down to see an actual bullet list) that maybe you already bumped into 😅.
As for a list of widely used attributes, I haven't seen any myself but I assume it must exist. Maybe I would suggest scanning through the full list and taking notes of the ones that sound like attributes you would use often. That would vary depending on the types of apps each developer writes.
And on another note, MDN has a lot of great posts on Accessibility that I think you'll find pretty helpful and you can start there before diving into the W3 docs:
developer.mozilla.org/en-US/docs/L...
Let me know how it goes! Also if you find any resource that helped you reply here and I'll add it to the post, I'm sure it'll be helpful to others as well.