Можно ли использовать элемент ‹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". Это имеет значение?


html accessibility wai-aria
person shrewdbeans    schedule 09.07.2013    source источник
comment
Название этого вопроса вводит в заблуждение. Это означает, что вы спрашиваете о размещении элемента <aside> внутри элемента <main>, а код, который у вас есть, представляет собой <aside> внутри родительского элемента <section>.   -  person Inigo    schedule 28.10.2015
comment
Я обновил заголовок, спасибо, что заметили.   -  person shrewdbeans    schedule 29.10.2015

Ответы (4)


arrow_upward
17
arrow_downward

Это имеет значение, да. Место его размещения определяется тем, как содержимое тега 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

person Darren    schedule 09.07.2013

arrow_upward
8
arrow_downward

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

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

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

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

role=region.

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

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

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

Что довольно примечательно, не включает роль main.

person dsgriffin    schedule 09.07.2013

arrow_upward
3
arrow_downward

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

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

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

person Ilya Streltsyn    schedule 09.07.2013

arrow_upward
2
arrow_downward

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

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

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

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

person Ryan B    schedule 09.07.2013
comment
Я где-то слышал, что разумно добавлять роли к элементам HTML5 для максимальной совместимости, это правда? - person shrewdbeans; 10.07.2013
comment
Единственный, за кого я слышал этот аргумент, это <nav>. Мне нужно просмотреть эти источники, прежде чем комментировать дальше. - person Ryan B; 10.07.2013
comment
По стечению обстоятельств, я как раз читал статью об элементе ‹main› Брюса Лоусона, и он упоминает, что до сих пор явно добавляет роли к таким элементам, как nav и main: brucelawson.co.uk/2014/should-you-use-html5-header-and-footer/ - person crdunst; 08.09.2014
comment
На самом деле ‹section role=main› не то же самое, что ‹main›, так как sencond не является секционирующим элементом, что является действительно полезным свойством, если вы беспокоитесь о структуре документа (и должны)! - person Szabolcs Páll; 04.05.2015