Как правильно закодировать/пометить элементы управления формы в таблице

Справочная информация: имеется таблица с тремя столбцами и пятью строками. Первый столбец — «Оповещения», второй столбец — «Электронная почта», а третий — «Текст». В каждой строке есть описание оповещений с флажками в столбцах «Электронная почта» и «Текст», чтобы пользователи могли подписаться или отказаться от получения уведомлений.

Вопрос: Должны ли флажки иметь соответствующие метки? Элементы управления формы (флажки) не имеют связанных меток, но зависят от контекста таблицы. Бывший. Пользователь читает тип оповещения, переходит во второй столбец, чтобы установить/снять флажок, чтобы подписаться на оповещения по электронной почте, и то же самое для третьего столбца с флажком для текстовых оповещений. С точки зрения программы чтения с экрана это все еще понятно из-за контекста заголовков столбцов и строк, но являются ли метки АБСОЛЮТНО необходимыми для требований доступности WCAG 2.1 AA?


angular accessibility wcag2.0
person Chase Thompson    schedule 24.07.2019    source источник
comment
Ярлык — это просто ярлык — либо используй его, либо нет. Не влияет на флажок   -  person Antoniossss    schedule 24.07.2019
comment
Спасибо, но я имею в виду стандарты доступности WCAG и то, являются ли они обязательными в этом сценарии. В частности, критерии WCAG 1.3.1 Информация и взаимосвязи и критерии 3.3.2 Этикетки или инструкции.   -  person Chase Thompson    schedule 24.07.2019
comment
"Label is just label - either use it or not. Does not have influence on checkbox" - Абсолютно не согласен. Он оказывает огромное влияние на флажок. Чекбокс без метки — это просто плавающий бокс, не имеющий смысла. Метка также увеличивает целевой размер — вы можете нажать на коробку или метку коробки.   -  person slugolicious    schedule 26.07.2019

Ответы (2)


arrow_upward
0
arrow_downward

Чтобы ответить на ваш вопрос: вам не обязательно иметь <label>. У WCAG есть и другие способы достижения той же цели, например, использование соседней кнопки: https://www.w3.org/WAI/WCAG21/Techniques/general/G167.html

Пользователь должен иметь возможность легко определить назначение флажка, а скринридер должен уметь слышать (желательно уникальное) имя/описание при фокусировании флажка.

Мне кажется, что "Тип оповещения" (если он уникален) можно использовать в качестве метки, связанной с флажком. Флажок в любом случае должен иметь какое-то доступное имя.

person Tobias Christian Jensen    schedule 24.07.2019
comment
Я бы установил «Электронная почта» и «Текст» в качестве меток флажков, потому что эту информацию получить труднее, чем тип оповещения; это только один из способов сделать это. - person Andre Polykanine; 24.07.2019
comment
Теперь я вижу, что флажки описаны как относящиеся к столбцу «Электронная почта» и к столбцу «Текст», поэтому я согласен с вашим предложением. - person Tobias Christian Jensen; 25.07.2019
comment
G167 может удовлетворять 3.3.2, так что поле ввода имеет метку (пример в этом URL-адресе), но все равно будет отказываться 4.1.2, если эта метка не связана с вводом программно. Пользователь перейдет к вводу и не услышит поиск. - person slugolicious; 26.07.2019

arrow_upward
0
arrow_downward

Предполагая, что каждое значение в столбце предупреждений уникально, вы можете присвоить им идентификатор и использовать атрибут aria-labelledby, чтобы связать каждый элемент флажка с его типом предупреждения, предоставив необходимую программно связанную метку. При правильной разметке заголовка таблицы средства чтения с экрана должны объявить элементы как меткой заголовка, так и меткой «тип предупреждения», чтобы обеспечить тот же контекст, который таблица предоставляет визуально. Насколько я могу судить, это должно решить любые потенциальные проблемы сбоя 1.3.1, 3.3.2 и 4.1.2. Попробуйте запустить фрагмент с помощью программы чтения с экрана, чтобы просмотреть как немаркированную, так и маркированную таблицу, чтобы увидеть разницу.

Соответствующий фрагмент кода:

<h2 id="tableLabel">Notification Preferences (labelled)</h2>
    <table aria-labelledby="tableLabel">
      <tr>
        <th>Alert Type</th>
        <th>Email</th>
        <th>Text Message</th>
      </tr>
      <tr>
        <td id="alertNewMessage">New Messages</td>
        <td>
          <input aria-labelledby="alertNewMessage" type="checkbox" />
        </td>
        <td>
          <input aria-labelledby="alertNewMessage" type="checkbox" />
        </td>
      </tr>
      <tr>
        <td id="alertBillReminder">Billing Reminders</td>
        <td>
          <input aria-labelledby="alertBillReminder" type="checkbox" />
        </td>
        <td>
          <input aria-labelledby="alertBillReminder" type="checkbox" />
        </td>
      </tr>
    </table>


* {
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 0;
  text-align: center;
}

table,
th,
td {
  border: 1px solid black;
}

table {
  table-layout: fixed;
  width: 75%;
  margin: 0 auto;
}

td {
  width: 25%;
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" <!DOCTYPE html>
  <html>

  <head>
    <title>Using aria-labelledby with selection cells in a data table</title>
  </head>

  <body>
    <h2>Notification Preferences (Unlabelled)</h2>
    <table>
      <tr>
        <th>Alert Type</th>
        <th>Email</th>
        <th>Text Message</th>
      </tr>
      <tr>
        <td>New Messages</td>
        <td>
          <input type="checkbox" />
        </td>
        <td>
          <input type="checkbox" />
        </td>
      </tr>
      <tr>
        <td>Billing Reminders</td>
        <td>
          <input type="checkbox" />
        </td>
        <td>
          <input type="checkbox" />
        </td>
      </tr>
    </table>

    <h2 id="tableLabel">Notification Preferences (labelled)</h2>
    <table aria-labelledby="tableLabel">
      <tr>
        <th>Alert Type</th>
        <th>Email</th>
        <th>Text Message</th>
      </tr>
      <tr>
        <td id="alertNewMessage">New Messages</td>
        <td>
          <input aria-labelledby="alertNewMessage" type="checkbox" />
        </td>
        <td>
          <input aria-labelledby="alertNewMessage" type="checkbox" />
        </td>
      </tr>
      <tr>
        <td id="alertBillReminder">Billing Reminders</td>
        <td>
          <input aria-labelledby="alertBillReminder" type="checkbox" />
        </td>
        <td>
          <input aria-labelledby="alertBillReminder" type="checkbox" />
        </td>
      </tr>
    </table>
  </body>

  </html>

person Ouroboros    schedule 20.08.2019