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

Question

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

Owing to some restriction in CSS (мы не можем исправить высоту, поскольку она будет меняться), я должен поместить метки элементов формы в первую строку, а затем поместить их соответствующие поля ввода в следующую строку (так что поля ввода расположены чуть ниже их меток).

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

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

Answer 1

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

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

Answer 2

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

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

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

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

<table role="presentation"> 

Это означает, что таблица не является таблицей с точки зрения доступности. (I только когда-либо рекомендую это при поддержке макетов 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

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