Как правильно сделать строку контента кликабельной с точки зрения доступности? - PullRequest
Новая
       16

Как правильно сделать строку контента кликабельной с точки зрения доступности?

0 голосов
/ 22 апреля 2019

Я пытаюсь сделать виджет, который проще всего описать как интерактивный список медиа-объектов начальной загрузки. https://getbootstrap.com/docs/4.3/components/media-object/#media-list В исходном коде событие js click связано с самим элементом элемента списка.

Моей первой мыслью было обернуть все внутри элемента элемента списка в элемент кнопки и прикрепить мое событие нажатия к кнопке. Это дает фокус на элемент списка и действует так, как я бы этого хотел. Но потом я прочитал, что это плохая практика - иметь внутри тега кнопки такие вещи, как теги div или h. 

<ul class="list-unstyled">
  <li class="media" onclick="myFunction">
    <img src="..." class="mr-3" alt="...">
    <div class="media-body">
      <h5 class="mt-0 mb-1">List-based media object</h5>
      More info
    </div>
  </li>
</ul>

VS 

<ul class="list-unstyled">
  <li>
    <button type="button" class="media" onclick="myFunction" disabled="isDisabled()">
      <img src="..." class="mr-3" alt="...">
      <div class="media-body">
        <h5 class="mt-0 mb-1">List-based media object</h5>
      More info
      </div>
    </button>
  </li>
</ul>

Так что на данный момент есть еще один способ сделать всю строку элемента списка интерактивной с помощью семантического html, или мой лучший вариант - добавить роль role =, события onkeypress для пробела и ввода, настраиваемые активные / отключенные классы и установить tabIndex для тега li?

Редактировать: Возможно, еще один способ думать о дизайне - это с этим компонентом https://getbootstrap.com/docs/4.3/components/list-group/#links-and-buttons. По сути, дизайн, который я пытаюсь сохранить, - это набор кликабельных строк, где каждая строка содержит изображение и пару коротких строки текста.

Ответы [ 2 ]

1 голос
/ 23 апреля 2019

Не вижу смысла в заголовке внутри кнопки или ссылки. Если у вас есть заголовок, он должен представлять структуру страницы.

Вы можете легко решить свою "проблему", поместив элемент "More info" в button или ссылку. Пользователи клавиатуры смогут фокусировать кнопку, а пользователи мыши смогут выбирать между кнопкой или щелчком по оболочке элемента всего списка. 

<ul class="list-unstyled">
  <li class="media" onclick="myFunction">
    <img src="..." class="mr-3" alt="...">
    <div class="media-body">
      <h5 class="mt-0 mb-1">List-based media object</h5>
      <button title="More info about List-based media object">More info</button>
    </div>
  </li>
</ul>
0 голосов
/ 23 апреля 2019

Все зависит от того, насколько точно вы хотите следовать правилам семантической разработки и планируете ли вы поддерживать страницу, разрешенную для слепых и слабовидящих.

<a> всегда следует использовать для навигациис одной страницы на другую.

<button> и <input type="button> следует использовать только для отправки формы или для действий на экране, таких как открытие и закрытие диалога и т. д.

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

Кроме того, не следует избегать слишком частого размещения элементов DOM внутри элементов без уважительной причины.Это просто добавляет беспорядок.

...