Изменение CSS свойства через атрибут aria-expanded в HTML

Быстрый ответ

Для оформления элементов с использованием aria-expanded="true" наиболее подходящими будут селекторы атрибутов CSS. Они позволяют динамически менять визуальный стиль элементов в соответствии с состоянием атрибута.

Пример:

button[aria-expanded="true"] {
  color: red; /* Кнопка примет красный цвет, если будет в раскрытом состоянии */
}

Через JavaScript мы будем переключать значение aria-expanded между true и false, что сигнализирует о необходимости активировать определённую стилизацию.

Кусок кода:

document.querySelector('#toggle').addEventListener('click', function() {
  var expanded = this.getAttribute('aria-expanded') === 'true';
  this.setAttribute('aria-expanded', !expanded);
});

Основные пункты:

• Селектор [aria-expanded="true"] в CSS отвечает за стилизацию элементов.
• JavaScript изменяет значение aria-expanded для корректировки стиля в зависимости от текущего состояния элемента.

Глубокое погружение в материал

Добавим некоторую изюминку, используя JavaScript не только для коррекции aria-expanded, но и для манипуляций с CSS-свойствами:

document.querySelector('#advancedToggle').addEventListener('click', function() {
  this.classList.toggle('is-expanded');
  var expanded = this.getAttribute('aria-expanded') === 'true';
  this.setAttribute('aria-expanded', !expanded);
});

Теперь, переключение класса .is-expanded вносит сложные изменения во внешний вид:

button.is-expanded {
  transform: rotate(180deg); /* При раскрытии кнопка поворачивается на 180 градусов! */
}

Мы можем использовать переходы и анимации, чтобы визуальная обратная связь стала более плавной и видимой.

Думаем в категориях состояний: делаем CSS восприимчивым

Ваши стили должны корректно реагировать как на состояние aria-expanded="true", так и на дефолтное или состояние false:

/* Дефолтное состояние */
button {
  transition: background-color 0.3s ease;
}

/* Раскрытое состояние */
button[aria-expanded="true"] {
  background-color: green; /* Кнопка принимает зелёный цвет, подчёркивая свою экологичность в раскрытом состоянии */
}

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

nav.main-navigation button[aria-expanded="true"] {
  border: 2px solid blue; /* Теперь только раскрытые кнопки в рамках .main-navigation будут иметь синюю рамку! */
}

С помощью этого подхода вы сможете точечно применять стили к кнопкам внутри .main-navigation, которые в данный момент находятся в раскрытом состоянии.

Визуализация

Считайте aria-expanded своего рода переключателем света (🔘), который управляет лампочкой (💡):

`aria-expanded="false"`: 🔘🌑💡 
// Свет выключен, CSS-свойства остаются без изменений.

`aria-expanded="true"`:  🔘🌕💡
// Свет включён, CSS-свойства меняются, элемент видим.

Переключаясь между режимами, вы влияете на состояние лампочки — так же как изменение aria-expanded влияет на CSS-свойства:

[aria-expanded="false"] .details {
  display: none; /* "Детали скрыты" 🌑 */
}
[aria-expanded="true"] .details {
  display: block; /* "Детали видимы!" 🌕 */
}

Переключите и увидите, как изменяется освещение комнаты, аналогично трансформации CSS элемента.

Синергия: сочетаем доступность с динамическим стилем

Учет доступности при работе с aria-expanded имеет важное значение. Ваши визуальные изменения должны не только служить эстетической приятности, но и облегчать взаимодействие для всех пользователей:

• Стандартные стили фокуса идеально подходят для навигации с помощью клавиатуры:

button:focus {
  outline: none;
  box-shadow: 0 0 0 3px #aaa; /* Тень выделяет элемент при переключении с помощью клавиши Tab */
}

• Визуальные индикаторы помогают пользователю осознавать статус раскрытого содержимого:

button::after {
  content: attr(aria-expanded) ' content'; /* Кнопка "сообщает" о своём состоянии */
}

• Обязательно следуйте рекомендациям WCAG о контрастности.

Добавляем изюминку с помощью jQuery:

Если вы привыкли работать с jQuery, вы можете динамически применять стилизацию в зависимости от состояния aria-expanded, используя метод .css():

$('#dynamicToggle').click(function() {
  var $this = $(this);
  $this.attr('aria-expanded', $this.attr('aria-expanded') === 'false');
  $this.css('background-color', $this.attr('aria-expanded') === 'true' ? 'yellow' : 'silver'); /* Фоновый цвет меняется вместе с состоянием элемента */
});

Помните, что каждый интерактивный элемент с aria-expanded должен поддерживать управление с помощью клавиатуры и иметь соответствующие ARIA роли для улучшения доступности для читалок экрана.

Полезные материалы

1. ARIA – Доступность | MDN — Углубленный материал по ARIA.
2. Accessible Rich Internet Applications (WAI-ARIA) 1.1 — Подробное руководство W3C по aria-expanded.
3. "Хакерство с чекбоксом" (и что с этим можно сделать) | CSS-Tricks — Примеры того, как можно использовать чекбоксы для управления стилями без использования JavaScript.
4. Как скрыть контент – Проект A11Y — Основы работы со скрытием контента в паре с aria-expanded.
5. WebAIM: CSS в действии – Невидимый контент для пользователей читающих экран — Способы создания невидимого контента с помощью CSS.
6. API доступности: ключ к доступности Интернета — Smashing Magazine — Подробно о взаимодействии ARIA с доступностью API браузера.
7. Selectors Level 3 — Спецификация W3C для CSS-селекторов атрибутов, ваш инструмент для стилизации элементов на основе aria-expanded.