Bootstrap модальная кнопка закрытия aria-hidden = true

В соответствии с загрузочный документ добавление aria-hidden="true" сообщает вспомогательным технологиям пропустить модальные элементы DOM, что объясняет наличие aria-hidden=true в главном modal div.

Какова цель добавления aria-hidden=true для модальной кнопки закрытия в modal-header div?

<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      **<*div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;       </button>
        <h4 class="modal-title" id="myModalLabel">Modal title</h4>
      </div>***
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

Ответ 1

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

Чтобы сделать его доступным, кнопка закрытия должна выглядеть примерно так:

<button type="button" title="Close">
  <span aria-hidden="true">&times;</span>
  <span class="hide">Close</span>
</button>

И визуально скрыть содержимое .hide с помощью CSS.

Ответ 2

Атрибуты ARIA используются, чтобы сделать Интернет более доступным для людей с ограниченными возможностями, особенно тех, которые используют программы чтения с экрана. С точки зрения зрения, мы можем видеть, что & times; (x) используется как "X", что указывает на то, что если вы нажмете на него, модаль закроется. Для кого-то, использующего программу чтения с экрана, если модаль настроен соответствующим образом:

<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>

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

<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span>&times;</span></button>

<button type="button" class="close" data-dismiss="modal" aria-label="Close">&times;</button>

Оба из них приведут к такому же результату при чтении устройством чтения с экрана, в котором говорится "Закрыть символ умножения символа" или что-то в этом роде.

<button type="button" class="close" data-dismiss="modal" aria-label="Close" aria-hidden="true">&times;</button>

В этом последнем случае добавление aria-hidden = "true" к самой кнопке заставит экранное устройство игнорировать всю кнопку закрытия, заставляя пользователя продолжать читать нижний колонтитул, прежде чем открывать кнопку закрытия (если есть закройте кнопку в нижнем колонтитуле, если нет, у них будет трудное закрытие)

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

Я знаю, что я как бы ушел из темы здесь, но, когда вы используете атрибуты aria, просто притворяйтесь, что вы используете экранный ридер и визуально видите контент, контент, который может быть понят только визуально, должен иметь на нем скрытые на арии теги, и система тегов ARIA предоставляет гораздо больше типов тегов для предоставления дополнительной информации тем, кто в ней нуждается, включая элементы, видимые только для чтения с экрана.

Для получения дополнительной информации: https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA

Ответ 3

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

кнопка закрытия может выглядеть так

 <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;    </button>

или

<button type="button" class="close" data-dismiss="modal">&times;</button>

Ответ 4

@ Ответ Даниэля Гранкона должен быть принятым ответом.

просто добавим немного: Bootstrap также предоставляет класс sr-only, чтобы скрыть элементы доступности.

<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>

<button type="button" class="sr-only" data-dismiss="modal">Dismiss</button>

@ Годе Агарунов - Спасибо за ваш очень информативный ответ и арию-лейбл. Я думаю, что имеет смысл добавить элемент для доступности, а не вложить новый элемент в существующий.