Как добавить атрибут aria-extended = true / false в элемент

Question

У меня на сайте есть аккордеон со следующей структурой (сгенерированный ckeditor-accordion)

<dl>
  <dt>title 1</dt>
 <dd>content 1</dd>
 <dt class="active">title 2</dt>
 <dd>content 2</dd>
</dl>

В результате dt-element имеет class="active" атрибут * 1006.* добавлено, иначе оно должно быть "aria-expanded=false" по умолчанию.

Полагаю, это что-то вроде

document.getElementByTagName("dt").setAttribute("aria-expanded", false)

Answer 1

Элемент, который выполняет развертывание / свертывание, это тот элемент, который должен иметь aria-expanded. Убедитесь, что вы не установили aria-expanded для раскрывающихся элементов.

Так что в вашем случае, похоже, что <dt> должно иметь aria-expanded. И вы правы, что значение должно быть true, когда раздел развернут, и false, когда оно свернуто. <dd> - это контейнер, содержащий содержимое. Он должен не иметь aria-expanded.

Я знаю, что ваш фрагмент кода был лишь кратким изложением вашей идеи. Надеюсь, ваш реальный код имеет больше атрибутов. Например, элемент с aria-expanded должен быть <button> и содержаться в заголовке. Если вы используете список определений (<dl>) в качестве своей структуры, вам нужно role="presentation" на <dl>, чтобы программа чтения с экрана не объявила о наличии списка.

" WAI-ARIA Authoring Practices 1.1 " содержит хороший раздел об аккордеонах.

Чтобы фактически изменить значение атрибута aria-expanded, вы делаете то же самое, что и для изменения любого другого атрибута с помощью javascript. Ваше предложение использовать setAttribute() в порядке.