Css aria expanded true

Using aria-expanded to indicate the state of a collapsible element

The title of this technique is just a draft — it may become integrated in a more encompassing technique (e.g., Using ARIA for collapsable content).

User Agent Notes

Screen reader support is decent on desktop and Android, no support in iOS (Mac OSX not yet tested)

Applicability

As of this writing this technique applies to HTML technologies.

This technique relates to:

Description

When authors use collapsible content, for example, to hide navigation menus or lists of content, the triggering link or button should indicate to screen reader users whether the collapsable content below is in the expanded or in the collapsed state. The aria-expanded attribute is used for this purpose.

Examples

Example 1: Toggle navigation menu

A link «Toggle navigation menu» collapses and expands the menu contents. In this example, contents are expanded by default.

Style and Script in head section of page:

 #navbar li, #navbar2 li  

Resources

Related Techniques

Using WAI-ARIA state and property attributes to expose the state of a user interface component

Tests

Procedure

For elements that use aria-expanded

1. Check that aria-expanded is used on elements a or button (** not sure if this is required)
2. Check that the toggling action correctly changes the state of the aria-expanded attribute (i.e. when content gets hidden (removed from the DOM or set to display:none via CSS), aria-expanded is set to false)

Expected Results

Test #1 and test #2 are true.

If this is a sufficient technique for a success criterion, failing this test procedure does not necessarily mean that the success criterion has not been satisfied in some other way, only that this technique has not been successfully implemented and can not be used to claim conformance.

Источник

Element: ariaExpanded property

The ariaExpanded property of the Element interface reflects the value of the aria-expanded attribute, which indicates whether a grouping element owned or controlled by this element is expanded or collapsed.

Value

A string with one of the following values:

The grouping element this element owns or controls is expanded.

The grouping element this element owns or controls is collapsed.

The element does not own or control a grouping element that is expandable.

Examples

In this example the aria-expanded attribute on the element with an ID of animal is set to «false». Using ariaExpanded we update the value to «true».

div class="animals-combobox"> label for="animal">Animallabel> input id="animal" type="text" role="combobox" aria-autocomplete="list" aria-expanded="false" aria-haspopup="true" /> button id="animals-button" tabindex="-1" aria-label="Open">▽button> ul id="animals-listbox" role="listbox" aria-label="Animals"> li id="animal-cat" role="option">Catli> li id="animal-dog" role="option">Dogli> ul> div> 

let el = document.getElementById("animal"); console.log(el.ariaExpanded); // false el.ariaExpanded = "true"; console.log(el.ariaExpanded); // true 

Specifications

Browser compatibility

BCD tables only load in the browser

Found a content problem with this page?

This page was last modified on Apr 7, 2023 by MDN contributors.

Your blueprint for a better internet.

Источник

aria — expanded

ARIA-атрибут для элементов, которые разворачивают и сворачивают другие элементы или содержимое.

Время чтения: меньше 5 мин

Это незавершённая статья. Вы можете помочь её закончить! Почитайте о том, как контрибьютить в Доку.

Кратко

Скопировать ссылку «Кратко» Скопировано

Состояние виджета из WAI-ARIA. Даёт вспомогательным технологиям понять, что элемент что-то разворачивает или сворачивает.

Пример

Скопировать ссылку «Пример» Скопировано

 Раскрыть меню    Бассейны для собак   Коробки для кошек    button aria-expanded="false" aria-controls="menu">Раскрыть менюbutton> div class="menu" id="menu"> ul> li> a href="/dogs-pools/">Бассейны для собакa> li> li> a href="/cats-boxes/">Коробки для кошекa> li> ul> div>    Скопировать Скопировано Не удалось скопировать   

Как пишется

Скопировать ссылку «Как пишется» Скопировано

Добавьте к тегу атрибут aria — expanded с одним из трёх значений:

• true — содержимое или другие элементы развёрнуты.
• false — содержимое или другие элементы свёрнуты.
• undefined (по умолчанию) — у элемента нет содержимого, которое разворачивается и сворачивается.

Атрибут можно использовать только для некоторых тегов и ARIA-ролей:

Используйте aria — expanded вместе с aria — controls или aria — owns , когда контейнер с разворачивающимся содержимым не вложен в главный элемент.

Как понять

Скопировать ссылку «Как понять» Скопировано

Атрибут aria — expanded нужен для элементов, при взаимодействии с которыми содержимое изменяет видимость. Например для кнопки, которая показывает или скрывает меню.

Источник