⚙️
Front-end patterns
  • Введение
  • Шаблоны
    • Эффекты CSS
      • Overlay
      • Анимация display:none
      • Текст
        • Фон текста градиент с анимацией
      • Элементы формы
        • Вертикальное выравнивание placeholder по вертикали
      • Ссылки
        • Градиент как основной цвет
        • Линия под ссылкой ездит слева направо при наведении
      • Скрывать блок .clipped
    • Модальное окно
      • Dialog
    • Элементы формы
      • Select
      • Radio
      • CheckBox
      • Ввод текста (input)
        • Телефон (tel)
        • Почта (email)
      • Кнопка
    • Вкладки/Списки
      • Вкладки или Табы (tabs)
      • Аккордеон (Accordion)
    • Навигация
      • Основная и дополнительная навигация на сайте
        • Анимирование основной навигации
      • Пропустить навигацию
      • Хлебные крошки (Breadcrumbs)
      • Кнопка основной навигации (Бургер)
    • Структуры
      • Контейнер
      • Столбцы
      • Прогресс
      • Горизонтальная прокрутка карточек
      • Цитата
    • Тэги (семантика)
      • Текст
      • Логика
    • Увеличить скорость загрузки страницы
    • Шрифты
  • JS
    • Прокрутка страницы
    • Анимация элементов
  • A11Y
    • Фокус с клавиатуры
    • No sort
  • WordPress
    • Решения и подсказки
    • Плагины
    • Натягиваем сайт
      • Пустая тема
      • Делаем главную (пустую) страницу
      • Подключаем стили и js
      • Заменяем содержимое файлов (header, footer, page)
    • Свой плагин
      • Шаблон
      • Административная часть
      • Пользовательская часть
      • Локализация плагина
  • Ghost
    • Создание своей темы
      • Фалы шаблона
        • Partials
          • footer.hbs
          • header.hbs
          • post_card.hbs
        • index.hbs
        • default.hbs
        • post.hbs
      • Переменные
      • Циклы, условия и функции
  • Visual Studio
  • Gulp
    • Deploy on GitHub
    • Плагин
    • Моя сборка
      • Изображения
  • Регулярные выражения
  • Алгоритмы
    • Поиск
    • Сортировка
    • Поиск в ширину (глубину)
    • Типы данных
  • Конструкторы сайтов
Powered by GitBook
On this page
  • aria-haspopup
  • aria-label
  • aria-describedby
  • aria-labelledby
  • aria-controls
  • aria-expanded
  • aria-checked
  • aria-current
  • aria-live
  • role=navigation
  • role=img
  • role=status
  • role=menu
  • role=presentation
  • role=menuitem
  • role=menuitemradio
  • role=menuitemcheckbox

Was this helpful?

  1. A11Y

No sort

aria-haspopup

Определяет вызывает ли элемент появление выпадающего меню (списка)ю Можно устанавливать на элемент “button” Сообщает вспомогательным технологиям, что кнопка управляет меню. Название этого свойства немного вводит в заблуждение, поскольку подразумевает, что его можно использовать для любого типа всплывающих окон. Это не тот случай! Это свойство предназначено только для использования со всплывающими меню (например, не с диалоговыми окнами, всплывающими подсказками или всплывающей подсказкой).

aria-label

Необходим для создания описания к элементам.

aria-describedby

Атрибут используется для указания идентификаторов элементов, описывающих объект.

Пример 1:
<div role="application" aria-labelledby="calendar" aria-describedby="info">
    <h1 id="calendar">Calendar</h1>
    <p id="info">
        This calendar shows the game schedule for the Boston Red Sox.
    </p>
    <div role="grid">
        ...
    </div>
</div>
Пример 2:
<button aria-label="Close" aria-describedby="descriptionClose"
    onclick="myDialog.close()">X</button>

...

<div id="descriptionClose">Closing this window will discard any information entered and
return you back to the main page</div>

aria-labelledby

Cодержит идентификаторы (атрибут id) меток для таких обьектов как элементы ввода (input), виджеты, группы. Атрибут создает связь между обьектами и их метками. Вспомогательные технологии, такие как средства чтения экрана, используют этот атрибут чтобы собирать все метки в каталог документа, из которого пользователь может перемещаться между ними. Без идентификатора (атрибута id) вспомогательные технологии не могут собрать данные обьекты в каталог.

Example 1: Multiple Labels
<div id="billing">Billing</div>
<div>
    <div id="name">Name</div>
    <input type="text" aria-labelledby="billing name"/>
</div>
<div>
    <div id="address">Address</div>
    <input type="text" aria-labelledby="billing address"/>
</div>

Example 2: Associating Headings With Regions
<div role="main" aria-labelledby="foo">
   <h1 id="foo">Wild fires spread across the San Diego Hills</h1>
   Strong winds expand fires ignited by high temperatures ...
</div>
Example 3: Radio Groups

<div id="radio_label">My radio label</div>
<ul role="radiogroup" aria-labelledby="radio_label">
    <li role="radio">Item #1</li>
    <li role="radio">Item #2</li>
    <li role="radio">Item #3</li>
</ul>
Example 4: Dialog Label
<div role="dialog" aria-labelledby="dialogheader">
    <h2 id="dialogheader">Choose a File</h2>
    ... Dialog contents
</div>
Example 5: Inline Definition
<p>The doctor explained it had been a <dfn id="placebo">placebo</dfn>, or <span role="definition" aria-labelledby="placebo">
an inert preparation prescribed more for the mental relief of the patient than for its actual effect on a disorder.</span>
</p>
Example 6: Definition Lists
<dl>
    <dt id="anathema">anathema</dt>
    <dd role="definition" aria-labelledby="anathema">a ban or curse solemnly pronounced by ecclesiastical authority
                                                     and accompanied by excommunication</dd>
    <dd role="definition" aria-labelledby="anathema">a vigorous denunciation : cursor</dd>

    <dt id="homily">homily</dt>
    <dd role="definition" aria-labelledby="homily">a usually short sermon</dd>
    <dd role="definition" aria-labelledby="homily">a lecture or discourse on or of a moral theme</dd>
</dl>
Example 7: Menus
<div role="menubar">
    <div role="menuitem" aria-haspopup="true" id="fileMenu">File</div>
    <div role="menu" aria-labelledby="fileMenu">
        <div role="menuitem">Open</div>
        <div role="menuitem">Save</div>
        <div role="menuitem">Save as ...</div>
        ...
    </div>

aria-controls

Сообщает вспомогательным технологиям, какое меню управляет этой кнопкой.

aria-expanded

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

aria-checked

Сообщает вспомогательным технологиям, установлен ли флажок menuitemradio или menuitemcheckbox. Обратите внимание, что мы не используем aria-selected.

aria-current

Ссылка на текущий элемент данных

aria-live

Создает вежливую live-область вокруг заголовка. Это означает, что состояние заголовка будет объявлено вспомогательными технологиями при его изменении.

role=navigation

Создает ориентир навигации для вспомогательных технологий.

role=img

Применяется к тэгам SVG для закладки для усиления семантики изображения.

role=status

Создает вежливую live-область вокруг заголовка. Это означает, что состояние заголовка будет объявлено вспомогательными технологиями при его изменении.

role=menu

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

role=presentation

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

role=menuitem

Сообщает вспомогательным технологиям, что эта команда меню имеет поведение кнопки

role=menuitemradio

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

role=menuitemcheckbox

Сообщает вспомогательным технологиям, что эта команда меню имеет поведение флажка

PreviousФокус с клавиатурыNextWordPress

Last updated 3 years ago

Was this helpful?