テクニック ARIA2: aria-required プロパティによって必須項目を特定する

事例 1: required プロパティが 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>

事例 2: required プロパティが label 要素の後に置かれる単語 "required" によって示されている:

<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>

事例 3: 必須フィールドは、フィールドの周りの赤いボーダーと ::after を使用する CSS によってレンダリングされる星のアイコンで示される。

この事例は role=radio をもつカスタムラジオボタンを使用する。CSS プロパティはフォームの下にある。

<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>

この事例に対する関連する CSS スタイル定義:

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