![]() |
Атрибут role в HTML: что надо знатьАтрибут role в HTML - это способ предоставления семантической информации вспомогательным технологиям, таким как программы чтения с экрана, о назначении и функции элемента. Атрибут role может использоваться для описания элементов, которые изначально не существуют в HTML или существуют, но пока не имеют полной поддержки в браузере. Атрибут role также может быть использован для повышения доступности существующих элементов HTML путем добавления более специфических ролей. ![]() Атрибут role является частью спецификации Accessible Rich Internet Applications (ARIA), определяющей набор ролей, состояний и свойств, которые могут быть использованы для повышения доступности веб-содержимого. ARIA-роли добавляются к HTML-элементам с помощью role="role type", где role type - название роли в спецификации ARIA. Некоторые роли требуют включения связанных с ними состояний или свойств ARIA, другие действительны только в сочетании с другими ролями. Примеры использования атрибута role Ниже приведены примеры использования атрибута role в HTML с некоторыми фрагментами кода и комментариями. Использование атрибута role для несемантических элементов Несемантические элементы HTML, такие как <div> и <span>, по умолчанию не имеют роли. Им можно присвоить роль с помощью атрибута role, чтобы указать их функцию или значение. Например, элементу <div> можно присвоить роль "alert", чтобы указать, что он содержит важное сообщение, требующее внимания пользователя. <div role="alert"> <p>Какое-то оповещение</p> </div>Использование атрибута role для пользовательских виджетов Пользовательские виджеты - это интерактивные компоненты, создаваемые с помощью HTML, CSS и JavaScript. Они могут не иметь соответствующего собственного HTML-элемента или иметь поведение, отличное от поведения собственного элемента. Например, пользовательский виджет панели вкладок может быть создан с помощью элементов <div> и JavaScript. Атрибут role может использоваться для назначения ролей панели вкладок и вложенных в нее вкладок, а также состояний и свойств ARIA для указания их состояния и взаимосвязи. <div role="tablist"> <div role="tab" id="tab1" aria-selected="true">Вкладка 1</div> <div role="tab" id="tab2" aria-selected="false"> Вкладка2</div> <div role="tab" id="tab3" aria-selected="false"> Вкладка 3</div> </div> <div role="tabpanel" id="panel1" aria-labelledby="tab1"> <p> Контент вкладки 1</p> </div> <div role="tabpanel" id="panel2" aria-labelledby="tab2" hidden> <p> Контент вкладки 2</p> </div> <div role="tabpanel" id="panel3" aria-labelledby="tab3" hidden> <p> Контент вкладки 3</p> </div>Использование атрибута role для семантических элементов Семантические элементы HTML, такие как <article> и <nav>, имеют роль по умолчанию, которая соответствует их смыслу. Однако иногда возникает необходимость переопределить или уточнить их роль с помощью атрибута role. Например, элементу <nav> может быть присвоена роль "хлебных крошек", чтобы указать, что он содержит список ссылок, показывающих местоположение пользователя в иерархии сайта. <nav role="breadcrumbs"> <ul> <li><a href="/">Главная</a></li> <li><a href="/blog">Блог</a></li> </ul> </nav>Атрибут role в HTML является полезным инструментом для повышения доступности веб-контента путем предоставления семантической информации вспомогательным технологиям. Атрибут role может быть использован для более точного описания несемантических элементов, пользовательских виджетов и семантических элементов. Однако атрибут role следует использовать с осторожностью и только в случае необходимости, поскольку он может отменять семантику HTML-элементов или вступать с ней в конфликт. Также важно следовать спецификации ARIA и использовать корректные роли, состояния и свойства, подходящие для каждого элемента. ![]() Автор этого материала - я - Пахолков Юрий. Я оказываю услуги по написанию программ на языках Java, C++, C# (а также консультирую по ним) и созданию сайтов. Работаю с сайтами на CMS OpenCart, WordPress, ModX и самописными. Кроме этого, работаю напрямую с JavaScript, PHP, CSS, HTML - то есть могу доработать ваш сайт или помочь с веб-программированием. Пишите сюда. ![]() |
Мои услуги
|
© upread.ru 2013-2023 При перепечатке активная ссылка на сайт обязательна. |