a11y_question.md

a11y_question.md

a11y question

On a screen we want to display this sentence: Limit to X messages per Y, where X and Y are dropdown list of options.

On a screen reader we want 2 distinct fields with corresponding label:

• Email send limit X
• Email send time window Y

Note: Label are hidden with the .element-invisible class, using the clip method.

Demo

https://html.house/u7rgdrzx.html

Markup

  <div class="container-inline">

    <span aria-hidden="true">Limit to</span>
    <label class="element-invisible" for="edit-contact-threshold-limit">Email send limit </label>
    <select id="edit-contact-threshold-limit" name="contact_threshold_limit">
      <option value="1">1</option>
      <option value="2">2</option>
      <option value="...">...</option>
      <option value="500">500</option>
    </select>

    <span aria-hidden="true">messages per</span>
    <label class="element-invisible" for="edit-contact-threshold-window">Email send time window </label>
    <select id="edit-contact-threshold-window" name="contact_threshold_window">
      <option value="60">1 min</option>
      <option value="180">3 min</option>
      <option value="...">...</option>
      <option value="86400">1 day</option>
    </select>

  </div>

Feedback

Please post any relevant feedback on backdrop/backdrop-issues#3192