aria-pressed

Кога да се използва

Върху бутон, който действа като превключвател — изключен/включен звук, следване/спиране на следване, получер/нормален шрифт в текстов редактор, страничен панел отворен/затворен. Бутонът променя състоянието, но не извършва навигация; етикетът остава същият, а само натиснатото състояние съобщава промяната.

Валидни са три стойности:

• aria-pressed="false" — превключвателят е изключен.
• aria-pressed="true" — превключвателят е включен.
• aria-pressed="mixed" — използва се, когато превключвателят управлява множество подпозиции и те са в смесено състояние (някои включени, някои изключени). Рядко на практика; повечето автори вместо това разделят на отделни контроли.

Ако бутонът не е превключвател — само изпраща формуляр или отваря модален прозорец — не използвайте aria-pressed. Използвайте aria-expanded за контроли за разгъване/свиване или никакъв атрибут за състояние за обикновени бутони за действие.

Как да се поддържа синхронизиран

aria-pressed е състояние, което означава, че се променя при взаимодействие с потребителя. Обработчикът при клик, който актуализира визуалния вид на бутона, трябва да актуализира и атрибута. Двете никога не трябва да се разминават — ако иконата показва изключен звук, aria-pressed трябва да е "true".

<button
  type="button"
  aria-pressed="false"
  onclick="
    const next = this.getAttribute('aria-pressed') === 'true' ? 'false' : 'true';
    this.setAttribute('aria-pressed', next);
    toggleMute(next === 'true');
  "
>
  Mute
</button>

Чести грешки

• Задаване на aria-pressed върху елемент, различен от бутон (<div> или <a>). Използвайте role="button" или, за предпочитане, сменете с <button>.
• Промяна на визуалното състояние с CSS без да се актуализира aria-pressed. Потребителите на екранни четци продължават да чуват едно и също състояние.
• Използване на aria-pressed="true" върху бутон, който не е превключвател (например бутон „Изпрати”) — кара помощната технология да обявява ирелевантно състояние.
• Объркване на aria-pressed с aria-selected (за елементи в уиджет с единичен избор като таб или опция) или aria-checked (за полета за отметка и радио бутони). Всеки от тях има различна семантика; изберете онзи, който съответства на шаблона на уиджета.