DEV Community

SonicDev
SonicDev

Posted on • Edited on

1 1

2 ways of making your form inputs accessible

#html #react

Recently, my team has been working on accessibility for testing. And we've had problems with getting our input elements to be following the principles of the testing-library

As per the priority in the docs, we should be using getByRole most often for the test to resemble how the user interacts with it in the browser. For example:

// get the textbox that has the label of 'Bar'
getByRole('textbox', { name: 'Bar' });
Enter fullscreen mode Exit fullscreen mode

So for us to use getByRole, we should make sure that the <input /> is related to the <label />.

There are 2 ways we can do this:

<label htmlFor="foo">Bar</label>
<input id="foo" type="text" />
Enter fullscreen mode Exit fullscreen mode

and

<label>Bar
  <input type="text" />
</label>
Enter fullscreen mode Exit fullscreen mode

This way, we can make sure that our form elements are accessible, not only by the user but also by our tests.

Cheers! ☕ 🍺

Reference: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label

profile
Neon
 Promoted

Hot sauce if you're wrong - web dev trivia for staff engineers

Hot sauce if you're wrong · web dev trivia for staff engineers (Chris vs Jeremy, Leet Heat S1.E4)

  • Shipping Fast: Test your knowledge of deployment strategies and techniques
  • Authentication: Prove you know your OAuth from your JWT
  • CSS: Demonstrate your styling expertise under pressure
  • Acronyms: Decode the alphabet soup of web development
  • Accessibility: Show your commitment to building for everyone

Contestants must answer rapid-fire questions across the full stack of modern web development. Get it right, earn points. Get it wrong? The spice level goes up!

Watch Video 🌶️🔥

Top comments (0)