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

Question

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

<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> 

ИЛИ

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

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

Answer 1

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

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

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

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

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