HTML-ориентиры
HTML- ориентиры используются для категоризации и группировки контента на веб-странице для лучшей доступности и SEO . [1]
Элементы секционирования
[ редактировать ]В HTML5 были добавлены следующие элементы секционирования контента, которые наследуют роли ориентиров по умолчанию: [2]
| Элемент | Роль ориентира по умолчанию |
|---|---|
<header>
|
banner когда в контексте <body> элемент. <header> элемент не является banner ориентир, если он является дочерним элементом любого из следующих элементов раздела: <article>, <aside>, <main>, <nav>, <section>. [3]
|
<nav>
|
navigation
|
<main>
|
main
|
<aside>
|
complementary
|
<form>
|
form когда у него есть доступное имя с использованием одного из следующих атрибутов: aria-labelledby, aria-label, или title. [3]
|
<footer>
|
contentinfo когда в контексте <body> элемент. <footer> элемент не является contentinfo ориентир, если он является дочерним элементом любого из следующих элементов секционирования HTML: <article>, <aside>, <main>, <nav>, <section>. [3]
|
<section>
|
region когда у него есть доступное имя с использованием одного из следующих атрибутов: aria-labelledby, aria-label, или title. [4]
|
Знаковые роли
[ редактировать ]The role Атрибут используется для определения роли элемента на странице. Когда были введены элементы секционирования, role атрибут стал меньше использоваться для ориентировки. Это связано с тем, что роли по умолчанию применялись к большинству элементов секционирования, поэтому они использовались более широко и принимались из-за своей простоты. [5]
The role Атрибут используется не только для назначения ролей разделам контента. Атрибут также можно использовать для назначения ролей многим другим элементам, хотя в настоящее время он используется реже из-за новых семантических элементов HTML. [6]
Примеры
[ редактировать ]<div role="banner">
<h1>Hello, world!</h1>
</div>
Приведенный выше код аналогичен следующей более широко распространенной версии: [7]
<header>
<h1>Hello, world!</h1>
</header>
Неправильное использование
[ редактировать ]После добавления элементов секционирования в HTML5 возникла путаница относительно того, нужны ли атрибуты ролей для элементов секционирования. На самом деле излишне присваивать элементам секционирования атрибут роли. [8]
Кроме того, не следует пытаться изменить роли элементов секционирования по умолчанию. [9]
Примеры неправильного использования
[ редактировать ]
Роль main на <main> элемент бесполезен, поскольку он уже наследует эту роль в качестве ориентира по умолчанию:
<main role="main">
<p>Hello world!</p>
</main>
Применение form роль в <header> является семантически неправильным, поскольку оно переопределяет <header>это роль по умолчанию banner:
<header role="form">
<!--Some HTML code here-->
</header>
См. также
[ редактировать ]Ссылки
[ редактировать ]- ^ Кларк, Ричард; Стадхолм, Оли; Мерфи, Кристофер; Маниан, Дивья. Начало HTML5 и CSS3 . стр. 75–81.
- ^ Вуд, Адам. «HTML5: что нового в последней версии HTML?» . HTML.com . Проверено 13 марта 2022 г.
- ^ Перейти обратно: а б с «Элементы секционирования HTML: пример ориентиров ARIA» . www.w3.org . Проверено 13 марта 2022 г.
- ^ «ARIA: роль региона — Доступность | MDN» . http://developer.mozilla.org . Проверено 13 марта 2022 г.
- ^ «Как не использовать Арию» . cccaccessibility.org . Проверено 13 марта 2022 г.
- ^ «Использование ARIA: роли, состояния и свойства — Доступность | MDN» . http://developer.mozilla.org . Проверено 13 марта 2022 г.
- ^ «Как использовать роли, свойства и состояния ARIA в HTML» . Веб-дизайн Envato Tuts+ . 17 ноября 2020 г. Проверено 13 марта 2022 г.
- ^ «Практика авторской разработки WAI-ARIA 1.1» . www.w3.org . Проверено 13 марта 2022 г.
- ^ «Использование АРИИ» . www.w3.org . Проверено 13 марта 2022 г.