ARIA17Agrupar campos relacionados con role="group" o role="radiogroup"

Número de la seguridad social

Los campos de un número de la seguridad social, que tiene nueve dígitos y se divide en tres segmentos, pueden agruparse mediante role="group".

<div role="group" aria-labelledby="ssn1">
  <span id="ssn1">Social Security Number</span> 
  <span style="color: #D90D0D;"> (required)</span>
  <input size="3" type="text" aria-required="true" title="First 3 digits">-
  <input size="2" type="text" aria-required="true" title="Next 2 digits">-
  <input size="4" type="text" aria-required="true" title="Last 4 digits">
</div>

Ejemplo funcional: Grupos de campos de varias partes.

Identificar grupos de botones de opción

Este ejemplo muestra el uso de role=radiogroup. Observe también que los botones de opción son controles personalizados con role=radio. Opcionalmente, puede emplearse CSS para colocar un borde alrededor de los grupos de estos campos y reforzar visualmente la relación de grupo. Las propiedades CSS están disponibles debajo del formulario.

<h3>Set Alerts for your Account</h3>
<div role="radiogroup" aria-labelledby="alert1">
  <p id="alert1">Send an alert when balance exceeds $3,000</p>
  <div>
    <span role="radio" aria-checked="false" aria-labelledby="a1r1" name="a1radio"></span>
    <span id="a1r1">Yes</span>
  </div>
  <div>
    <span role="radio" aria-checked="false" aria-labelledby="a1r2" name="a1radio"></span>
    <span id="a1r2">No</span>
  </div>
</div>
<div role="radiogroup" aria-checked="false" aria-labelledby="alert2">
  <p id="alert2">Send an alert when a charge exceeds $250</p>
  <div>
    <span role="radio" aria-checked="false" aria-labelledby="a2r1" name="a2radio"></span>
    <span id="a2r1">Yes</span>
  </div>
  <div>
    <span role="radio" aria-checked="false" aria-labelledby="a2r2" name="a2radio"></span>
    <span id="a2r2">No</span>
   </div>
</div>
<input type="submit" value="Continue" name="continue_btn">

Definición de estilo CSS relacionada para colocar un borde alrededor del grupo de campos:

div[role=radiogroup] {
  border: black thin solid;
}

Ejemplo funcional: usar funciones de agrupación para identificar controles de formulario relacionados.