Можете ли мои арии описать перед входным элементом?

Question

У меня есть форма с атрибутами aria-describedby на входных алементах, а затем тег span с описанием/примером желаемого ввода. Он также имеет класс для отображения только для чтения с экрана (видимые люди могут использовать информацию placeholder).

Проблема здесь в том, что, по крайней мере, клыков, то Экранный читает этикетку, затем приглашение для ввода, затем читает aria-describedby текст.

Могу ли я переместить текст над вводом кода, например.

<label for="givenName">Given name</label> 

<span id="givenNameHelp" class="help-block sr-only">e.g. Liam</span> 

<input class="form-control" type="text" id="givenName" placeholder="Liam" aria-describedby="givenNameHelp"> 

Answer 1

Если вы уже добавляете метку HTML на вход, вам не нужно вообще использовать атрибуты ARIA. Вы можете безопасно удалить описанную арию и вставить содержимое диапазона. Пример:

<label for="givenName">Given name 
     <span id="givenNameHelp" class="help-block sr-only">e.g. Liam</span> 
</label> 
<input class="form-control" type="text" id="givenName" placeholder="Liam"> 

Надеюсь, это поможет! Как правило. Сначала попробуйте сделать доступный контент со стандартным HTML. Затем используйте ARIA для описания разделов сайта, виджетов и интерактивного поведения (например, меню, вкладки, всплывающие окна, сообщения, выпадающие списки, календари и т. Д.), А также для описания того, что вы не могли бы сделать с HTML.