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

Question

Является ли элемент 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>

Спасибо!

Answer 1

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

С http://www.w3.org/html/wg/drafts/html/master/interactive-elements.html#the-details-element:

Элемент 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>

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

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

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

Answer 2

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

Безумная проблема с Chrome ... Chrome отображает крутости?

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