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

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

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

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

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

Спасибо!

<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>
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Введение в CSS
Введение в CSS
CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.
Как выровнять Div по центру?
Как выровнять Div по центру?
Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
Toor - Ангулярный шаблон для бронирования путешествий
Toor - Ангулярный шаблон для бронирования путешествий
Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...
0
0
40
1

Ответы 1

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

Другие вопросы по теме