Аккордеон Система дизайна

Сворачивайте контент, сохраняя при этом удобство поиска и навигации.

Пунктов проверки: 6 · Групп: 2

Содержание чек-листа

Прогресс проверки

Структура и значение

Сравните информацию и представление в контексте использования.

Используйте осмысленные заголовкиНазвание раздела должно описывать содержимое внутри, а вся область заголовка должна легко активироваться.Используйте Tab, затем Enter или пробел, чтобы открыть и закрыть каждый элемент. Название должно указывать на открытый статус; Скрытый контент не должен содержать элементы управления в порядке табуляции.Пример Заголовок вопроса представляет собой кнопку с открытым или закрытым состоянием; При открытии ответ находится прямо под ним и по-прежнему связан с этим элементом.Указывает, открыт он или закрытИспользуйте понятные значки и статусы, а не просто меняйте цвет текста.Стрелка или открывающий знак должны отражать текущее состояние; Эффект вращения не должен быть единственным сигналом при отключении движения.Поддержка клавиатурыПереведите фокус на заголовок и откройте или закройте его с помощью Enter или пробела.Заголовок должен быть реальным элементом управления с понятным именем; Нажмите Tab и Enter или Space, чтобы открыть тот же контент, что и щелчок мыши.

Взаимодействие и удобство использования

Попробуйте выполнить операцию, измените статус и продолжайте работу.

Свяжите заголовок с содержаниемОбеспечьте открытое состояние и отношения управления для правильного понимания инструментов поддержки.Свяжите кнопку заголовка с областью содержимого и открытым состоянием; Многоуровневые заголовки должны по-прежнему поддерживать разумную иерархию чтения.Унифицировать правила открытияРешите, открывать ли один или несколько элементов, и сохраняйте это поведение во всем списке.Если только для одной открытой позиции, укажите правило согласованности; Открытие нового элемента не должно приводить к потере данных формы в только что закрытом элементе.Сохраняйте устойчивое положение для чтенияОткрывая длинный контент, избегайте закрытия заголовков и соблюдайте возможность уменьшения движения.Вступительный контент длинный, поэтому его можно прокручивать и читать, не исчезая из виду; Не создавайте небольшую область прокрутки, внутри которой сложно маневрировать.

Прогресс автоматически сохраняется в этом браузере.

РЕКОМЕНДАЦИИ

Как проверять

Тестирование открытия элементов с помощью клавиатуры

Используйте Tab, затем Enter или пробел, чтобы открыть и закрыть каждый элемент. Название должно указывать на открытый статус; Скрытый контент не должен содержать элементы управления в порядке табуляции.

ПРИМЕРЫ

Примеры использования

Откройте ответ в списке часто задаваемых вопросов

Заголовок вопроса представляет собой кнопку с открытым или закрытым состоянием; При открытии ответ находится прямо под ним и по-прежнему связан с этим элементом.

Значки раскрытия и сворачивания

Выбирайте значок, показывающий открытое или закрытое состояние; его направление должно соответствовать реальному состоянию.

Откройте и закройте раздел с клавиатуры: значок и aria-expanded должны измениться одновременно.

Пример Когда ответ открыт, значок плюса сменяется минусом.

Общая информация