Я помогаю другу разработать приложение, которое включает следующую настройку формы. Есть один элемент (группа пользователей), который отличается от других тем, что он должен быть одобрен администратором, прежде чем его можно будет изменить.
Ее цель состояла в том, чтобы сделать это различие понятным для пользователя, и способ, которым она хотела это сделать, - сначала отобразить текущую группу пользователя в виде текста, а затем превратить ее в элемент выбора, когда пользователь нажимает кнопку «Изменить группу». .
У нас есть все это без проблем, единственный вопрос заключается в правильном семантическом выборе текстового элемента, представляющего текущую группу пользователя.
Мы хотели сохранить тот же семантический шаблон пар метка-ввод из приведенной выше формы, но мы не были уверены, как лучше всего представить это, когда ввод заменяется простым текстом (мы особенно заботимся об этом, поскольку это касается доступности) . В текущем проекте используется список описаний; это лучший выбор для этого случая?
Спасибо!
<form action = "/user-settings" method = "POST">
<label for = "username">Username</label>
<input id = "username" type = "text"/>
<label for = "email">Email</label>
<input id = "email" type = "text"/>
<input type = "submit" value = "Submit"/>
</form>
<hr>
<dl>
<dt>Group</dt>
<dd>{{ current_group }}</dd>
</dl>
<button>Edit Group</button>
<form action = "/group-change-request" method = "POST" class = "hidden">
<select><!--group options--></select>
<input type = "submit" value = "Request Group Change"/>
</form>
Я бы, вероятно, отобразил группу как <input readonly>
, а не как обычный текст, чтобы пользователь мог по-прежнему переходить через интерфейс и слышать метку поля (при условии, что у вас есть <label for = "id">
для поля только для чтения, как и для других полей).
Я бы также включил некоторый явно скрытый текст (но «видимый» для программы чтения с экрана), который объясняет, почему поле доступно только для чтения и как сделать его редактируемым. Что-то вроде:
<label for = "myid">group</label>
<input readonly id = "myid" aria-describedby = "desc">
<span id = "desc" class = "sr-only">The group is protected until you select the "Request Group Change" button</span>
Здесь вы можете увидеть класс "только для sr": Что такое sr-only в Bootstrap 3?