Как сгруппировать входные данные, доступные без набора полей?

Question

Проблема: группировка элементов формы

У меня есть HTML-форма, где в нескольких местах один элемент управления состоит из нескольких входов. Одним из примеров является группа переключателей.

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

Например, допустим, у меня есть такой элемент управления:

<div class="control">
  <div class="control-label">Type</div>
  <div class="control-inputs">
    <input type="radio"
           name="type"
           value="a"
           id="type-a" />
    <label for="type-a">A</label>

    <input type="radio"
           name="type"
           value="b"
           id="type-b" />
    <label for="type-b">B</label>
  </div>
</div>

Стандартные проблемы решения: проблемы стиля Fieldset

fieldset стихия и это ребенок legend кажется, сделано именно для этого (используется в примере ниже).

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

<fieldset class="control">
  <legend class="control-label">Type</legend>
  <div class="form-inputs">
    <input type="radio"
           name="type"
           value="a"
           id="type-a" />
    <label for="type-a">A</label>

    <input type="radio"
           name="type"
           value="b"
           id="type-b" />
    <label for="type-b">B</label>
  </div>
</fieldset>

Вопрос: есть ли другой способ?

Это заставляет меня задуматься, есть ли какой-то доступный способ сгруппировать несколько элементов управления формы, кроме использования fieldset элемент?

Возможное решение: role="group"?

Существует роль "группы" (используется в приведенном ниже примере), которую можно добавить к простой div и похоже, что он может выполнить эту работу, но нигде не указано, что это функциональный эквивалент использования набора полей. И если это так, то как мне пометить элемент этой группы в качестве эквивалента legend?

<div role="group"
     class="control">
  <div class="control-label">Type</div>
  <div class="control-inputs">
    <input type="radio"
           name="type"
           value="a"
           id="type-a" />
    <label for="type-a">A</label>

    <input type="radio"
           name="type"
           value="b"
           id="type-b" />
    <label for="type-b">B</label>
  </div>
</div>

Answer 1

По сути, вы уже ответили на свой вопрос в разделе "Возможное решение" (кстати, как слепой человек, я просто впечатлен тем, как вы назвали свой вопрос заголовками!). Вы пропустили одну крошечную и простую вещь, aria-label атрибут:

<div role="group" class="control" aria-label="Type">

Примечание: это будет невидимым на экране, это решение только для чтения с экрана. Однако, если вы хотите сделать его видимым, выполните следующие действия, используя aria-labelledby атрибут вместо:

<div role="group" class="control" aria-labelledby="pseudolegend">
<div id="pseudolegend" class="style-it-like-a-legend">Type</div>
[...]
</div>

pseudolegend может быть span или даже pКонечно, если вы найдете это более подходящим.
Быстрый и грязный локальный тест, который я сделал, показал, что, по крайней мере с JAWS и Chrome, нет никакой разницы между fieldset и div с aria-label,

Answer 2

Примечание: для групп переключателей, в частности, вы можете использовать role=radiogroup, Кроме того, для того, чтобы семантика group или же radiogroup для выражения пользователям программы чтения с экрана требуется доступное имя для элемента группировки.

Answer 3

Вы также можете использовать , чтобы это не повлияло на структуру визуализируемых элементов иfieldsetбудет проигнорирован.

Примечание: display: contentsСвойство все еще частично поддерживается, пожалуйста, проверьте его в разделе «Могу ли я использовать перед реализацией».