Изменить порядок чтения элементов формы HTML

Question

Я создаю такую ​​форму, где нижняя часть меток в этой строке выравнивается по прямой линии, а верхняя часть полей ввода в этой строке выравнивается по прямой линии.

Из-за некоторых ограничений в CSS (мы не можем фиксировать высоту, поскольку она будет меняться), я должен поместить метки элементов формы в первую строку, а затем поместить соответствующие поля ввода в следующую строку (так, чтобы ввод поля расположены чуть ниже их меток).

Я протестировал клавиатуру и порядок вкладок с этой HTML-структурой, она отлично работает. Мне интересно, что порядок чтения в JAWS или любой другой программе чтения с экрана не будет правильным.

Любые рекомендации для любого метода, чтобы изменить порядок чтения, или это нормально, чтобы продолжить эту структуру HTML, так как порядок вкладок работает?

Answer 1

В структуре HTML каждому вводу должен предшествовать его ярлык, а не иметь ярлыки в одной строке и вводы в следующей.

Тем не менее, у вас есть очень определенный дисплей, который вы хотите, и вы поддерживаете IE7 (без display: table), так что я думаю, что лучше всего использовать таблицу.

Вы можете сделать это доступным, если принять во внимание эти вещи:

Используйте базовую таблицу макетов для своей формы и добавьте дополнительный атрибут в тег таблицы:

<table role="presentation">

Это означает, что таблица не является таблицей с точки зрения доступности. (Я только рекомендую это при поддержке макетов IE7!) Не используйте <th> теги тоже.

Главное для программ чтения с экрана при его заполнении было бы явным отношением метки-ввода.

<label for="input_id">My label</label>
<input type="text" id="input_id">

Вы можете сказать, если это работает, нажав на метку, он должен поставить курсор на входе.

Тем не менее, ваш взгляд на чтение требует другого подхода. Когда у вас есть ряд элементов вверху, которые относятся к ряду элементов внизу, это определение таблицы данных. Поэтому, когда страница сохранена (или, тем не менее, она конвертируется в представление для чтения), используйте таблицу данных, например:

<table>
 <tr>
   <th>Customer account number</th>
   [other <th>s]
 </tr>
 <tr>
 <tr>
   <td>023456353434</td>
 ...

При считывании программой чтения с экрана она будет читать "заголовок" (например, номер счета клиента) перед содержимым (023...). Итак, изменения:

• Удалить роль
• Преобразовать верхний ряд в <th>s

Надо сказать, что это взлом, он не особенно надежен, и я, конечно, не рекомендую его для адаптивного сайта. Это чисто требуемый макет и поддержка браузера, которые приводят к этому.

Answer 2

Без просмотра вашей разметки невозможно точно сказать, но звучит так, будто у вас есть набор входов, а затем ряд меток... это не идеально для доступности.

Вы можете вкладывать элемент управления формы в элемент label, устанавливая блокировку отображения элемента управления формы для достижения того же эффекта, а также повышая удобство использования и кликабельность.