Accessibility error Duplicate labels used

Maksim Petrunya 0
Viewed 40

I have form

<form onsubmit="return false;" class="city-form-inner">
          <div id="ember506" class="wrap-autocomplete ember-view">  <label for="search-locations-address">Enter ZIP, State or City</label>
    <div class="autocomplete-input">
      <input aria-label="Enter ZIP, State or City" role="combobox" aria-expanded="false" type="text" name="search-locations-address" id="search-locations-address" class="form-control ember-text-field ember-view ui-autocomplete-input" autocomplete="off">
    <ul id="ui-id-1" tabindex="0" class="ui-menu ui-widget ui-widget-content ui-autocomplete custom-autocomplete ui-front" role="listbox" style="display: none;"></ul></div>
    <div role="status" aria-live="polite" class="autocomplete-status">0 results are available, use up and down arrow keys to navigate</div>
    </div>
          <input type="button" value="Find Stores" class="btn-blue submit" data-ember-action="" data-ember-action-513="513">
        </form>

and have same form in modal window, after run ARC toolkit test I get error about duplicate labels, I tried aria-hidden aria-disabled for form not in modal but it didn't help^aria-labelledby for input and nothing help or started saying the wrong text, can please hint me?

accessibility html
1 Answers

It might be because your <input> has two labels, a <label> element and an aria-label, and they happen to have the same text. I'm not sure if that triggers the warning but it's a concern in the code. The <label> will be ignored because aria-label takes precedence as noted in the Accessible Name Computation (step 2C is about aria-label and 2D is about <label>).

<label for="search-locations-address">Enter ZIP, State or City</label>
...
<input aria-label="Enter ZIP, State or City" role="combobox" aria-expanded="false" type="text" name="search-locations-address" id="search-locations-address" class="form-control ember-text-field ember-view ui-autocomplete-input" autocomplete="off">

It doesn't hurt anything in this case but is extra code you don't need. You should remove the aria-label from the <input>.

slugolicious0
Related