Элемент сведений HTML5 для аккордеона

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

Спасибо!


html accordion semantics details
person DADU    schedule 03.07.2011    source источник

Ответы (2)


arrow_upward
3
arrow_downward

Да, элементы <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>

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

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

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

person Phil Tune    schedule 04.04.2013

arrow_upward
0
arrow_downward

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

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

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

person thirtydot    schedule 03.07.2011
comment
Это решено: el" title="как вы можете скрыть стрелку, которая отображается по умолчанию в деталях html5 el"> stackoverflow.com/questions/6195329/ - person DADU; 03.07.2011
comment
Нет проблем, спасибо, что первыми ответили на этот вопрос! - person DADU; 03.07.2011