Элемент HTML5 details для аккордеона

Является ли элемент details семантически подходящим для разметки аккордеона?

Пример:

<div class="accordion">

<details open>
<summary>Section 1</summary>
</details>

<details>
<summary>Section 2</summary>
</details>

<details>
<summary>Section 3</summary>
</details>

</div>

Я задаю этот вопрос, потому что спецификация не очень ясно о его использовании. Он просто утверждает, что элемент details является виджетом раскрытия. Я, конечно, не хочу использовать этот элемент для чего-то, чем он не должен быть.

РЕДАКТИРОВАТЬ

Будет ли что-то подобное лучше подходить семантически?

<article role="tablist">

<header role="tab" aria-expanded>Section 1</header>
<div role="tabpanel">
</div>

<header role="tab">Section 2</header>
<div role="tabpanel">
</div>

<header role="tab">Section 3</header>
<div role="tabpanel">
</div>

</article>

Спасибо!

Источник

3 ответа

Да, <details><summary> элементы полностью подходят (и наиболее семантический вариант) для того, что вы описываете:

С http://www.w3.org/html/wg/drafts/html/master/interactive-elements.html:

Элемент details представляет виджет раскрытия, из которого пользователь может получить дополнительную информацию или элементы управления. [акцент мой]

И это из http://html5doctor.com/the-details-and-summary-elements/:

По сути, мы можем использовать для создания подобного аккордеону виджета, который пользователь может открывать и закрывать. Внутри мы можем разместить любой контент, который захотим.

Идеальное использование. Например, у моей компании есть страница контактов с множеством вариантов контактов, чтобы мы могли настроить для нее аккордеон следующим образом:

<details>
    <summary>Mailing Address</summary>
    <p><strong>U.S. Correspondence:</strong> 123 Main St., Washington, DC 00000-0000</p>
    <p><strong>International Correspondence:</strong> P.O.Box 1111, Washington, DC 00000-1111</p>
</details>
<details>
    <summary>Phone Numbers</summary>
    <p><strong>U.S.:</strong> 800-555-5555</p>
    <p><strong>Int'l:</strong> +1-800-555-5556</p>
</details>

Примечание по стилю: хорошая семантика не должна выбрасываться за борт для решения проблем стилей, специфичных для браузера. Сброс CSS может быть в порядке, но нет никакой семантической причины не использовать эти полезные и подходящие элементы для аккордеона.

** Обратите внимание: В настоящее время Chrome является единственным браузером, который поддерживает переключающую функциональность, которая, как я полагаю, предназначена для этих элементов. Резервный Javascript будет полезен здесь.

** Изменить 3/2017 - см. Http://caniuse.com/#feat=details для таблиц поддержки. Эта функция теперь поддерживается почти всеми, кроме IE и Edge.

Источник

Не использовать <details> для этого, или у вас будет эта проблема:

Безумная проблема Chrome...Chrome рендерит двадцатые?

Это, вероятно, нежелательное поведение для вашего аккордеона.

Источник

Хороший вопрос. Я искал это и увидел, что даже MDN использует для их меню ссылок на боковой панели. https://developer.mozilla.org/en-US/docs/Web/HTML/Element/details

Однако есть две проблемы:

не анимируется

Поскольку он либо открыт, либо нет, анимировать переход невозможно - потому что перехода нет.

Из документов MDN:

К сожалению, в настоящее время нет встроенного способа анимировать переход между открытием и закрытием.

Нет поддержки IE

Если вам интересно, это не поддерживается Internet Explorer :)

Источник
Другие вопросы по тегам