Основной элемент HTML5 по отношению к главной роли ARIA = "основной"

Мне интересно узнать больше о связях и возможных различиях между элементом HTML5 <main> и атрибутом роли наземной метки ARIA role="main".

У меня создалось впечатление, что цель элемента <main> - сопоставить атрибут roll ARIA role="main" с определенным элементом HTML. Но это подводит итог?

Есть ли преимущества при использовании <main> более, скажем, <div role="main">? Или это, на данный момент и в обозримом будущем, даст тот же результат?

Было бы полезно оценить любые идеи при сравнении следующих примеров:

<body>
  <main>
    <p>Paragraph</p>
  <main>
</body>


<body>
  <main role="main">
    <p>Paragraph</p>
  <main>
</body>


<body>
  <div role="main">
    <p>Paragraph</p>
  <div>
</body>

ОТВЕТЫ

Ответ 1

В соответствии с HTML5 Doctor они эквивалентны. <main> просто упрощает и упрощает реализацию role="main".

Основная цель состоит в том, чтобы сопоставить главную роль ARIAs main с элементом HTML.

Вот общее описание элемента <main>.

Элемент main представляет основное содержимое body документа или приложения. Основная область содержимого состоит из содержимого, которое напрямую связано или распространяется на центральную тему документа или центральную функциональность приложения.

Рекомендация

Рекомендуется использовать как <main>, так и role="main" в том же элементе, пока браузеры не будут правильно реализовывать <main>.

<!-- Recommended -->
<main role="main">
    ...
</main>

Обязательно прочитайте <main> spec, если вам интересно.

Примечание по разделению

Как указывает Szabolcs в комментариях, <main> не является элементом секционирования, поэтому его следует использовать в сочетании с элементом <section>.

Ссылки