Как использовать aria-label и aria-labelledby для получения видимых и невидимых (настраиваемых) значений от читателя?

Question

Есть ли способ получить видимое имя метки и настроенное имя, используя aria-label или aria-labelledby, или любой другой атрибут

Например, приведенный ниже код говорит:

<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>

читатель:- 1. Имя редактируемого текста (для первого поля ввода) 2. Заданный адрес редактирования текста (для 2-го поля ввода)

Я прошел через ссылку, введите описание ссылки здесь

Что я должен сделать здесь, чтобы получить сообщение как: - Установить адрес для текста редактирования адреса? какой атрибут я должен использовать здесь?

Answer 1

Для программы чтения с экрана, и потому что в вашем случае, если для ввода формы, правильный синтаксис:

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

Вы должны связать тег Label с атрибутом, который нацелен на атрибут "id".

Если вы находитесь в другом случае (например, раскрывающемся списке или вкладке):

Будет что-то вроде (здесь показан пример для раскрывающегося списка перевода):

    // 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>