как перечислить поля ввода

Я хочу сделать форму входа в систему как:

<form>
<label>Username:<input type="text" name="username"></label>
<label>Password:<input type="password" name="password"></label>
</form>

но некоторые пишут так:

<form>
<ul>
<li><label>Username:<input type="text" name="username"></label></li>
<li><label>Password:<input type="password" name="password"></label></li>
</ul>
</form>

OR

<form>
<p><label>Username:<input type="text" name="username"></label></p>
<p><label>Password:<input type="password" name="password"></label></p>
</form>

первый вопрос: какой путь рекомендуется и почему? во-вторых: будет ли какой-либо из этих методов мешать чтению с помощью «программ чтения с экрана» для слепых?


forms html screen-readers
person Edward Torvalds    schedule 26.11.2014    source источник
comment
К сожалению, этот вопрос поощряет ответы только на мнения. Независимо от того, что вы делаете, убедитесь, что у вас есть атрибуты for в каждой из ваших меток, если вы беспокоитесь о доступности.   -  person mattytommo    schedule 26.11.2014
comment
Я думаю по-другому... должен быть метод, который будет рекомендован для улучшения стиля или хорош для чтения с экрана.   -  person Edward Torvalds    schedule 26.11.2014
comment
См. этот ответ: stackoverflow.com/questions/8524087/ демонстрирует вашу проблему и показывает, почему нет рекомендуемого решения   -  person mattytommo    schedule 26.11.2014
comment
Похоже, что единственным решением является исследование и открытие того, что скринридеры делают на практике. Я подозреваю, что ваш первый вариант может работать лучше всего, потому что, по ссылке mattytommo, семантически li и p имеют определенные значения, которые на самом деле не соответствуют цели ввода формы, но это предположение. Я предлагаю вам попробовать эти три блока кода в программе чтения с экрана и посмотреть, что произойдет. Разместите свой ответ.   -  person Robert Munn    schedule 26.11.2014

Ответы (1)


arrow_upward
1
arrow_downward

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

ul li { list-style-type: none; }

Далее, теги <label> достаточно подходят для связанных входных имен... нет необходимости в дополнительном пространстве блочных элементов, создаваемом тегом <p>. Метка сообщает, что ввод имеет своего рода идентичность.

Наконец, что касается влияния на программы чтения с экрана, как я и подозревал, программа чтения с экрана должна уметь определять, что находится на анализируемой странице. Он не знает, какие элементы по умолчанию. Следовательно, если у вас есть список вещей, какой лучший способ использовать элемент, который воплощает то, что вы передаете... <ul><li></li></ul>

Вот ссылка и ресурс, который объясняет вам больше последнего: https://webaccessibility.withgoogle.com/unit?unit=1&lesson=5

person Community    schedule 26.11.2014