How to use aria-label and aria-labelledby to get visible and non-visible(customized) value from the reader?

Question

Is there any way to get the visible label name and the customized name either by using aria-label or by using aria-labelledby or any other attribute

For example the below code is saying:

<div>
    <div id="shankar">Name</div>
    <input type="text" aria-labelledby="shankar"/>
</div>
<div>
    <div id="set-address">Address</div>
    <input type="text" aria-label="set-address"/>
</div>

reader:

1. Name edit text(for first input box)
2. Set-address edit text(for 2nd input box)

I have gone through this question: Difference between aria-label and aria-labelledby

What should I do here to get the message as:- Set-address for Address edit text?

which attribute should I use here?

Answer 1

For screen reader, and because your case if for form input, the right syntax is :

<div>
    <label for="shankar">Name</label>
    <input type="text" id="shankar"/>
</div>

You have to associate Label tag by for attribute who target "id" attribute.

If you are on another case (like dropdown or tabpanel) :

Will be something like (here example show for case dropdown of translation):

    // My label structure
<button id="associatedLang" role="button" title="" aria-expanded="true">
    <span class="ps-current-lang">FR</span>
    <span aria-hidden="true" class="ps-icon ps-icon-chevron-down"></span>
    <span class="sr-only">Changer de langue</span>
</button>

//MY associated content 

<ul aria-labelledby="associatedLang">
    <li class="ng-star-inserted">
        <a target="_self" href="####" lang="en" title="EN - English">
        EN
      </a>
    </li>
</ul>