CODEWITHSUNDEEP
htmlformslabelaccessibility
Fyl
Fyl

Reputation: 288

Accessibility - label required?

I have a search field that does not (visually) require a <label>.

enter image description here

I add a title attribute on input to reminder (with the tooltip) the field description. The submit button has offscreen description to explain its function. [Q1] : Maybe it would be better to use an aria-label here?

[Q2] : To be compliant, do you always have to provide a label even if it means removing it from the screen via the sr-only class or it's not always necessary?

<div class="field field-search">
  <form action="" method="GET">
    <button type="submit" class="btn-search">
      <span class="sr-only">Search</span>
      <svg class="icon icon--search" aria-hidden="true »>…</svg>
    </button>
    <input title="Search in events" placeholder="Search in events" id="search" type="search" name="search">
  </form>
</div>

[Q2.1] Same question for those fields where the user must add links. Is a title on the input sufficient or a label is mandatory? If so, can I also set it to "sr-only"?

enter image description here

<form method="post" action="">
  <ul class="social-links social-links--inline">
    <li class="social-links__item">
      <div class="social-links__icon">
         <svg class="icon" aria-hidden="true »>…/svg>
      </div>
      <input title="My website" placeholder="My website" id="website" type="text" name="user_website_url">
    </li>
  </ul>
  <br>
  <input aria-label="Save links" type="submit" value="Submit">
</form>

Upvotes: 1

Views: 1117

Answers (1)

slugolicious
slugolicious

Reputation: 17435

There are two kinds of answers to this:

  1. What do I minimally have to do to be accessible
  2. What's the best user experience

From a minimal perspective, what does WCAG require? Remember that WCAG is a baseline. Just because you pass WCAG does not mean you have a pleasant user experience.

WCAG 3.3.2 says your input field needs a label, but that label does not have to be a text label. It can be an icon, provided the icon has an accessible name so that it can be associated with the input field.

So in your search field example, having a magnifying glass to serve as the input field's label is ok. It's generally accepted that that icon means search. But there could be some users that are not familiar with the icon so having a real text label would benefit them. Is the text label required (by WCAG)? No, but it's a better user experience.

With your other link fields, those icons may or may not be recognized. YouTube and Twitter might be reconigized but there's a chance the person filling in the fields is not a social media person so they might not know what the icons mean. Does having the icon pass WCAG? Yes. Is it good for the user? It depends on your target audience. If your page is intended for people who are social media savvy, then it's probably ok. If the page is meant for people in general, then it might not be sufficient.

Remember that the placeholder attribute disappears as soon as the user starts typing so the visible label provided by the placeholder won't be visible anymore and could be confusing for some users.

From a user experience perspective, I would recommend both an icon and a real text label. For the text label, you can make it a "floating" label.

Upvotes: 4

Related Questions