ARIA2Identificar un campo obligatorio con la propiedad aria-required

La propiedad required se indica con un asterisco colocado dentro del elemento label

<form>
  <p>Note: * denotes a required field</p>
  <div>
    <label for="usrname">Login name *:</label>
    <input aria-required="true" autocomplete="username" id="usrname" type="text">
  </div>
  <div>
    <label for="pwd">Password *:</label>
    <input aria-required="true" autocomplete="current-password" 
     id="pwd" type="password">
  </div>
  <div>
    <input type="submit" value="Login">
  </div>
</form>

La propiedad required se indica con la palabra "required" (obligatorio) colocada junto al elemento label

<form>
  <div>
    <label for="fname">First name:</label> <span>(required)</span>
    <input aria-required="true" autocomplete="given-name" id="fname" type="text">
  </div>
  <div>
    <label for="mname">Middle name:</label> <span>(required)</span>
    <input autocomplete="additional-name" id="mname" type="text">
  </div>
  <div>
    <label for="lname">Last name:</label> <span>(required)</span>
    <input aria-required="true" autocomplete="family-name" id="lname" type="text">
  </div>
  <div>
    <label for="email">Email address:</label> <span>(required)</span>
    <input aria-required="true" autocomplete="email" id="email" type="text">
  </div>
  <div>
    <label for="zip_post">Zip / Postal code:</label> <span>(required)</span>
    <input aria-required="true" autocomplete="postal-code" id="zip_post" type="text">
  </div>
  <div>
    <input type="submit" value="Next Step">
  </div>
</form>

Los campos obligatorios se indican con un borde rojo alrededor de los campos y un icono de estrella generado mediante CSS con ::after

Este ejemplo usa botones de opción personalizados con role=radio. Las propiedades CSS están disponibles debajo del formulario.

<form>
  <label data-required="true" for="acctnum">Account Number</label>
  <input aria-required="true" id="acctnum" type="text">
  <p data-required="true" id="radio_label">
    Please send an alert when balance exceeds $3,000.
  </p>
  <ul aria-required="true" aria-labelledby="radio_label" role="radiogroup">
    <li aria-checked="false" id="rb1" role="radio" tabindex="0">Yes</li>
    <li aria-checked="false" id="rb2" role="radio" tabindex="-1">No</li>
  </ul>
</form>

Definición de estilos CSS correspondiente a este ejemplo:

[aria-required=true] {
  border: red thin solid;
}
[data-required=true]::after {
  content: url('/iconStar.gif');
}