Q: Issue with checkbox aria-label which is coming as blank I have the following code:


<label class="el-checkbox el-transfer-panel__item"><span class="el-checkbox__input"><span class="el-checkbox__inner"></span><input type="checkbox" aria-hidden="false" class="el-checkbox__original" value="6" aria-labelledby="checkbox_5" id="checkbox_5"></span><span class="el-checkbox__label"><span>Total amount due</span><!----></span></label>


Every time I move my keys over it, the speech viewer shows blank. I tried many ways to fix it but its always showing the blank

A: The issue here is in how you are using aria-labelledby. This property should point to the ID of something which describes the item. In your code, you are pointing the element at itself which doesn't give it any details to work with.
The <label> property is what a screen-reader would refer to and that requires a for="" value (which your markup doesn't have). The code below illustrates a better way to approach this for accessibility.
<label for="checkboxID">
  <div class="el-checkbox__input">
    <div class="el-checkbox__inner"></div>
    <input type="checkbox" name="checkboxName" id="checkboxID"> <span class="el-checkbox__label">Total amount due</span>
  </div>
</label>

I have swapped the <span> tags for <div> because span tags should only be used for inline elements and shouldn't be used to wrap around block-level elements (such as the <input>).
Here's an example from the MDN of how you could use aria with a checkbox:
<span role="checkbox" aria-checked="false" tabindex="0" aria-labelledby="tac"></span>
<span id="tac">I agree to the Terms and Conditions.</span>

