Есть ли семантический путь в HTML5 и WAI-ARIA, чтобы описать «Toggleable Help Content»?

Question

Я пытаюсь найти семантически правильный способ описания элемента HTML, представляющего способ получения справки (например, значок справки) и его содержимого справки. Я попытался найти по этим темам, но поиск справки о помощи - непростой бизнес. Вот бы простой пример того, что я имею в виду (используя простой скрипт, чтобы показать/скрыть содержимое справки, а также усиливая «название» атрибут):

<div> 
    Please enter your password 
    <a class="help" title="Your password must have 5 characters"> 
     <img src="/images/help.svg" alt=""> 
    </a> 
    <span class="helpText displayNone"> 
     Your password must have 5 characters. 
    </span> 
    <input type="password> 
</div> 

Есть ли лучший способ представить это (в этом формате). Идея состоит в том, чтобы иметь доступный и удобный для SEO способ описать «доступный контент справки».

Речь идет о HTML/HTML5 и WAI-ARIA атрибуты (не JavaScript) - Я ищу лучший элемент представления моего примера (если такое понятие существует).

Answer 1

Я думаю, что этот вопрос больше, чем вы предполагаете, основываясь на вашей разметке. Во-первых, давайте очистить ваш пример таким образом, есть соответствующие семантические и структурные элементы в месте, которые также делают это доступным для пользователей:

<div> 
    <label for="pwd">Please enter your password</label> 
    <input type="password" id="pwd"> 
</div> 

Это делает доступным поле. Нет сценария, нет ARIA. Только <label>, который правильно связан с полем.

Теперь вы хотите помочь пользователю и по-прежнему ассоциировать его с полем.

Во-первых, не используйте якорь. Это говорит пользователям вспомогательных технологий, что они уберут их со страницы, и они могут не захотеть щелкнуть или активировать элемент управления. Используйте <button>.

Затем вы можете использовать ARIA для связывания этого наконечника с полем. В этом случае вместе с полем будет объявлено aria-describedby.

Вам также нужно заполнить атрибут alt, иначе ваше изображение не будет объявлено пользователю-читателю экрана.

Лучшая роль ARIA в этом контексте - role=tooltip (read more in the ARIA spec).

Вот один из способов вы можете подойти к нему:

<div> 
    <label for="pwd">Please enter your password</label> 
    <button><img src="/images/help.svg" alt="Help"></button> 
    <span id="pwd-tip" role="tooltip">Your password must have 5 characters.</span> 
    <input type="password" id="pwd" aria-describedby="pwd-tip"> 
</div> 

Вы можете использовать CSS, чтобы определить, если кнопка имеет фокус и отобразить следующий родственный промежуток (button:focus + span), если необходимо избежать сценария, но это неаккуратно , Вы можете использовать скрипт для переключения класса на button, который использует аналогичный CSS, чтобы отобразить span.

Вы можете поместить текст в <label> и скрыть его, используя технику CSS вне экрана, то есть она будет всегда анонсирована для чтения с экрана, а затем вы можете сбросить aria-describedby.

Честно говоря, вы можете сделать это несколькими способами. Проверьте взаимодействие с клавиатурой, которое вы должны рассмотреть и на ARIA Practices description for a tooltip.

Тем не менее, по большей части вам лучше делать текст своей помощи всегда видимым (особенно если вы хотите удовлетворить туманное понятие SEO). В вакууме я бы просто поместил этот текст в <label> и покончил с этим.