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

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

Моя первая мысль заключалась в том, чтобы обернуть все внутри элемента элемента списка в элемент кнопки и прикрепить мое событие щелчка к кнопке. Это дает фокус элементу списка и действует так, как я бы хотел. Но потом я прочитал, что иметь такие вещи, как теги 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 tag?

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


html bootstrap-4 accessibility clickable
person Dookie67    schedule 22.04.2019    source источник

Ответы (2)


arrow_upward
1
arrow_downward

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

Вы можете легко решить свою «проблему», заключив элемент «Дополнительная информация» в 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>
person Adam    schedule 23.04.2019
comment
Дело в том, чтобы максимально сохранить исходный дизайн интерактивной строки. Я согласен, что заголовок внутри кнопки выглядит странно и может быть изменен на диапазон с разными стилями. Но что касается вашего решения, возможно, то, что я прошу, - это элегантный способ врезать квадратный колышек в круглое отверстие. Я новичок в мысли о доступности, и вы можете быть правы в том, что сам дизайн просто недоступен, независимо от того, как он одет. - person Dookie67; 23.04.2019
comment
@ Dookie67 Присмотритесь, строка по-прежнему доступна для кликов;) Вы можете сделать так, чтобы строка была кликабельна с помощью мыши, при этом по-разному обрабатывая доступ с клавиатуры. - person Adam; 24.04.2019

arrow_upward
0
arrow_downward

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

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

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

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

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

person Intervalia    schedule 23.04.2019
comment
Это то, что я читал между этими двумя, но это поднимает другую дилемму, которая может слишком далеко уйти от исходного вопроса. Действие щелчка откроет диалоговое окно или перейдет на новую страницу в зависимости от контекста. (В основном, если существует другая страница). Я решил, что кнопка была более подходящей из-за дополнительной логики, но более распространенным действием будет переход на новую страницу, что, в свою очередь, заставляет меня сомневаться в выборе кнопки. - person Dookie67; 23.04.2019
comment
Сказав то, что я сделал, добавлю, что Google даже не следует этому правилу с Gmail. Но если бы это был я, я бы либо просто использовал тег <a> во всех ситуациях для вашего кода, либо я бы попытался определить, существует ли страница до рендеринга. - person Intervalia; 23.04.2019