Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

...

Required Form Input Field

...

Markup

Code Block
<form novalidate>
<label for="fname">First Name:</label>
<input id="fname" required>
</form>

...

Required Group of Radio Buttons

Apply a “title” attribute to the <input> field. If a form field has a title attribute but no <label>, screen readers will treat the title as a label.

This approach is generally less reliable as some screen readers and assistive technologies do not interpret the title attribute as a replacement for the label element.

The information of the title attribute is shown to visual users as a tool tip when hovering over the form field with the mouse.

...

Markup

Use the “aria-required” attribute in combination with the “radiogroup role” in the fieldset tag.

Code Block
<fieldset aria-required="true" role="radiogroup">
<legend>Select your shipping option:</legend>
<input id="overnight" type="radio" name="shipping" value="overnight">
<label for="overnight">Overnight</label><br>
<input id="twoday" type="radio" name="shipping" value="twoday">
<label for="twoday">Two day</label><br>
<input id="ground" type="radio" name="shipping" value="ground">
<label for="ground">Ground</label>
</fieldset>

View HTML Markup on Github

...