CODEWITHSUNDEEP
htmlaccessibilityscreen-readers
CodeCide
CodeCide

Reputation: 45

Screen readers, labels and select menus

I'm currently coding select menus without any label. Which attribute do I use for the select menu which reads the "expiration month" and "expiration year" by the screen reader?

Expiration Date Select menu

<div class="flex-exprdate">
<select id="expirymonth" name="expirymonth">
    <option value="01">01</option>
</select>
/20
<select id="expiryyear" name="expirydate">
    <option value="20">20</option>
</select>

Upvotes: 0

Views: 1300

Answers (2)

GrahamTheDev
GrahamTheDev

Reputation: 24815

The accepted answer, although technically correct is not the best answer for maximum compatibility.

You may find it surprising but support for WAI-ARIA is not brilliant in screen readers - for example IE and NVDA doesn't work correctly in Reading Mode for a label and input combination (and 'System To Go' doesn't work at all - although its usage is now only around 2%).

Instead you should use an associated label (using for="inputID").

To ensure this doesn't interfere with the design you should then 'visually hide' this label using the 'visually-hidden' class in the example below.

This will have higher compatibility and will therefore be more accessible.

Golden rule for accessibility:

WAI-ARIA should be used when there is no way to expose accessibility information using semantic HTML or to provide additional information that cannot be provided via semantic HTML but will add value to the end user.

.visually-hidden { 
    position: absolute !important;
    height: 1px; 
    width: 1px;
    overflow: hidden;
    clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
    clip: rect(1px, 1px, 1px, 1px);
    white-space: nowrap; /* added line */
}
<div class="flex-exprdate">
<label for="expirymonth" class="visually-hidden">Expiry Month</label>
<select id="expirymonth" name="expirymonth">
    <option value="01">01</option>
</select>
/20
<label for="expiryyear" class="visually-hidden">Expiry Year</label>
<select id="expiryyear" name="expirydate">
    <option value="20">20</option>
</select>
</div>

Upvotes: 0

Nick
Nick

Reputation: 1259

When you don't have a label tag, use the aria-label attribute

https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-label_attribute

Upvotes: 2

Related Questions