JSFiddle - React, Tailwind, and code Playground

by luka kupunia

HTML

<h1>Web Accessibility</h1>
<h2>Associate a label with every form control</h2>
<p>
  Use a for attribute on the label element linked to the id attribute of the form element, or using WAI-ARIA attributes. In specific situations it may be acceptable to hide label elements visually, but in most cases labels are needed to help all readers understand the required input.
</p>
<img src="img/01.jpg" alt="">
<h3>Approach 1: Hiding the label element</h3>
<p>
  <p>In this approach, the label element is provided to identify a form control within the code, but it is visually hidden to avoid redundancy for users who can derive the purpose from the visual cues.
  </p>
  <img src="img/02.jpg" alt="">
  <h3>Approach 2: Using aria-label</h3>
  <p>
    The aria-label attribute can also be used to identify form controls. This approach is well supported by screen readers and other assistive technology, but, unlike the title attribute (see below), the information is not conveyed to visual users. The approach should therefore only be used when the label of the control is clear from the surrounding content, like the button in the example below.
  </p>
  <img src="img/03.jpg" alt="">
  <h3>Approach 3: Using aria-labelledby</h3>
  <p>The aria-labelledby attribute can also be used to identify form controls. This approach is well supported by screen readers and other assistive technology, but, unlike the title attribute (see below), the information is not conveyed to visual users. The approach should therefore only be used when the label of the control is clear from the surrounding content, like the button in the example below.

    The id of the element containing the label text is used as the value of the aria-labelledby attribute.</p>
  <img src="img/04.jpg" alt="">
  <h3>Approach 4: Using the title attribute</h3>
  <p>The title attribute can also be used to identify form controls. This approach is generally less reliable and not recommended because some screen readers and assistive...

CSS

@import url('https://fonts.googleapis.com/css?family=Roboto&display=swap');

body {
  margin: 0;
  padding: 0 20px;
}

* {
  box-sizing: border-box;
  font-family: 'Roboto', sans-serif;
}

h1 {
  text-align: center;
}

li {
  margin: 20px 0;
}