<!-- Explicit association: for attribute matches input id -->
<label for="username">Username</label>
<input type="text" id="username" name="username">

<!-- This works even when label and input are far apart in the DOM -->
<div class="form-row">
  <div class="label-column">
    <label for="bio">Biography</label>
  </div>
  <div class="input-column">
    <textarea id="bio" name="bio" rows="4"></textarea>
  </div>
</div>

<!-- Implicit: input nested inside the label -->
<label>
  Username
  <input type="text" name="username">
</label>

<!-- Works, but some assistive technologies handle this
     less reliably. Explicit association is safer. -->

<!-- Search input with no visible label -->
<input type="search" aria-label="Search this site">
<button aria-label="Search">
  <svg aria-hidden="true">...</svg>
</button>

<!-- Close button -->
<button aria-label="Close dialog">×</button>

<!-- Note: aria-label OVERRIDES any text inside the element.
     If the button says "Go" but aria-label says "Submit form",
     screen readers announce "Submit form". -->

<!-- Heading acts as label for a section's form control -->
<h3 id="shipping-heading">Shipping Address</h3>
<input type="text" aria-labelledby="shipping-heading"
       placeholder="Street address">

<!-- Combine multiple text sources -->
<span id="item-name">Blue Widget</span>
<label id="qty-label">Quantity</label>
<input type="number" aria-labelledby="qty-label item-name">
<!-- Announces: "Quantity Blue Widget" -->

<!-- aria-labelledby takes priority over <label> and aria-label.
     Priority order: aria-labelledby > aria-label > <label> -->

<!-- Approach 1: aria-label (simplest) -->
<button aria-label="Delete item">
  <svg aria-hidden="true" viewBox="0 0 24 24">
    <path d="M6 19c0 ..."></path>
  </svg>
</button>

<!-- Approach 2: Visually hidden text -->
<button>
  <svg aria-hidden="true" viewBox="0 0 24 24">
    <path d="M6 19c0 ..."></path>
  </svg>
  <span class="sr-only">Delete item</span>
</button>

<!-- The sr-only class (screen-reader only): -->
<style>
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
</style>

<!-- Approach 3: SVG title element (least reliable) -->
<button>
  <svg viewBox="0 0 24 24" role="img">
    <title>Delete item</title>
    <path d="M6 19c0 ..."></path>
  </svg>
</button>
<!-- Some screen readers ignore <title> in SVG.
     Use approach 1 or 2 for reliable support. -->

<!-- Radio button group -->
<fieldset>
  <legend>Preferred contact method</legend>
  <label>
    <input type="radio" name="contact" value="email"> Email
  </label>
  <label>
    <input type="radio" name="contact" value="phone"> Phone
  </label>
  <label>
    <input type="radio" name="contact" value="post"> Post
  </label>
</fieldset>
<!-- Screen reader: "Preferred contact method, group. Email, radio button, 1 of 3" -->

<!-- Related address fields -->
<fieldset>
  <legend>Billing address</legend>
  <label for="street">Street</label>
  <input type="text" id="street" name="street">
  <label for="city">City</label>
  <input type="text" id="city" name="city">
  <label for="postcode">Postcode</label>
  <input type="text" id="postcode" name="postcode">
</fieldset>

<!-- Explain the convention once at the top of the form -->
<p>Fields marked with <span aria-hidden="true">*</span>
   <span class="sr-only">an asterisk</span> are required.</p>

<!-- Each required field -->
<label for="email">
  Email address
  <span class="required-star" aria-hidden="true">*</span>
</label>
<input type="email" id="email" name="email"
       required
       aria-required="true">

<!-- The required attribute does double duty:
     1. Triggers browser validation (prevents empty submission)
     2. Most screen readers announce "required"

     Adding aria-required="true" provides extra assurance
     for screen readers that don't honor the HTML5 required attribute.
-->

<!-- Optional field (be explicit when most fields are required) -->
<label for="nickname">
  Nickname <span class="optional-text">(optional)</span>
</label>
<input type="text" id="nickname" name="nickname">

<!-- Help text linked via aria-describedby -->
<label for="password">Password</label>
<input type="password" id="password" name="password"
       required aria-required="true"
       aria-describedby="password-help">
<p id="password-help" class="help-text">
  Must be at least 8 characters with one number and one symbol.
</p>
<!-- Screen reader: "Password, required, secure edit text.
     Must be at least 8 characters with one number and one symbol." -->

<!-- Error container starts empty; content is added by JS on validation -->
<label for="email2">Email</label>
<input type="email" id="email2" name="email"
       required aria-required="true"
       aria-describedby="email-help email-error"
       aria-invalid="false">
<p id="email-help" class="help-text">Enter your work email</p>
<p id="email-error" class="error-text" aria-live="assertive"></p>
<!-- Keep the error container in the DOM but empty.
     When validation fails, set its textContent via JS.
     aria-live="assertive" ensures the new text is announced.
     You can reference multiple IDs in aria-describedby;
     they're announced in order, separated by a pause. -->

<!-- Video embed -->
<iframe
  title="Project introduction video"
  src="https://www.youtube-nocookie.com/embed/abc123"
  allowfullscreen>
</iframe>

<!-- Contact form from a third-party service -->
<iframe
  title="Contact form"
  src="https://forms.example.com/contact">
</iframe>

<!-- Map embed -->
<iframe
  title="Office location: Amsterdam Science Park"
  src="https://maps.example.com/embed?q=...">
</iframe>

<!-- Purely decorative iframe? Hide it from assistive technology. -->
<iframe
  src="animation.html"
  aria-hidden="true"
  tabindex="-1">
</iframe>