Содержание

В чем разница между атрибутами HTML ‘hidden’ и ‘aria-hidden’?

Согласно HTML 5.2 :

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

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

С другой стороны, ARIA 1.1 говорит:

[Состояние aria-hidden ] указывает, является ли элемент доступным для API.

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

aria-hidden="false" определенно будут доступны дереву. Элементы без атрибута aria-hidden находятся в состоянии «undefined (default)», что означает, что агенты пользователей должны предоставить его дереву на основе его визуализации. E.g. агент пользователя может решить удалить его, если цвет текста совпадает с цветом фона.

Теперь давайте сравним семантику. Уместно использовать hidden , но не aria-hidden , для элемента, который еще не “временно релевантен”, но может стать релевантным в будущем (в этом случае вы будете использовать динамические сценарии для удаления атрибута hidden ). И наоборот, уместно использовать

aria-hidden , но не hidden , для элемента, который всегда релевантен, но с помощью которого вы не хотите загромождать доступность API; такие элементы могут включать “визуальное чутье”, например значки и/или изображения, которые не являются существенными для пользователя.

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

Атрибут hidden должен скрывать элемент от всех презентаций, включая принтеры и программы чтения с экрана (при условии, что эти устройства соответствуют спецификациям HTML). Если вы хотите удалить элемент из дерева специальных возможностей,

а также visual media, hidden сделает свое дело. Однако не используйте hidden только потому , что вам нужен этот эффект. Сначала спросите себя, является ли hidden семантически правильным (см. Выше). Если hidden не является семантически правильным, но вы все равно хотите визуально скрыть элемент, вы можете использовать другие методы, такие как CSS.

Элементы с aria-hidden="true" не отображаются в дереве специальных возможностей, поэтому, например, программы чтения с экрана не будут их объявлять. Этот метод следует использовать осторожно, так как он обеспечит разные возможности для разных пользователей: доступные агенты пользователей не будут объявлять/отображать их, но они все равно отображаются на визуальных агентах. Это может быть хорошо, если все сделано правильно, но это может привести к злоупотреблению.

Наконец, существует разница в синтаксисе между этими двумя атрибутами.

hidden —это логический атрибут , то есть, если атрибут присутствует, он является истинным—независимо от того, какое значение он может иметь, — а если атрибут отсутствует, он является ложным. В истинном случае лучше всего либо вообще не использовать значение (

<div hidden>...</div>), либо использовать пустое строковое значение ( <div hidden="">...</div> ). Я бы не рекомендовал hidden="true" , потому что кто-то, читающий/обновляющий ваш код, может сделать вывод, что hidden="false" будет иметь противоположный эффект, что просто неверно.

aria-hidden , напротив, является перечисляемым атрибутом , допускающим одно из конечного списка значений. Если атрибут aria-hidden присутствует, его значение должно быть либо "true" , либо "false" . Если вам нужно состояние «undefined (default)», удалите атрибут полностью.

Дальнейшее чтение: https://github.com/чхарвей/chharvey.github.io/wiki/Скрытый контент

Модальное окно. Компоненты · Bootstrap. Версия v4.0.0

Используйте модальный плагин Bootstrap для добавления диалогов на ваш сайт для лайтбоксов, уведомлений пользователей или полностью настраиваемого контента.

Как это работает

До того как начать работу с модальными компонентами Bootstrap, ознакомьтесь со следующей информацией, т.к. параметры недавно изменились.

  • Модальные окна сделаны на HTML, CSS и JavaScript. Они располагаются поверх всего документа и блокируют прокрутку тела документа <body>, вместо него прокручивая модальные окна
  • Клик вне модального элемента автоматически закрывает его.
  • Bootstrap позволяет активировать лишь один модальный элемент за раз. Вложенные модальные элементы не поддерживаются, т.к. мы думаем, что они принесли бы неудобства.
  • Модальные элементы имеют position: fixed, что может вызвать иногда их частичную отрисовку. Мы рекомендуем размещать модальные элементы на самом верху страницы, когда возможно, для избегания сбоев и влияния других элементов на корректную работу модальных элементов .modal.
  • Опять же – из-за position: fixed есть некоторые сложности при использовании их на мобильных устройствах. Смотри документацию поддержки в браузерах.
  • Из-за семантики HTML5 атрибут autofocus не работает с модальными элементами Bootstrap. Чтобы добиться такого же эффекта, используйте собственный JavaScript:
$('#myModal').on('shown.bs.modal', function () {
  $('#myInput').trigger('focus')
})

Далее – использование и примеры.

Примеры

Модальные компоненты

Ниже – пример статичного модального компонента (это значит, что его position и display «преодолены»). В примере есть заголовок модального компонента, тело (требуется для padding

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

Modal body text goes here.

<div tabindex="-1" role="dialog">
  <div role="document">
    <div>
      <div>
        <h5>Modal title</h5>
        <button type="button" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div>
        <p>Modal body text goes here.</p>
      </div>
      <div>
        <button type="button">Save changes</button>
        <button type="button" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>

«Живое» демо

Изменяйте (скрывайте\показывайте) рабочий пример модального элемента по клику на кнопку ниже. Окно сползет вниз и возникнет в верху страницы.

Woohoo, you’re reading this text in a modal!

Запустить модальное окно 

<!-- Button trigger modal -->
<button type="button" data-toggle="modal" data-target="#exampleModal">
  Запустить модальное окно
</button>

<!-- Modal -->
<div tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div role="document">
    <div>
      <div>
        <h5>Modal title</h5>
        <button type="button" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div>
        ...
      </div>
      <div>
        <button type="button" data-dismiss="modal">Close</button>
        <button type="button">Save changes</button>
      </div>
    </div>
  </div>
</div>

Прокрутка длинного содержимого

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

Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.

Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.

Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.

Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.

Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.

Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.

Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.

Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.

Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.

Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.

Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.

Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.

Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.

Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.

Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.

Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.

Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.

Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.

Запустить модальное окно 

<!-- Button trigger modal -->
<button type="button" data-toggle="modal" data-target="#exampleModalLong">
  Запустить модальное окно
</button>

<!-- Modal -->
<div tabindex="-1" role="dialog" aria-labelledby="exampleModalLongTitle" aria-hidden="true">
  <div role="document">
    <div>
      <div>
        <h5>Modal title</h5>
        <button type="button" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div>
        ...
      </div>
      <div>
        <button type="button" data-dismiss="modal">Close</button>
        <button type="button">Save changes</button>
      </div>
    </div>
  </div>
</div>

Вертикальное центрирование

Добавьте .modal-dialog-centered в .modal-dialog чтобы вертикально центрировать модальное окно.

Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.

Запустить модальное окно 

<!-- Button trigger modal -->
<button type="button" data-toggle="modal" data-target="#exampleModalCenter">
  Запустить модальное окно
</button>

<!-- Modal -->
<div tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
  <div role="document">
    <div>
      <div>
        <h5>Modal title</h5>
        <button type="button" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div>
        ...
      </div>
      <div>
        <button type="button" data-dismiss="modal">Close</button>
        <button type="button">Save changes</button>
      </div>
    </div>
  </div>
</div>

Всплывающие подсказки и возникающие подсказки

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

Popover in a modal

This button triggers a popover on click.

Tooltips in a modal

This link and that link have tooltips on hover.

Запустить модальное окно 

<div>
  <h5>Popover in a modal</h5>
  <p>This <a href="#" role="button" title="Popover title" data-content="Popover body content is set in this attribute.">button</a> triggers a popover on click.</p>
  <hr>
  <h5>Tooltips in a modal</h5>
  <p><a href="#" title="Tooltip">This link</a> and <a href="#" title="Tooltip">that link</a> have tooltips on hover.</p>
</div>

Использование сетки

Используйте систему сеток Bootstrap внутри модального элемента, расположив .container-fluid внутри .modal-body. После этого используйте обычную систему сеток обычным образом.

.col-md-4

.col-md-4 .ml-auto

.col-md-3 .ml-auto

.col-md-2 .ml-auto

Level 1: .col-sm-9

Level 2: .col-8 .col-sm-6

Level 2: .col-4 .col-sm-6

Запустить модальное окно 

<div>
  <div>
    <div>
      <div>.col-md-4</div>
      <div>.col-md-4 .ml-auto</div>
    </div>
    <div>
      <div>.col-md-3 .ml-auto</div>
      <div>.col-md-2 .ml-auto</div>
    </div>
    <div>
      <div>.col-md-6 .ml-auto</div>
    </div>
    <div>
      <div>
        Level 1: .col-sm-9
        <div>
          <div>
            Level 2: .col-8 .col-sm-6
          </div>
          <div>
            Level 2: .col-4 .col-sm-6
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Комбинируйте содержимое модальных элементов

Есть много кнопок, которые все запускают один модальный элемент со слегка разным содержимым? Используйте event.relatedTarget и атрибуты data-* (возможно через jQuery) для изменения содержимого в зависимости от нажатой кнопки.

Ниже – пример демо с кодом HTML и JavaScript. Для информации по relatedTarget читайте инфо по событиям модальных элементов.

Open modal for @mdo Open modal for @fat Open modal for @getbootstrap 
<button type="button" data-toggle="modal" data-target="#exampleModal" data-whatever="@mdo">Open modal for @mdo</button>
<button type="button" data-toggle="modal" data-target="#exampleModal" data-whatever="@fat">Open modal for @fat</button>
<button type="button" data-toggle="modal" data-target="#exampleModal" data-whatever="@getbootstrap">Open modal for @getbootstrap</button>

<div tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div role="document">
    <div>
      <div>
        <h5>New message</h5>
        <button type="button" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div>
        <form>
          <div>
            <label for="recipient-name">Recipient:</label>
            <input type="text">
          </div>
          <div>
            <label for="message-text">Message:</label>
            <textarea></textarea>
          </div>
        </form>
      </div>
      <div>
        <button type="button" data-dismiss="modal">Close</button>
        <button type="button">Send message</button>
      </div>
    </div>
  </div>
</div>
$('#exampleModal').on('show.bs.modal', function (event) {
  var button = $(event.relatedTarget) // Button that triggered the modal
  var recipient = button.data('whatever') // Extract info from data-* attributes
  // If necessary, you could initiate an AJAX request here (and then do the updating in a callback).
  // Update the modal's content. We'll use jQuery here, but you could use a data binding library or other methods instead.
  var modal = $(this)
  modal.find('.modal-title').text('New message to ' + recipient)
  modal.find('.modal-body input').val(recipient)
})

Анимация при удалении

Для модальных элементов, которые возникают простым способом, а не появляются плавно, удалите из кода модального элемента класс .fade.

<div tabindex="-1" role="dialog" aria-labelledby="..." aria-hidden="true">
  ...
</div>

Динамическая высота

Если высота модального элемента изменяется при его открытии, вам следует вызвать $('#myModal').modal('handleUpdate') для обновления позиции модального элемента в случае, если возникнет полоса прокрутки.

Доступность

Удостоверьтесь, что добавили в .modal role="dialog" и aria-labelledby="...", привязанные к названию модального элемента, и role="document" в .modal-dialog. Дополнительно вы можете описать диалог модального элемента атрибутом aria-describedby, добавленным в .modal.

Встраивание видео из YouTube

Встраивание видео в модальные элементы требует дополнительного JavaScript для запрета автоматического воспроизведения и т.д. Дополнительная информация здесь.

Дополнительные размеры

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

Большое модальное окно Малое модальное окно 

<!-- Большое модальное окно -->
<button type="button" data-toggle="modal" data-target=".bd-example-modal-lg">Большое модальное окно</button>

<div tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
  <div>
    <div>
      ...
    </div>
  </div>
</div>

<!-- Малое модальное окно -->
<button type="button" data-toggle="modal" data-target=".bd-example-modal-sm">Малое модальное окно</button>

<div tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true">
  <div>
    <div>
      ...
    </div>
  </div>
</div>

Использование

Плагин модальных элементов переключает состояние вашего скрытого содержимого по требованию с помощью атрибутов или JavaScript. Он также добавляет в <body> класс .modal-open для преодоления поведения при прокрутке по умолчанию, и создает зону для клика вне модального элемента, нужную для закрытия открытых модальных элементов, класс .modal-backdrop.

Через атрибуты

Активируйте модальный элемент без JavaScript. Установите data-toggle="modal" в контролирующем элементе, таком как кнопка, наряду с data-target="#foo" или href="#foo", для обращения к функциональности “toggle” для частного модального элемента.

<button type="button" data-toggle="modal" data-target="#myModal">Launch modal</button>

Через JavaScript

Вызовите модальный элемент с id=”myModal” одной строкой JavaScript:

$('#myModal').modal(options)

Параметры

Параметры можно передавать атрибутами или JavaScript. Для использования атрибутов добавьте имя параметра в data-, например data-backdrop="".

Название Тип По умолч. Описание
backdrop boolean or the string 'static' true Подключает модальный элемент с затемненным фоном. Еще – задает static для фона, который не закрывает модальный элемент по клику на фоне.
keyboard boolean true Закрывает модальный элемент по нажатию ESC.
focus boolean true Фокусируется на модальном элементе по инициализации.
show boolean true Показывает модальный элемент по инициализации.

Методы

Асинхронные методы и переходы

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

Смотрите документацию JavaScript

.modal(options)

Активирует содержимое как модальный элемент. Принимает object параметров.

$('#myModal').modal({
  keyboard: false
})
.modal('toggle')

Вручную изменяет состояние модального элемента. Возвращается к функции-вызову до того, как модальный элемент показан или скрыт. (т.е. до того, как произойдет событие shown.bs.modal или hidden.bs.modal).

$('#myModal').modal('toggle')
.modal('show')

Вручную открывает модальный элемент. Возвращается к функции-вызову до того, как модальный элемент показан. (т.е. до того, как произойдет событие shown.bs.modal).

$('#myModal').modal('show')
.modal('hide')

Вручную прячет модальный элемент. Возвращается к функции-вызову до того, как модальный элемент показан. (т.е. до того, как произойдет событие hidden.bs.modal).

$('#myModal').modal('hide')
.modal('handleUpdate')

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

$('#myModal').modal('handleUpdate')

.modal('dispose')

Уничтожает модальный элемент.

События

Модальный элемент в Bootstrap имеет несколько событий для встраивания в функциональность. Все события модальных элементов запускаются внутри самих элементов (т.е. в <div>).

Тип события Описание
show.bs.modal Это событие запускается немедленно, когда экземпляр метода show вызван. Если оно вызвано кликом, элемент, на который кликнули, доступен как свойство события relatedTarget.
shown.bs.modal Это событие запускается, когда модальный элемент сделан видимым юзеру (будет ждать завершения переходов CSS). Если оно вызвано кликом, элемент, на который кликнули, доступен как свойство события relatedTarget.
hide.bs.modal Это событие запускается немедленно, когда экземпляр метода hide вызван.
hidden.bs.modal Это событие запускается, когда модальный элемент больше не является скрытым (будет ждать завершения переходов CSS). 
$('#myModal').on('hidden.bs.modal', function (e) {
  // do something...
})

Правила использования ARIA в HTML

От автора: Web Accessibility Initiative Accessible Rich Internet Applications Suite или WAI-ARIA, или просто ARIA – набор инструментов и руководящих принципов по повышению доступности контента и приложений. В частности технология включает набор атрибутов для HTML элементов, которые вставляют в них семантическую информацию, считываемую вспомогательными технологиями.

ARIA может быть очень полезным инструментом, однако нужно знать, как и когда использовать ее. Поэтому я составил 5 правил, которые стоит учесть при использовании ARIA в HTML.

1. Используйте семантический HTML5 вместо ARIA

«Если есть возможность использовать встроенный HTML элемент или атрибут с семантикой и нужным вам поведением, используйте его. Не меняйте назначение элементов и не добавляйте ARIA роли, состояния или свойства для достижения доступности.»

Первое правило использования ARIA в HTML – постарайтесь не использовать ARIA в HTML (если в нем нет крайней необходимости). Есть широкий ряд семантических HTML5 элементов с неявным значением, схожих с явно прописанными значениями через ARIA.

По возможности необходимо использовать семантические HTML элементы вместо ARIA атрибутов.

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

Не создавайте кнопку с помощью div и ARIA роли:

<div role=»button»>Click Me</div>

<div role=»button»>Click Me</div>  

Это неправильно. Нужно использовать тег button:

<button>Click Me</button>

<button>Click Me</button>  

2. Не меняйте значение семантических элементов с помощью ARIA ролей

«Не меняйте нативную семантику, если в этом нет крайней необходимости.»

Как я уже говорил, множество семантических HTML элементов имеют неявно заданные значения. Если мы используем button, например, то юзер агент понимает, что это интерактивный элемент (взаимодействие происходит через клик, клавишу enter или пробел), запускающий некое взаимодействие на странице. С другой стороны, если мы используем тег <a>, юзер агент поймет, что взаимодействие с этим элементом (клик или клавиша enter) приведет на другую страницу или в другую часть страницы.

Множество элементов имеют неявную семантику, которую не рекомендуется менять с помощью ARIA ролей.

<h2 role=»button»>Heading Button</h2>

<h2 role=»button»>Heading Button</h2>  

Неправильный метод. Вместо изменения семантики элемента нужно использовать подходящий тег:

<h2><button>Heading Button</button></h2>

<h2><button>Heading Button</button></h2>

Предпочтительный способ. В крайнем случае, можно применить ARIA роль к элементу без значения.

<h2><span role=»button»>Heading Button</span></h2>

<h2><span role=»button»>Heading Button</span></h2>  

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

3. Интерактивные ARIA элементы должны быть доступными во всех смыслах

«Все интерактивные ARIA элементы должны иметь управление с клавиатуры.»

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

В руководстве к ARIA есть список возможностей для каждого элемента. Например, правильная кнопка должна удовлетворять следующим требованиям:

должна нажиматься курсором;

должна нажиматься с помощью клавиши enter;

должна нажиматься с помощью пробела.

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

4. Используйте подходящие роли для видимых элементов с фокусом

«Не используйте role=»presentation» или aria-hidden=»true» на видимых элементах с фокусом.»

ARIA атрибут role=»presentation» указывает, что элемент можно использовать только в визуальных целях, с ним нельзя взаимодействовать. Атрибут aria-hidden=»true» говорит, что элемент должен быть невидимым.

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

<button role=»presentation»>Click Me</button> <button aria-hidden=»true»>Click Me</button>

<button role=»presentation»>Click Me</button>  

<button aria-hidden=»true»>Click Me</button>  

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

<button role=»presentation» tabindex=»-1″>Don’t Click Me</button> <button aria-hidden=»true»>Don’t Click Me</button>

<button role=»presentation» tabindex=»-1″>Don’t Click Me</button>  

<button aria-hidden=»true»>Don’t Click Me</button>  

5. Интерактивные элементы должны иметь доступные имена

«Все интерактивные элементы должны иметь доступные имена.»

Элементы, с которыми можно взаимодействовать, например, кнопки и ссылки должны иметь «доступные имена». Доступные имена определяются свойством accessible name в Accessibility API. Если значение валидное, значит, имя доступно.

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

<label> Username <input type=»text»> </label> <label for=»password»>Password</label> <input type=»password»>

<label>  

  Username

  <input type=»text»>

</label>

 

<label for=»password»>Password</label>  

<input type=»password»>  

Другие элементы, например, кнопки и ссылки могут получить доступные имена из своего текстового контента или атрибута label (см. HTML для скринридеров).

Источник: //bitsofco.de/

Редакция: Команда webformyself.

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

PSD to HTML

Верстка сайта на HTML5 и CSS3 с нуля

Смотреть

Использование атрибута aria-hidden — доступность

Тираж

Эта страница не завершена.

Этот метод демонстрирует, как использовать атрибут aria-hidden . Атрибут aria-hidden может либо раскрывать, либо скрывать неинтерактивный контент из API специальных возможностей.

Добавление aria-hidden = "true" к элементу удаляет этот элемент и все его дочерние элементы из дерева доступности. Это может улучшить работу пользователей вспомогательных технологий, скрыв:

  • чисто декоративное содержание, такое как значки или изображения
  • дублированный контент, например повторяющийся текст
  • закадровый или свернутый контент, например меню

Согласно четвертому правилу ARIA, aria-hidden = "true" не следует использовать для фокусируемого элемента.Кроме того, поскольку этот атрибут наследуется дочерними элементами элемента, его не следует добавлять к родительскому элементу или предку фокусируемого элемента.

Использование aria-hidden = "false" не будет повторно подвергать элемент вспомогательной технологии, если какой-либо из его родительских элементов указывает aria-hidden = "true".

Выбор между

aria-hidden = "true" , role = "presentation" и role = "none"

На первый взгляд aria-hidden = "true" , role = " Presentation " и role =" none " атрибуты кажутся похожими, потому что они:

  • скрыть контент от вспомогательных технологий
  • нельзя использовать на фокусируемом элементе
  • нельзя использовать в родительском элементе интерактивного элемента

Несмотря на это сходство, цель каждого атрибута разная.

  • aria-hidden = "true" удалит весь элемент из API специальных возможностей.
  • role = "presentation" и role = "none" удалит семантическое значение элемента, но при этом оставит его доступ к вспомогательным технологиям.

Значения

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

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

Дочерние элементы могут быть опущены в API специальных возможностей:

  

  Это не скрыто !

aria-hidden = "true" не следует добавлять, если:

  • присутствует атрибут HTML , скрытый
  • элемент или предок элемента скрыт с дисплеем : нет
  • Элемент или предок элемента скрыт с видимостью : скрыто

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

В чем разница между атрибутами HTML «hidden» и «aria-hidden»?

Согласно HTML 5.2:

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

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

С другой стороны, ARIA 1.1 говорит:

[Состояние aria-hidden ] указывает, доступен ли элемент API специальных возможностей.

Другими словами, элементы с aria-hidden = "true" удаляются из дерева доступности , что учитывается большинством вспомогательных технологий, а элементы с aria-hidden = "false" обязательно будут доступны дереву. .Элементы без атрибута aria-hidden находятся в состоянии «undefined (по умолчанию)», что означает, что пользовательские агенты должны предоставлять его дереву на основе его визуализации. Например. пользовательский агент может решить удалить его, если цвет текста соответствует цвету фона.

Теперь сравним семантику. Уместно использовать hidden , но , а не aria-hidden , для элемента, который еще не «актуален во времени», но может стать актуальным в будущем (в этом случае вы должны использовать динамические сценарии для удаления скрытый атрибут ).И наоборот, целесообразно использовать aria-hidden , но не hidden , для элемента, который всегда актуален, но которым вы не хотите загромождать API специальных возможностей; такие элементы могут включать в себя «визуальное чутье», например значки и / или изображения, которые пользователю не нужны.

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

Атрибут hidden должен скрывать элемент из всех презентаций , включая принтеры и программы чтения с экрана (при условии, что эти устройства соответствуют спецификациям HTML). Если вы хотите удалить элемент из дерева доступности , а также из визуальных носителей , подойдет , скрытый . Однако не используйте hidden только потому, что вам нужен этот эффект. Сначала спросите себя, является ли hidden семантически правильным (см. Выше).Если hidden не является семантически правильным, но вы все равно хотите визуально скрыть элемент, вы можете использовать другие методы, такие как CSS.

Элементы с aria-hidden = "true" не отображаются в дереве специальных возможностей, поэтому, например, программы чтения с экрана не будут их объявлять. Эту технику следует использовать осторожно, так как она предоставит разным пользователям различный опыт: доступные пользовательские агенты не будут их анонсировать / отображать, но они по-прежнему обрабатываются визуальными агентами. Это может быть хорошо, если все сделано правильно, но есть вероятность злоупотребления.

Наконец, существует разница в синтаксисе между двумя атрибутами.

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

), либо пустое строковое значение (