Role presentation что это
Эффективное использование ARIA в HTML5
ARIA это аббревиатура от Accessible Rich Internet Applications (доступные насыщенные интернет-приложения), использование этого стандарта позволяет сделать сайт более доступным для людей с ограниченными способностями, например, с нарушениями слуха или зрения. Посмотрим, что могут сделать разработчики, чтобы облегчить им жизнь.
Роли ARIA
Роли ARIA добавляются в разметку HTML как атрибуты. Они определяют тип элемента и указывают цель, которой он служит. В следующем примере элемент идентифицируется как баннер:
Еще один пример: здесь роль сообщает сведения о том, что элемент содержит информацию о содержимом страницы.
Оповещение будет выглядеть так:
role=”alert” полноценно работает с элементами, динамически добавляемыми в DOM или при смене отображения, например, с display:none to display:block
Следующая роль одна из моих любимых, ее я использую, когда элемент используется чисто декоративно. Если вы представите человека со скринридером, подумайте об элементах, содержимое которых нет смысла зачитывать. Это могут быть декоративные элементы или пустые элементы, используемые для фона.
Атрибуты ARIA
Атрибуты ARIA немного отличаются от ролей ARIA. Они также добавляются в разметку, но существует уже определенный диапазон атрибутов ARIA. Все атрибуты используют префикс aria- и делятся на две группы: состояния и свойства.
На самом деле использование атрибута ARIA в нативной радио-кнопке излишне, связывание input type=»radio» и aria-checked производится автоматически.
Правила ARIA
Прежде чем бросаться в атаку, запомните, что по нескольким причинам не стоит добавлять ARIA к каждому элементу.
Старайтесь максимально использовать семантические элементы HTML
У элемента может быть только одна роль
У элемента не может быть множественных ролей. Согласно определению, роль это:
Основной индикатор типа. Эта семантическая ассоциация позволяет инструментам отображать и поддерживать взаимодействие с объектам в манере, соответствующей ожиданиям пользователя относительно остальных объектов того же типа.
Не может быть двух ролей у элемента HTML. Все роли семантичны тем или иным способом и в соответствии с определением выше, элемент не может быть двух типов. Может ли у вас быть кнопка-заголовок? Нет, только одно из двух. Выбирайте роль, которая лучше всего описывает функцию элемента.
Не изменяйте нативную семантику
Вы не должны применять роль, не соответствующую семантике элемента, так как добавленная роль переписывает нативную семантику элемента. Например:
Однако второе правило ARIA позволяет в случае необходимости использовать вложение элементов.
Как еще можно сделать разметку более доступной?
Максимально используйте семантические элементы
Вот пример с использованием обоих упомянутых элементов:
Существует еще множество элементов HTML, которые вы, возможно, не учитываете, включая несколько новых, поэтому еще раз рекомендую оценить возможности.
Атрибут alt
Это часто забываемая часть разметки, которая может серьезно сказаться на доступности, особенно в случае скринридеров. Этот атрибут появился в спецификации со времен HTML2 и описывается следующим образом:
текст используемый вместо изображения, если изображение недоступно в силу каких-то ограничений или предпочтений пользователя.
По причине ограничений или предпочтений пользователя. Независимо от причин, по которым не загружается изображение, у пользователей с ослабленным зрением на самом деле нет предпочтений. Они просто испытывают проблемы при просмотре изображения. Хотя спецификация ничего не говорит о термине “доступность”, она предполагает, что изображение не может быть загружено как следует, а у пользователя есть возможность отключить загрузку изображения. Хотя мы живем в мире, в котором второй вариант кажется менее вероятным, мы не можем предугадать, что делает пользователь на другом крае. Поэтому мы должны предлагать пользователям альтернативу.
Люди часто заполняют атрибут alt не информативно, например, пишут текст типа “собака” для фотографии своей собаки, играющей в парке. К сожалению, этот текст не нарисует никакой картины для слабовидящих. Следующий подход более приемлем:
Пример разметки с использованием семантического HTML и ARIA, ориентированный на доступность
Если вы смотрели на примеры в этой статье, то вы ожидаете увидеть в качестве образца следующее:
Заключение
Роли и атрибуты ARIA дают огромный эффект, когда содержимое вашего сайта обрабатывается скрин-ридерами и прочими вспомогательными технологиями. С распространением вспомогательных технологий нам надо рассматривать интеграцию ARIA в наш код как постоянную практику.
Правила использования ARIA в HTML
The Web Accessibility Initiative’s Accessible Rich Internet Applications Suite (WAI-ARIA, или просто ARIA) — это набор инструментов и указаний для того, чтобы сделать веб-контент и приложения более доступными.
В частности, он включает в себя набор атрибутов, которые мы можем добавлять к HTML-элементам для придания им семантической информации, которая может быть прочитана с помощью специальных возможностей (assistive technologies).
Хотя ARIA может быть достаточно полезной, нам стоит быть осторожными в вопросах, как и когда её использовать. Вот 5 правил, которые необходимо учитывать при использовании ARIA в HTML.
1. Используйте семантический HTML в пользу ARIA
Если вы вы можете использовать нативный HTML-элемент или атрибут с заложенными семантическим значением и поведением, используйте его вместо того, чтобы добавлять ARIA-роли, состояния или свойства для того, чтобы сделать его доступным.
Правило номер один — не пытайтесь использовать ARIA, если в этом нет необходимости. HTML5 предоставляет нам широкий спектр семантических элементов.
Поэтому, по возможности, нам стоит использовать семантический HTML-элемент, а не ARIA-атрибут.
Вместо того, чтобы создавать
Нам следует использовать элемент :
2. Не изменяйте значения семантических элементов ARIA-ролями
Не изменяйте нативную семантику элемента, если вам это не необходимо.
Вместо переопределения семантического значения элемента, нам следует использовать соответствующий элемент:
Или, в крайнем случае, мы можем добавить ARIA-роль к элементу, который не несет такого смысла.
3. Интерактивные элементы ARIA должны быть доступны для всех сред
Все интерактивные элементы управления ARIA должны быть пригодны для работы с клавиатуры.
Недостаточно использовать ARIA-роль на элементе, чтобы по-настоящему изменить его роль. Если мы попытаемся изменить, например,
В руководстве ARIA имеется список возможностей, которые должен иметь каждый элемент. Например, настоящая кнопка должна удовлетворять следующим требованиям:
При использовании ARIA-ролей нам необходимо учитывать эти требования. Создание элемента похожего на кнопку — не делает его кнопкой. Нам нужно учитывать, как пользователи во всех средах взаимодействуют с элементом.
4. Используйте соответствующие роли для видимых фокусируемых элементов
Не используйте role=»presentation» или aria-hidden=»true» на видимых фокусируемых элементах.
ARIA-атрибут role=»presentation» подразумевает, что элемент предназначен для визуального взаимодействия и не является интерактивным. Атрибут aria-hidden=»true» говорит о том, что элемент не должен быть видим. Когда мы используем эти атрибуты, нам нужно знать, к каким элементам они применяются и являются ли эти элементы видимыми и интерактивными. Например, обе эти кнопки приведут к тому, что некоторые пользователи будут фокусироваться на элементе, который для них не существует.
Эти атрибуты должны применяться только к элементам, которые не являются интерактивными или являются невидимыми.
5. Интерактивные элементы должны иметь Доступное описание
Все интерактивные элементы должны иметь Доступное описание.
Элементы, с которыми можно взаимодействовать, например кнопки и ссылки, должны иметь «доступное описание».
Доступное описание (accessible name) — имя элемента пользовательского интерфейса.
Очень просто объяснить это на пример кнопки «OK». Текст «OK» — доступное описание (accessible name). (прим. переводчика)
Доступное описание для элемента может быть указано в зависимости от типа этого элемента. Инпуты в форме, как правило, получают свое Доступное описание из соответствующих им лейблов.
(подробнее).
Другие элементы, например кнопки и ссылки, могу получить своё Доступное описание из их контента или label-атрибута (подробнее).
WAI-ARIA Roles
This page lists reference pages covering all the WAI-ARIA roles discussed on MDN. For a full list of roles, see Using ARIA: Roles, States, and Properties
ARIA roles provide semantic meaning to content, allowing screen readers and other tools to present and support interaction with object in a way that is consistent with user expectations of that type of object. ARIA roles can be used to describe elements that don’t natively exist in HTML or exist but don’t yet have full browser support. By default, semantic elements have a role;
has the «paragraph» role, has the «radio» role. Non-semantic elements do not have a role;
ARIA roles are HTML attributes. They are added to elements using role=»role type«, where role type is the name of a role in the ARIA specification. Some roles require the inclusion of associated ARIA states or properties; others are only valid in association with other roles.
For example,
- will be announced as a ‘tab panel’ by screen readers. However, if the tab panel doesn’t have nested tabs, the element with the tabpanel role is not in fact a tab panel and accessibility has actually been negatively impacted.
The ARIA states and properties associated with each role are included in the role’s pages, with each attribute also having a dedicated page.
ARIA role types
There are 6 categories of ARIA roles:
1. Document structure roles
Document Structure roles are used to provide a structural description for a section of content. Most of these roles should no longer be used as browsers now support semantic HTML element with the same meaning. The roles without HTML equivalents, such as presentation, toolbar and tooltip roles, provide information on the document structure to assistive technologies such as screen readers as equivalent native HTML tags are not available.
For most document structure roles, semantic HTML equivalent elements are available and supported. Avoid using application, article (use ), cell (use ), columnheader (use ), definition (use in a ), directory, document, figure (use instead), group, heading (use
2. Widget roles
The various widget role are used to define common interactive patterns. Similar to the document structure roles, some of these roles duplicate the semantics of native HTML elements that are well supported, and should not be used. The difference between the two lists is that, generally, the widget roles require JavaScript interaction and the document structure roles don’t necessarily.
Avoid using button, checkbox, gridcell, link, menuitem, menuitemcheckbox, menuitemradio, option, progressbar, radio, and textbox, which we’ve included for completeness. For most, semantic equivalents with accessible interactivity are available and supported. See the individual role documention for more information.
Composite widget roles
Avoid using grid, listbox, and radiogroup, which we’ve included for completeness. See the individual role documention for more information.
Note that there is also a widget role ( role=»widget» ), which is an abstract role and not in the widget role category.
3. Landmark roles
Landmark roles provide a way to identify the organization and structure of a web page. By classifying and labeling sections of a page, structural information conveyed visually through layout is represented programmatically. Screen readers use landmark roles to provide keyboard navigation to important sections of a page. Use these sparingly. Too many landmark roles create «noise» in screen readers, making it difficult to understand the overall layout of the page.
Правила использования ARIA в HTML
Дата публикации: 2017-02-14
От автора: 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 роли:
Как эффективно работать с ARIA в HTML5
Дата публикации: 2016-02-24
От автора: ARIA расшифровывается как «Accessible Rich Internet Applications» и помогает сделать ваш сайт более доступным для людей с ограниченными возможностями, такими как слух или нарушение зрения. Давайте разберемся как мы, разработчики можем облегчить жизнь с помощью этого инструмента.
Один из способов это добавить ARIA в HTML. Вы, скорее всего, уже знакомы с семантическими элементами в HTML типа nav, button или header. Довольно легко понять для чего данные теги будут использоваться. Эти теги придают больше значения контенту страницы, а их комбинацию с ARIA можно использовать в нашей разметке. Но нужно помнить о некоторых вещах.
Роли ARIA
ARIA роли добавляются в разметку как атрибуты. С их помощью задается тип элемента и его назначение. Код ниже задает элемент как баннер:
Практический курс по верстке адаптивного сайта с нуля!
Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3
Пример ниже, часто размещается в контейнерах, показывает, что в контенте содержится какая-то информация о данных внутри контейнера:
А предупреждение будет выглядеть так:
Следующий пример мой любимый, он используется только в том случае, когда элемент нужен только для презентации. Если представить, что кто-то зашел на сайт через какой-либо скрин ридер, подумайте о элементах, которые пользователи не захотят читать. Один пример это когда элемент может содержать в себе только визуальную декорацию чего-либо или он просто пустой с изображением или фоновым цветом.
ARIA атрибуты
Атрибуты ARIA немного отличаются от ролей. Они точно так же добавляются в разметку, но есть ряд ARIA атрибутов, которые можно использовать. Все атрибуты идут с префиксом aria-. Есть два типа атрибутов, состояния и свойства.
Значения состояний связано с изменением результата пользовательского взаимодействия.
Значения свойств почти не меняются.
Пример атрибута состояния ARIA это aria-checked, который используется для определения состояния элементов типа чекбоксов или радио кнопок.
Пример атрибута свойства aria-label. Используется в тех случаях, когда подпись к элементу невидима на странице (просто потому что нет смысла делать ее видимой или так указано в дизайне). Для видимых лейблов используется aria-labelledby. Данный атрибут используется так – значение атрибута должно совпадать с id элемента, на который ссылается лейбл.
Можно сделать то же самое с figure.
На W3C можно подробно прочитать о поддерживаемых состояниях и свойствах.
Правила ARIA
Перед тем, как совсем увлечься, помните, что мы не добавляем ARIA во все элементы по нескольким причинам.
Используйте семантические HTML элементы везде где возможно
Неявная семантика ARIA по умолчанию относится к семантике, которая применяется к элементу браузером. Такие теги как nav, article и button имеют неявные ARIA состояния role=»navigation», role=»article» и role=»button» соответственно. До появления семантики в HTML было нормально использовать элементы типа
У одного тега только одна роль
Один тег не должен содержать несколько ARIA ролей. Определение role: «Основной индикатор типа. Данная семантическая ассоциация позволяет инструментам представлять и поддерживать взаимодействие с объектом таким образом, чтобы взаимодействие соответствовало ожиданию пользователя от работы с другими объектами данного типа.»
HTML элемент не может иметь две роли. Все роли тем или иным образом имеют семантическое значение, и следуя из определения выше, тег не может быть двух типов одного объекта одновременно. Вы можете сделать одновременно кнопку и заголовок? Нет, это будет либо одно, либо другое. Выбирайте роли так, чтобы они наилучшим образом описывали функцию вашего элемента.
Практический курс по верстке адаптивного сайта с нуля!
Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3
Не изменяйте встроенную семантику
К семантическим тегам не нужно применять дополнительный атрибут role, так как он переписывает родную семантику тега. К примеру:
Второе правило применения ARIA гласит, что если необходимо, то нужно использовать вложенный HTML элемент.
Используйте как можно больше семантических элементов
Если подумать о задачах того, что вы создаете, то можно понять, какие элементы лучше подойдут вместо div и span. Это приходит со временем. Для практики можно обращаться к what elements are available. Один из моих любимых примеров это blockquote, про который часто забывают. Есть похожие теги, которые выполняют те же задачи:
q – используется для строчный цитат. Прямая цитата кого-то внутри параграфа текста.
cite – используется для цитирования названий творческих работ в тексте, к примеру, стихотворений.
Пример использования двух обоих тегов:
Существует множество тегов, про которые вы, возможно, и не знаете, среди которых есть и часть новых. Так что убедитесь в том, что вы знаете их возможности!
Атрибут alt
Про данный атрибут очень часто забывают, а он может оказать огромнейшее влияние на доступность разметки, особенно для скрин ридеров. Он появился в HTML2 и описывался так: «Текст, заменяющий изображение, к примеру, из-за ошибок обработки или предпочтений пользователя.»
Из-за ошибок обработки или предпочтений пользователя. Вне зависимости от проблем с загрузкой изображения («ошибки обработки»), у пользователей с нарушенным зрением нет и предпочтений. У них просто от природы проблемы с просмотром изображения. В спецификации ничего не говорится про доступность. Там сказано, что изображений может не загрузиться, как положено, и пользователю предоставляется возможность отключить загрузку изображений вообще. Хотя мы с вами и живем в мире, где в последнее очень сложно поверить, мы все же не знаем, чем на другом конце провода занимается пользователь. Поэтому необходимо предоставить пользователю другие варианты.
Люди часто пишут в теге alt к фотографии с их собакой, играющей в парке «собака», к примеру. Но к сожалению такой текст не отражает визуальное представление изображения для слбовидящих. Пример ниже намного доступнее: