Атрибуты aria
Использование ARIA-атрибутов значительно улучшает доступность веб-приложений для пользователей с ограниченными возможностями, помогают сделать интерфейсы более понятными, удобными и функциональными.
ARIA-атрибуты в HTML
Рекомендации по использованию ARIA-атрибутов
Правильное использование помогает создавать оригинальные и доступные веб-приложения, которые работают для всех пользователей, включая тех, кто использует вспомогательные технологии. Эта статья является продолжением описания атрибутов ARIA, будьте в курсе использования атрибутов role в статье Атрибуты role, взаимосвязанных компонентов HTML.
Используйте ARIA только когда это необходимо: ARIA-атрибуты следует применять только в случаях, когда стандартные HTML-элементы и атрибуты не могут обеспечить необходимую доступность.
Избегайте дублирования: Не используйте несколько ARIA-атрибутов, которые выполняют одну и ту же функцию. Это может запутать скринридеры и ухудшить пользовательский опыт.
Тестируйте с помощью скринридеров: Всегда проверяйте свои решения с помощью скринридеров, чтобы убедиться, что ARIA-атрибуты работают так, как задумано.
Следуйте принципу минимализма: Используйте минимальное количество ARIA-атрибутов, необходимых для обеспечения доступности. Избыточное использование может привести к обратному эффекту.
Документируйте ARIA-атрибуты: Если вы используете ARIA, убедитесь, что это задокументировано в вашем коде, чтобы другие разработчики могли понять, зачем они были добавлены.
Преимущества использования ARIA-атрибутов
Улучшение доступности для скринридеров
ARIA-атрибуты позволяют скринридерам лучше понимать структуру и функциональность веб-страниц. Например, атрибуты aria-label и aria-labelledby помогают предоставить текстовое описание элементов, которые иначе остались бы непонятными для пользователей скринридеров.
<button aria-label="Закрыть">×</button>
В этом примере скринридер озвучит "Закрыть" вместо символа "×", что делает интерфейс более понятным.
Улучшение взаимодействия с динамическим контентом
ARIA-атрибуты, такие как aria-live, aria-atomic и aria-busy, помогают управлять тем, как скринридеры обрабатывают изменения на странице. Это особенно полезно для динамически обновляемого контента, такого как уведомления или загрузка данных.
<div aria-live="polite">
Новое сообщение: Привет, мир!
</div>
В этом примере скринридер автоматически озвучит новое сообщение, не прерывая текущее чтение.
Улучшение семантики для сложных виджетов
ARIA-атрибуты позволяют добавлять семантику к элементам, которые не имеют её по умолчанию. Например, с помощью role и aria-* атрибутов можно создать доступные аккордеоны, вкладки, модальные окна и другие сложные виджеты.
<div role="tablist">
<div role="tab" aria-selected="true">Вкладка 1</div>
<div role="tab" aria-selected="false">Вкладка 2</div>
</div>
В этом примере скринридеры понимают, что это вкладки, и могут сообщить пользователю о текущем состоянии.
Улучшение доступности форм
ARIA-атрибуты, такие как aria-required, aria-invalid и aria-describedby, помогают сделать формы более доступными. Они предоставляют дополнительную информацию о полях ввода, их состоянии и ошибках.
<input type="text" aria-required="true" aria-describedby="hint">
<span id="hint">Поле обязательно для заполнения.</span>
В этом примере скринридер сообщит пользователю, что поле обязательно для заполнения, и предоставит подсказку.
Улучшение доступности для пользователей с ограниченной мобильностью
ARIA-атрибуты, такие как aria-keyshortcuts, помогают пользователям с ограниченной мобильностью взаимодействовать с интерфейсом с помощью клавиатуры. Это делает веб-приложения более удобными для всех пользователей.
<button aria-keyshortcuts="Ctrl+Shift+M">Открыть меню</button>
В этом примере пользователь может открыть меню с помощью сочетания клавиш, что упрощает навигацию.
Поддержка кастомных элементов
ARIA-атрибуты позволяют добавлять доступность к кастомным элементам, которые не имеют стандартной семантики. Например, с помощью role и aria-* можно создать доступные кастомные кнопки, слайдеры и другие элементы.
<div role="button" tabindex="0" aria-pressed="false">Кастомная кнопка</div>
В этом примере элемент ведёт себя как кнопка, и скринридеры сообщат о его состоянии.
Улучшение доступности для пользователей с когнитивными нарушениями
ARIA-атрибуты, такие как aria-describedby и aria-label, помогают предоставить дополнительную информацию, которая может быть полезна для пользователей с когнитивными нарушениями. Это делает интерфейс более понятным и предсказуемым.
<button aria-label="Закрыть">×</button>
В этом примере пользователь получает чёткое описание действия кнопки, что упрощает взаимодействие.
Примеры избыточного использования ARIA-атрибутов
Избыточное использование aria-label
<button aria-label="Закрыть" aria-labelledby="closeButton">×</button>
<span id="closeButton">Закрыть</span>
Проблема: В данном примере атрибуты aria-label и aria-labelledby дублируют друг друга. Это может запутать скринридеры, так как они не знают, какой атрибут использовать для описания кнопки.
Рекомендация: Используйте только один из атрибутов. Если у элемента уже есть видимый текст, который описывает его функцию, дополнительный aria-label не нужен.
Избыточное использование aria-describedby
<input type="text" aria-describedby="hint1 hint2">
<span id="hint1">Поле обязательно для заполнения.</span>
<span id="hint2">Введите ваше имя.</span>
Проблема: Использование нескольких идентификаторов в aria-describedby может привести к избыточному озвучиванию информации, что затруднит восприятие для пользователей скринридеров.
Рекомендация: Объедините описания в один элемент или используйте только одно описание, которое наиболее точно передает необходимую информацию.
Избыточное использование aria-hidden
<div aria-hidden="true">
<span aria-hidden="false">Этот текст будет озвучен.</span>
</div>
Проблема: Вложенный элемент с aria-hidden="false" внутри элемента с aria-hidden="true" может привести к непредсказуемому поведению скринридеров.
Рекомендация: Убедитесь, что вложенные элементы не противоречат родительским атрибутам. Если элемент должен быть скрыт, все его дочерние элементы также должны быть скрыты.
Избыточное использование aria-required и required
<input type="text" aria-required="true" required>
Проблема: Атрибуты aria-required и required дублируют друг друга. Это избыточно, так как required уже указывает на обязательность поля.
Рекомендация: Используйте только required, если браузеры и скринридеры поддерживают этот атрибут. aria-required следует использовать только в случаях, когда стандартные HTML-атрибуты недоступны или недостаточны.
Избыточное использование aria-live и aria-atomic
<div aria-live="polite" aria-atomic="true">
<span>Новое сообщение:</span>
<span>Привет, мир!</span>
</div>Проблема: Если область с aria-live обновляется слишком часто, это может привести к постоянному прерыванию пользователя, что ухудшит его опыт.
Рекомендация: Используйте aria-live с осторожностью и только для действительно важных обновлений. Убедитесь, что обновления не происходят слишком часто и не мешают пользователю.
Примеры применения ARIA-атрибутов
aria-labelНазначение: Используется для предоставления текстового описания элемента, когда видимый текст отсутствует или недостаточно информативен.
<button aria-label="Закрыть">×</button>
Объяснение: Атрибут aria-label="Закрыть" предоставляет описание для кнопки с символом "×". Скринридеры озвучат "Закрыть" вместо символа.
aria-labelledbyНазначение: Используется для связывания элемента с другим элементом, который его описывает (например, заголовок для таблицы).
<h2 id="tableLabel">Таблица пользователей</h2>
<table aria-labelledby="tableLabel">
<thead>
<tr>
<th>Имя</th>
<th>Возраст</th>
</tr>
</thead>
<tbody>
<tr>
<td>Иван</td>
<td>25</td>
</tr>
</tbody>
</table>
Объяснение: Атрибут aria-labelledby="tableLabel" связывает таблицу с заголовком. Скринридеры озвучат "Таблица пользователей" перед чтением таблицы.
aria-describedbyНазначение: Используется для предоставления дополнительного описания элемента (например, подсказка для поля ввода).
<input type="text" aria-describedby="usernameHint">
<span id="usernameHint">Имя пользователя должно содержать от 3 до 15 символов.</span>
Объяснение: Атрибут aria-describedby="usernameHint" связывает поле ввода с подсказкой. Скринридеры озвучат подсказку после описания поля.
aria-hiddenНазначение: Используется для скрытия элемента от скринридеров, если он не несет полезной информации для пользователей с ограниченными возможностями.
<div aria-hidden="true">
Этот текст не будет озвучен скринридером.
</div>
Объяснение: Атрибут aria-hidden="true" скрывает элемент от скринридеров. Элемент остается видимым на странице.
aria-expandedНазначение: Используется для указания, раскрыт ли элемент (например, выпадающее меню или аккордеон).
<button aria-expanded="false" aria-controls="dropdown">Меню</button>
<ul id="dropdown" hidden>
<li>Пункт 1</li>
<li>Пункт 2</li>
</ul>
Объяснение: Атрибут aria-expanded="false" указывает, что меню свернуто. При нажатии кнопки значение меняется на true, и меню раскрывается.
aria-controlsНазначение: Используется для указания, какой элемент контролируется текущим элементом (например, кнопка, которая управляет выпадающим меню).
<button aria-controls="dropdown" aria-expanded="false">Меню</button>
<ul id="dropdown" hidden>
<li>Пункт 1</li>
<li>Пункт 2</li>
</ul>
Объяснение: Атрибут aria-controls="dropdown" связывает кнопку с выпадающим меню. Скринридеры сообщат, что кнопка управляет этим меню.
aria-liveНазначение: Используется для указания, что область страницы должна быть озвучена скринридером при изменении (например, уведомления или сообщения).
<div aria-live="polite">
Новое сообщение: Привет, мир!
</div>
Объяснение: Атрибут aria-live="polite" указывает, что изменения в этой области должны быть озвучены скринридером, но не прерывать текущее чтение.
aria-atomicНазначение: Используется для указания, должен ли скринридер озвучивать весь контент области или только измененную часть.
<div aria-live="polite" aria-atomic="true">
<span>Новое сообщение:</span>
<span>Привет, мир!</span>
</div>
Объяснение: Атрибут aria-atomic="true" указывает, что скринридер должен озвучить весь контент области, даже если изменилась только часть.
aria-relevantНазначение: Используется для указания, какие изменения в области должны быть озвучены скринридером.
<div aria-live="polite" aria-relevant="additions text">
<ul id="messageList">
<li>Сообщение 1</li>
</ul>
</div>
Объяснение: Атрибут aria-relevant="additions text" указывает, что скринридер должен озвучивать добавление новых элементов и изменения текста.
aria-busyНазначение: Используется для указания, что элемент в процессе изменения (например, загрузка данных).
<div aria-live="polite" aria-busy="true">
Загрузка данных...
</div>
Объяснение: Атрибут aria-busy="true" указывает, что элемент в процессе изменения. Скринридеры могут отложить озвучивание изменений до завершения.
aria-checkedНазначение: Используется для указания состояния чекбокса или радиокнопки (например, "выбрано" или "не выбрано").
<div role="checkbox" aria-checked="false">Чекбокс</div>
Объяснение: Атрибут aria-checked="false" указывает, что чекбокс не выбран. При нажатии значение меняется на true.
aria-pressedНазначение: Используется для кнопок, которые могут быть в состоянии "нажато" или "не нажато" (например, кнопки-переключатели).
<button aria-pressed="false">Переключатель</button>
Объяснение: Атрибут aria-pressed="false" указывает, что кнопка не нажата. При нажатии значение меняется на true.
aria-disabledНазначение: Используется для указания, что элемент отключен (например, кнопка или поле ввода).
<button aria-disabled="true">Отключенная кнопка</button>
Объяснение: Атрибут aria-disabled="true" указывает, что элемент недоступен для взаимодействия. Скринридеры сообщат, что элемент отключен.
aria-requiredНазначение: Используется для указания, что поле ввода обязательно для заполнения.
<input type="text" aria-required="true">
Объяснение: Атрибут aria-required="true" указывает, что поле обязательно для заполнения. Скринридеры сообщат пользователю, что поле обязательно.
aria-invalidНазначение: Используется для указания, что значение в поле ввода недопустимо (например, ошибка валидации).
<input type="email" aria-invalid="true" aria-describedby="emailError">
<span id="emailError">Некорректный email.</span>
Объяснение: Атрибут aria-invalid="true" указывает, что значение в поле недопустимо. Скринридеры озвучат сообщение об ошибке.
aria-haspopupНазначение: Используется для указания, что элемент имеет всплывающее окно (например, выпадающее меню или диалог).
<button aria-haspopup="true">Меню</button>
Объяснение: Атрибут aria-haspopup="true" указывает, что элемент имеет всплывающее окно. Скринридеры сообщат, что элемент имеет всплывающее меню.
aria-modalНазначение: Используется для указания, что элемент является модальным окном.
<div role="dialog" aria-modal="true">
<h2>Модальное окно</h2>
<p>Это пример модального окна.</p>
</div>
Объяснение: Атрибут aria-modal="true" указывает, что элемент является модальным окном. Скринридеры сообщат, что остальная часть страницы недоступна.
aria-keyshortcutsНазначение: Используется для указания сочетания клавиш, которое активирует элемент.
<button aria-keyshortcuts="Ctrl+Shift+M">Открыть меню</button>
Объяснение: Атрибут aria-keyshortcuts="Ctrl+Shift+M" указывает, что элемент можно активировать с помощью сочетания клавиш. Скринридеры сообщат о доступном сочетании.
aria-roledescriptionНазначение: Используется для предоставления пользовательского описания роли элемента.
<div role="button" aria-roledescription="Кастомная кнопка">Нажми меня</div>
Объяснение: Атрибут aria-roledescription="Кастомная кнопка" предоставляет пользовательское описание роли элемента. Скринридеры озвучат это описание вместо стандартного.
aria-valuemin, aria-valuemax, aria-valuenowНазначение: Используются для указания минимального, максимального и текущего значения элемента (например, слайдер или прогресс-бар).
<div role="slider" aria-valuemin="0" aria-valuemax="100" aria-valuenow="50">Слайдер</div>
Объяснение: Атрибуты aria-valuemin="0", aria-valuemax="100" и aria-valuenow="50" указывают диапазон и текущее значение слайдера. Скринридеры озвучат текущее значение.
aria-valuetextНазначение: Используется для предоставления текстового описания текущего значения элемента (например, для слайдера с нечисловыми значениями).
<div role="slider" aria-valuetext="Средняя громкость">Слайдер</div>
Объяснение: Атрибут aria-valuetext="Средняя громкость" предоставляет текстовое описание текущего значения. Скринридеры озвучат это описание.
aria-orientationНазначение: Используется для указания ориентации элемента (например, горизонтальный или вертикальный слайдер).
<div role="slider" aria-orientation="horizontal">Слайдер</div>
Объяснение: Атрибут aria-orientation="horizontal" указывает, что слайдер горизонтальный. Скринридеры сообщат ориентацию элемента.
aria-posinset, aria-setsizeНазначение: Используются для указания позиции элемента в наборе и общего размера набора (например, элементы списка).
<div role="listbox">
<div role="option" aria-posinset="1" aria-setsize="5">Пункт 1</div>
<div role="option" aria-posinset="2" aria-setsize="5">Пункт 2</div>
</div>
Объяснение: Атрибуты aria-posinset="1" и aria-setsize="5" указывают позицию элемента в наборе и общее количество элементов. Скринридеры сообщат, что это "Пункт 1 из 5".
aria-colindex, aria-rowindexНазначение: Используются для указания индекса столбца и строки в таблице или сетке.
<div role="grid">
<div role="row">
<div role="gridcell" aria-colindex="1" aria-rowindex="1">Ячейка 1-1</div>
<div role="gridcell" aria-colindex="2" aria-rowindex="1">Ячейка 1-2</div>
</div>
</div>
Объяснение: Атрибуты aria-colindex="1" и aria-rowindex="1" указывают позицию ячейки в таблице. Скринридеры озвучат индексы.
aria-colspan, aria-rowspanНазначение: Используются для указания, сколько столбцов или строк охватывает ячейка в таблице или сетке.
<div role="grid">
<div role="row">
<div role="gridcell" aria-colspan="2">Ячейка, охватывающая 2 столбца</div>
</div>
</div>
Объяснение: Атрибуты aria-colspan="2" и aria-rowspan указывают, сколько столбцов или строк охватывает ячейка. Скринридеры озвучат это.
aria-sortНазначение: Используется для указания порядка сортировки в таблице (например, по возрастанию или убыванию).
<table role="grid">
<thead>
<tr>
<th role="columnheader" aria-sort="ascending">Имя</th>
<th role="columnheader" aria-sort="none">Возраст</th>
</tr>
</thead>
<tbody>
<tr>
<td>Иван</td>
<td>25</td>
</tr>
</tbody>
</table>
Объяснение: Атрибут aria-sort="ascending" указывает, что столбец отсортирован по возрастанию. Возможные значения: ascending, descending, none, other.
aria-readonlyНазначение: Используется для указания, что элемент доступен только для чтения (например, поле ввода).
<input type="text" aria-readonly="true" value="Это поле только для чтения">
Объяснение: Атрибут aria-readonly="true" указывает, что поле ввода доступно только для чтения. Скринридеры сообщат, что элемент нельзя изменить.
aria-placeholderНазначение: Используется для предоставления подсказки в поле ввода, когда оно пустое.
<input type="text" aria-placeholder="Введите ваше имя">
Объяснение: Атрибут aria-placeholder="Введите ваше имя" предоставляет подсказку для поля ввода. Скринридеры озвучат подсказку, когда поле пустое.
aria-errormessageНазначение: Используется для связывания элемента с сообщением об ошибке.
<input type="text" aria-invalid="true" aria-errormessage="emailError">
<span id="emailError">Некорректный email.</span>
Объяснение: Атрибут aria-errormessage="emailError" связывает поле ввода с сообщением об ошибке. Скринридеры озвучат сообщение, если поле невалидно.
aria-autocompleteНазначение: Используется для указания типа автозаполнения в поле ввода (например, список предложений).
<input type="text" aria-autocomplete="list">
Объяснение: Атрибут aria-autocomplete="list" указывает, что поле поддерживает автозаполнение с предложениями. Возможные значения: none, inline, list, both.
aria-multilineНазначение: Используется для указания, что текстовое поле поддерживает многострочный ввод.
<div role="textbox" aria-multiline="true" contenteditable="true">
Введите многострочный текст...
</div>
Объяснение: Атрибут aria-multiline="true" указывает, что текстовое поле поддерживает многострочный ввод. Скринридеры сообщат об этом пользователю.
aria-detailsНазначение: Используется для связывания элемента с дополнительной информацией (например, подробное описание).
<img src="image.jpg" alt="Описание изображения" aria-details="imageDetails">
<div id="imageDetails">
<p>Это изображение было сделано в 2025 году.</p>
</div>
Объяснение: Атрибут aria-details="imageDetails" связывает изображение с дополнительной информацией. Скринридеры озвучат эту информацию.
aria-flowtoНазначение: Используется для указания следующего элемента, который должен быть озвучен скринридером после текущего.
<div id="first" aria-flowto="second">Первый элемент</div>
<div id="second">Второй элемент</div>
Объяснение: Атрибут aria-flowto="second" указывает, что после озвучивания первого элемента скринридер перейдет ко второму.
aria-ownsНазначение: Используется для указания, что элемент владеет другим элементом, который не является его потомком в DOM.
<div role="menu" aria-owns="submenu">Главное меню</div>
<div id="submenu" role="menu">Подменю</div>
Объяснение: Атрибут aria-owns="submenu" указывает, что подменю принадлежит главному меню, даже если оно не является его потомком в DOM.
aria-activedescendantНазначение: Используется для указания активного дочернего элемента в составном виджете (например, выпадающем меню).
<div role="listbox" aria-activedescendant="option1">
<div id="option1" role="option">Пункт 1</div>
<div id="option2" role="option">Пункт 2</div>
</div>
Объяснение: Атрибут aria-activedescendant="option1" указывает, что активный элемент — это "Пункт 1". Скринридеры озвучат активный элемент.
aria-colindex, aria-rowindexНазначение: Используются для указания индекса столбца и строки в таблице или сетке.
<div role="grid">
<div role="row">
<div role="gridcell" aria-colindex="1" aria-rowindex="1">Ячейка 1-1</div>
<div role="gridcell" aria-colindex="2" aria-rowindex="1">Ячейка 1-2</div>
</div>
</div>
Объяснение: Атрибуты aria-colindex="1" и aria-rowindex="1" указывают позицию ячейки в таблице. Скринридеры озвучат индексы.
aria-colspan, aria-rowspanНазначение: Используются для указания, сколько столбцов или строк охватывает ячейка в таблице или сетке.
<div role="grid">
<div role="row">
<div role="gridcell" aria-colspan="2">Ячейка, охватывающая 2 столбца</div>
</div>
</div>
Объяснение: Атрибуты aria-colspan="2" и aria-rowspan указывают, сколько столбцов или строк охватывает ячейка. Скринридеры озвучат это.
aria-sortНазначение: Используется для указания порядка сортировки в таблице (например, по возрастанию или убыванию).
<table role="grid">
<thead>
<tr>
<th role="columnheader" aria-sort="ascending">Имя</th>
<th role="columnheader" aria-sort="none">Возраст</th>
</tr>
</thead>
<tbody>
<tr>
<td>Иван</td>
<td>25</td>
</tr>
</tbody>
</table>
Объяснение: Атрибут aria-sort="ascending" указывает, что столбец отсортирован по возрастанию. Возможные значения: ascending, descending, none, other.
aria-readonlyНазначение: Используется для указания, что элемент доступен только для чтения (например, поле ввода).
<input type="text" aria-readonly="true" value="Это поле только для чтения">
Объяснение: Атрибут aria-readonly="true" указывает, что поле ввода доступно только для чтения. Скринридеры сообщат, что элемент нельзя изменить.
aria-placeholderНазначение: Используется для предоставления подсказки в поле ввода, когда оно пустое.
<input type="text" aria-placeholder="Введите ваше имя">
Объяснение: Атрибут aria-placeholder="Введите ваше имя" предоставляет подсказку для поля ввода. Скринридеры озвучат подсказку, когда поле пустое.
aria-errormessageНазначение: Используется для связывания элемента с сообщением об ошибке.
<input type="text" aria-invalid="true" aria-errormessage="emailError">
<span id="emailError">Некорректный email.</span>
Объяснение: Атрибут aria-errormessage="emailError" связывает поле ввода с сообщением об ошибке. Скринридеры озвучат сообщение, если поле невалидно.
aria-autocompleteНазначение: Используется для указания типа автозаполнения в поле ввода (например, список предложений).
<input type="text" aria-autocomplete="list">
Объяснение: Атрибут aria-autocomplete="list" указывает, что поле поддерживает автозаполнение с предложениями. Возможные значения: none, inline, list, both.
aria-multilineНазначение: Используется для указания, что текстовое поле поддерживает многострочный ввод.
<div role="textbox" aria-multiline="true" contenteditable="true">
Введите многострочный текст...
</div>
Объяснение: Атрибут aria-multiline="true" указывает, что текстовое поле поддерживает многострочный ввод. Скринридеры сообщат об этом пользователю.
aria-detailsНазначение: Используется для связывания элемента с дополнительной информацией (например, подробное описание).
<img src="image.jpg" alt="Описание изображения" aria-details="imageDetails">
<div id="imageDetails">
<p>Это изображение было сделано в 2025 году.</p>
</div>
Объяснение: Атрибут aria-details="imageDetails" связывает изображение с дополнительной информацией. Скринридеры озвучат эту информацию.
aria-flowtoНазначение: Используется для указания следующего элемента, который должен быть озвучен скринридером после текущего.
<div id="first" aria-flowto="second">Первый элемент</div>
<div id="second">Второй элемент</div>
Объяснение: Атрибут aria-flowto="second" указывает, что после озвучивания первого элемента скринридер перейдет ко второму.
aria-ownsНазначение: Используется для указания, что элемент владеет другим элементом, который не является его потомком в DOM.
<div role="menu" aria-owns="submenu">Главное меню</div>
<div id="submenu" role="menu">Подменю</div>
Объяснение: Атрибут aria-owns="submenu" указывает, что подменю принадлежит главному меню, даже если оно не является его потомком в DOM.
aria-activedescendantНазначение: Используется для указания активного дочернего элемента в составном виджете (например, выпадающем меню).
<div role="listbox" aria-activedescendant="option1">
<div id="option1" role="option">Пункт 1</div>
<div id="option2" role="option">Пункт 2</div>
</div>
Объяснение: Атрибут aria-activedescendant="option1" указывает, что активный элемент — это "Пункт 1". Скринридеры озвучат активный элемент.
aria-colindex, aria-rowindexНазначение: Используются для указания индекса столбца и строки в таблице или сетке.
<div role="grid">
<div role="row">
<div role="gridcell" aria-colindex="1" aria-rowindex="1">Ячейка 1-1</div>
<div role="gridcell" aria-colindex="2" aria-rowindex="1">Ячейка 1-2</div>
</div>
</div>
Объяснение: Атрибуты aria-colindex="1" и aria-rowindex="1" указывают позицию ячейки в таблице. Скринридеры озвучат индексы.
aria-colspan, aria-rowspanНазначение: Используются для указания, сколько столбцов или строк охватывает ячейка в таблице или сетке.
<div role="grid">
<div role="row">
<div role="gridcell" aria-colspan="2">Ячейка, охватывающая 2 столбца</div>
</div>
</div>
Объяснение: Атрибуты aria-colspan="2" и aria-rowspan указывают, сколько столбцов или строк охватывает ячейка. Скринридеры озвучат это.
aria-sortНазначение: Используется для указания порядка сортировки в таблице (например, по возрастанию или убыванию).
<table role="grid">
<thead>
<tr>
<th role="columnheader" aria-sort="ascending">Имя</th>
<th role="columnheader" aria-sort="none">Возраст</th>
</tr>
</thead>
<tbody>
<tr>
<td>Иван</td>
<td>25</td>
</tr>
</tbody>
</table>
Объяснение: Атрибут aria-sort="ascending" указывает, что столбец отсортирован по возрастанию. Возможные значения: ascending, descending, none, other.
