Все атрибуты, которые начинаются с aria- это атрибуты для Accessible Rich Internet Applications.
Они нужны для того, чтобы вашим сайтом было проще пользоваться людям с ограниченными возможностями. На них опирается браузер, у которого включены в настройках соответствующие опции и отрисовывает контент в более удобном для таких людей виде.
В данном случае атрибут aria-current=»page» проставляется у тех ссылок, которые ведут на текущую страницу, на которой мы уже находимся (текущий активный пункт меню) на случай, если стили отображения ссылок с классом .current или .active будут недостаточно очевидны.
Отслеживать
ответ дан 18 июн 2021 в 11:28
1,453 10 10 серебряных знаков 16 16 бронзовых знаков
html5
bootstrap
Важное на Мете
Похожие
Подписаться на ленту
Лента вопроса
Для подписки на ленту скопируйте и вставьте эту ссылку в вашу программу для чтения RSS.
Нажимая «Принять все файлы cookie» вы соглашаетесь, что Stack Exchange может хранить файлы cookie на вашем устройстве и раскрывать информацию в соответствии с нашей Политикой в отношении файлов cookie.
Эффективное использование ARIA в HTML5
ARIA это аббревиатура от Accessible Rich Internet Applications (доступные насыщенные интернет-приложения), использование этого стандарта позволяет сделать сайт более доступным для людей с ограниченными способностями, например, с нарушениями слуха или зрения. Посмотрим, что могут сделать разработчики, чтобы облегчить им жизнь.
Один из способов использования этого стандарта — добавление ARIA в разметку HTML. Вы наверняка знакомы с семантическими элементами HTML такими как nav , button или header . Легко понять, для чего можно использовать эти элементы. Они дают больше смысла содержимому страницы и мы можем использовать комбинацию этих элементов и ARIA в разметке. Однако для совместного их использования стоит учитывать несколько вещей.
Роли ARIA
Роли ARIA добавляются в разметку HTML как атрибуты. Они определяют тип элемента и указывают цель, которой он служит. В следующем примере элемент идентифицируется как баннер:
Еще один пример: здесь роль сообщает сведения о том, что элемент содержит информацию о содержимом страницы.
This website was built by Georgie.
Оповещение будет выглядеть так:
Please upgrade to the latest version of your browser for the best experience.
role=”alert” полноценно работает с элементами, динамически добавляемыми в DOM или при смене отображения, например, с display:none to display:block
Следующая роль одна из моих любимых, ее я использую, когда элемент используется чисто декоративно. Если вы представите человека со скринридером, подумайте об элементах, содержимое которых нет смысла зачитывать. Это могут быть декоративные элементы или пустые элементы, используемые для фона.
Элементы span (как и div) в большинстве случаев не нуждаются в указании role=”presentation”, так как не являются объектами в дереве доступности браузера (accessibility tree). Но для семантических элементов типа h1 — h6 это имеет смысл.
Атрибуты ARIA
Атрибуты ARIA немного отличаются от ролей ARIA. Они также добавляются в разметку, но существует уже определенный диапазон атрибутов ARIA. Все атрибуты используют префикс aria- и делятся на две группы: состояния и свойства.
Значения атрибутов-состояний изменяются в результате взаимодействия с пользователем.
Значения атрибутов-свойств, как правило, остаются неизменны.
Пример ARIA атрибута-состояния это aria-checked , используемый в таких элементах как чекбоксы и радиокнопки.
На самом деле использование атрибута ARIA в нативной радио-кнопке излишне, связывание input type=»radio» и aria-checked производится автоматически.
Образец атрибута-свойства это aria-label . Этот атрибут используется, когда метка элемента формы не видима на страница (это может быть продиктовано дизайном или просто не иметь смысла). Для случаев, когда текст метки видим, подходит атрибут aria-labelledby . Он используется также как и предыдущий, значение этого атрибута совпадает со значение id метки.
Это также можно сделать в элементе figure .
We saw the opera Barber of Seville here!
Правила ARIA
Прежде чем бросаться в атаку, запомните, что по нескольким причинам не стоит добавлять ARIA к каждому элементу.
Старайтесь максимально использовать семантические элементы HTML
Семантика ARIA по умолчанию ссылается на семантику, применяемую к элементам в браузере. Такие элементы как nav , article и button обладают уже заложенными ролями role=»navigation» , role=»article» и role=»button» соответственно. До появления семантических элементов HTML было распространена разметка по типу . Теперь мы можем использовать nav вместо div и нам не нужно добавлять к семантическому элементу role=»navigation» , потому как эта роль в нем уже подразумевается по умолчанию. Вы можете проверить по таблице W3C наличие и отсутствие атрибутов ARIA у искомого элемента.
У элемента может быть только одна роль
У элемента не может быть множественных ролей. Согласно определению, роль это:
Основной индикатор типа. Эта семантическая ассоциация позволяет инструментам отображать и поддерживать взаимодействие с объектам в манере, соответствующей ожиданиям пользователя относительно остальных объектов того же типа.
Не может быть двух ролей у элемента HTML. Все роли семантичны тем или иным способом и в соответствии с определением выше, элемент не может быть двух типов. Может ли у вас быть кнопка-заголовок? Нет, только одно из двух. Выбирайте роль, которая лучше всего описывает функцию элемента.
Не изменяйте нативную семантику
Вы не должны применять роль, не соответствующую семантике элемента, так как добавленная роль переписывает нативную семантику элемента. Например:
Однако второе правило ARIA позволяет в случае необходимости использовать вложение элементов.
Как еще можно сделать разметку более доступной?
Максимально используйте семантические элементы
Это приходит с опытом, но если вы думаете о функциональности того, что вы строите, это может дать вам хорошую идею об использовании элементов, подходящих для ваших целей лучше, чем div или span . На практике вы можете использовать список элементов HTML на сайте W3C, чтобы лучше ознакомиться с ними.
Одним из моих любимых примеров является тег blockquote , который часто используется не по назначению. Есть другие похожие элементы, служащие конкретным целям:
q — используется для указания строчных цитат, таких как цитаты внутри текста параграфов.
cite — используется для цитирования творческой работы с текстом, например, стихов.
Вот пример с использованием обоих упомянутых элементов:
In The Love Song of J. Alfred Prufock by T.S. Eliot, the clinical imagery of the line Like a patient etherized upon a table suggests themes of loneliness.
Существует еще множество элементов HTML, которые вы, возможно, не учитываете, включая несколько новых, поэтому еще раз рекомендую оценить возможности.
Атрибут alt
Это часто забываемая часть разметки, которая может серьезно сказаться на доступности, особенно в случае скринридеров. Этот атрибут появился в спецификации со времен HTML2 и описывается следующим образом:
текст используемый вместо изображения, если изображение недоступно в силу каких-то ограничений или предпочтений пользователя.
По причине ограничений или предпочтений пользователя. Независимо от причин, по которым не загружается изображение, у пользователей с ослабленным зрением на самом деле нет предпочтений. Они просто испытывают проблемы при просмотре изображения. Хотя спецификация ничего не говорит о термине “доступность”, она предполагает, что изображение не может быть загружено как следует, а у пользователя есть возможность отключить загрузку изображения. Хотя мы живем в мире, в котором второй вариант кажется менее вероятным, мы не можем предугадать, что делает пользователь на другом крае. Поэтому мы должны предлагать пользователям альтернативу.
Люди часто заполняют атрибут alt не информативно, например, пишут текст типа “собака” для фотографии своей собаки, играющей в парке. К сожалению, этот текст не нарисует никакой картины для слабовидящих. Следующий подход более приемлем:
Отметьте, что атрибут alt создан не для того же, что и элемент figcaption : цель alt это создание альтернативного текста для изображения, а figcaption это просто правильный заголовок для figure . Если развивать наш предыдущий пример у figcaption следующий текст:
Isn’t Bobby cute?
Пример разметки с использованием семантического HTML и ARIA, ориентированный на доступность
Если вы смотрели на примеры в этой статье, то вы ожидаете увидеть в качестве образца следующее:
использование семантического HTML для изображения и заголовка
целевое использование элемента cite
добавление атрибута alt
использование одного из атрибутов ARIA
We saw the opera Barber of Seville here!
Заключение
Роли и атрибуты ARIA дают огромный эффект, когда содержимое вашего сайта обрабатывается скрин-ридерами и прочими вспомогательными технологиями. С распространением вспомогательных технологий нам надо рассматривать интеграцию ARIA в наш код как постоянную практику.
Дополнительные материалы
The A11Y Project
The Paciello Group
Marco’s Accessibility Blog
aria-current
A non-null aria-current state on an element indicates that this element represents the current item within a container or set of related elements.
Description
When you have a group of related elements, such as several links in a breadcrumb or steps in a multi-step flow, with one element in the group styled differently from the others to indicate to the sighted user that this is the current element within its group, the aria-current should be used to inform the assistive technology user what has been indicated via styling.
In a breadcrumb list, when a link within a set of pagination links is styled to indicate the user is currently on that page, aria-current=»page» should be set on that link. In a multi step based process with a step indicator such as a multi-page survey or a multi step checkout or registration process, when the current step icon is visually different to represent that it is the current step, that icon’s container should have aria-current=»step» for assistive technology users who may not be able to «see» the visual difference.
The aria-current attribute indicates the element on which it is set, to a value other than false , represents the current item within a container or set of related elements. Only mark one element in a set of elements as current with aria-current .
The aria-current attribute accepts a limited list of values including page , step , location , date , time , true , and false . Any non-null string value not included in this list of enumerated values is treated as if aria-current=»true» were set, not the default false value. If the attribute is not present, is an empty string, is present with no value, or is set to aria-current=»false» it is not exposed to the user.
When something is selected rather than current, such as a tab in a tablist , use aria-selected to indicate the currently-displayed tabpanel.
Note: Don’t use aria-current as a substitute for aria-selected in gridcell , option , row or tab .
Example
The breadcrumb for the «current page» should have aria-current=»page» set on it.
navaria-label="Breadcrumb"class="breadcrumb">ol>li>ahref="../../../../../">Web technology for developersa>li>li>ahref="../../../../">Accessibilitya>li>li>ahref="../../../">ARIAa>li>li>ahref="../../">ARIA States and Propertiesa>li>li>ahref="./"aria-current="page">ARIA: `aria-current` attributea>li>ol>nav>
If the element representing the current page in the breadcrumb was not a link, the aria-current is optional.
Values
Represents the current page within a set of pages such as the link to the current document in a breadcrumb.
Represents the current step within a process such as the current step in an enumerated multi step checkout flow .
Represents the current location within an environment or context such as the image that is visually highlighted as the current component of a flow chart.
Represents the current date within a collection of dates such as the current date within a calendar.
Represents the current time within a set of times such as the current time within a timetable.
Represents the current item within a set.
Does not represent the current item within a set.
ARIAMixin API
The ariaCurrent property, part of the Element interface, reflects the value of the aria-current attribute.
The ariaCurrent property of the ElementInternals interface reflects the value of the aria-current attribute.
Associated roles
Usable in all roles; except in for elements with the role of gridcell , option , row and tab where aria-selected should be used
Specifications
Specification
Accessible Rich Internet Applications (WAI-ARIA) # aria-current
See Also
Found a content problem with this page?
Edit the page on GitHub.
Report the content issue.
View the source on GitHub.
This page was last modified on Aug 10, 2023 by MDN contributors.
Документация и примеры ссылок постраничного разделения для обозначения серии связанного контента на несколько страниц.
Обзор
Мы используем большой блок связанных между собой ссылок для нумерации страниц, который делает ссылки легко заметными и доступными подсчету – и с большой «зоной клика». Нумерация страниц создана списком элементов HTML, так что экранные читалки могут объявлять число доступных страниц. Оборачивайте всё в для возможности определять эту секцию как секцию навигации для экранных читалок и прочих вспомогательных технологий.
В дополнение – так как страницы с большой вероятностью имеют более одной навигационной секции – рекомендуется описывать назначение через aria-label . Например – если компонент нумерации страниц используется для навигации между набором результатов поиска – правильным лейблом был бы aria-label=»Search results pages» .
Работа с иконками
Хотите использовать иконку или символ вместо текста нумерации страниц? Для правильной работы экранной читалки удостоверьтесь, что задали правильные атрибуты aria и класс .sr-only .
Неактивные и активные состояния
Ссылки в нумерации страниц можно настраивать под разные обстоятельства. Используйте класс .disabled для ссылок, которые должны выглядеть некликабельными, и .active — для обозначения текущей страницы.
Вы можете по желанию поменять\удалить активные или неактивные ссылки, связанные со , или для удаления функциональности «клика» и предотвращения возможности фокусировки с клавиатуры, но с оставлением всех желаемых стилей, — исключить «якорь» в случае существования стрелок «пред\след».
Размеры
Добавьте классы .pagination-lg или .pagination-sm для создания дополнительных размеров.
Выравнивание
Изменяйте выравнивание элементов нумерации классами флексбокса.
