Лучшие элементы для сохранения отношения метка-ввод для элементов без ввода? - PullRequest
Новая
       13

Лучшие элементы для сохранения отношения метка-ввод для элементов без ввода?

0 голосов
/ 25 октября 2018

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

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

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

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

Спасибо! 

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

1 Ответ

0 голосов
/ 26 октября 2018

Я бы, вероятно, отобразил бы группу как <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-only": Что такое sr-only в Bootstrap 3?

...