Роли арии и внутренние дивы

Question

Я обновляю старый сайт, чтобы сделать его более доступным.

На сайте есть несколько мест, структура которых состоит из следующих строк:

<div class="topbar">
    <div class="inner">
        Content here ...
    </div>
</div>

Если role="banner" быть на .topbar div или .inner div? Стоит ли добавлять что-нибудь в другой div?

Answer 1

Если вы просматриваете старый сайт, чтобы сделать его более доступным, то обновление до HTML5 было бы предпочтительнее.

Поэтому я бы использовал элемент <header> вместо role="banner".

<header class="topbar">
    <div class="inner">
        Content here ...
    </div>
</header>

Это будет иметь ту же семантику, что и role="banner", но без необходимости в WAI-ARIA и с лучшей поддержкой таких вещей, как навигация по регионам.

Повторить этот процесс по всему сайту с использованием семантически правильных элементов вместо <div> s, и вы обнаружите, что вам нужно очень мало WAI-ARIA.