Можете ли вы использовать элемент <aside> внутри элемента <section role = "main" >?

Я занимаюсь улучшением доступности в своем HTML, используя HTML5 и WAI-ARIA.

Можно ли настроить следующую настройку?

<!-- main content -->
<section id="main" role="main">
    <h1>The main content</h1>

    <!-- This div needs to be here for styling reasons -->
    <div class="the-content">    
         <p>All the text that goes with the main content</p>
    </div>

    <!-- the sidebar -->
    <aside id="sidebar" role="complementary">
        <h2>A title</h2>
        <p>Some text</p>
    <aside>
</section>

То, что я не уверен в том, должен ли я иметь элемент <aside> вне контейнера <section> и role="main". Это важно?

Ответ 1

Неважно, да. Где можно определить, как содержимое тега aside относится к основному section.

Например:

Если содержимое в aside связано с основной статьей, оно должно находиться внутри main section. Однако если содержимое внутри sidebar aside tag отличается от main, я бы поставил его вне main section

http://html5doctor.com/aside-revisited/

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/aside

Ответ 2

Да, он <aside> внутри <section> является вполне допустимой разметкой и будет проходить проверку W3C, если это вас беспокоит.

Элемент <section> позволяет содержимое потока внутри, которое может включать элемент <aside>, однако, если вы "Используйте только разделы для стилизации, вы, вероятно, должны использовать div.

Помимо этого (для каламбура) у меня есть сомнения в действительной части role=main - в соответствии с этим, значения атрибутов единственной роли, допустимые для элементов <section>, показаны ниже:

Сеантика по умолчанию ARIA:

role=region.

Какие другие роли, состояния и свойства ARIA могут использоваться?

alert, alertdialog, application, contentinfo, dialog, document, log, marquee, search или status.

Любые глобальные атрибуты aria-* и любые атрибуты aria- *, применимые к разрешенные роли.

Что, скорее, не включает роль main.

Ответ 3

Спецификация (черновик редактора, которая уже включает main), не позволяет вставить элемент main внутри article, aside, footer, header или nav, но он ничего не говорит о вложенности этих элементов внутри main. Он также содержит два примера, которые используют article и nav (внутридокументная навигация) внутри main. Таким образом, должно быть разрешено, по крайней мере, aside, вложенное в article или section (и, следовательно, с областью до уровня). Я также могу представить случай, когда часть содержимого с некоторой дополнительной информацией внутри (например, в aside примерах использования в Wiki WCAG) может сформируйте вместе основное содержание страницы, поэтому я не думаю, что это было бы разумно.

С другой стороны, общий алгоритм (который теперь, по-видимому, является основной причиной существования всего секционного контента, включая aside) по-прежнему отмечен как "подверженный риску" , поэтому определение этих элементов может измениться, и может быть добавлено некоторое разъяснение.

Возможно, мы должны задать этот вопрос редакторам спецификаций HTML5?

Ответ 4

Я соглашусь с Дарреном в отношении того, где вы бросаете тег. Кроме того, ваша маркировка немного странная. Различные теги имеют роли WAI-ARIA изначально, да и вы можете перезаписать собственные роли, но зачем вам? Это сообщение о WAI-ARIA в блоге группы Paciello рассказывает об этом больше. Пример:

Вместо использования

<section id="main" role="main">

вы могли бы просто использовать <main>, что означает одно и то же, и лучшую практику. Тег <aside> имеет добавочную роль, добавленную изначально, так что это похоже на то, что Мое имя - Райан, на самом деле меня зовут Райан.