aria-current

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

Върху единствения елемент, представляващ „текущото местоположение” в набор от свързани елементи. Класическият случай е активната връзка в основната навигация: екранният четец обявява „Ценообразуване, текуща страница, връзка”, а зрящите потребители виждат маркиран елемент, съответстващ на текущата им позиция.

Други чести случаи:

• Текущата стъпка в многостъпков формуляр или съветник (aria-current="step").
• Днешната дата в решетка на календар (aria-current="date").
• Активната навигационна пътека (breadcrumb) (aria-current="page").
• Текущо изпълняваният елемент в медиен плейлист (aria-current="true").

Разлики от свързани атрибути:

• aria-current — „намирате се тук” в рамките на навигация или набор от елементи. Използва се върху връзки и подобни уиджети, при които изборът не е основна концепция.
• aria-selected — избор в контейнер от типа „select” (tablist, listbox, tree, grid). Изборът се извършва от потребителя.
• aria-pressed — бутон с превключване. Самият бутон е включен или изключен.
• aria-checked — поле за отметка или радио бутон. Независим избор.

Синхронизиране

Допустими стойности: "page", "step", "location", "date", "time", "true", "false". Използвайте най-конкретния токен — "page" за навигационни връзки, "step" за съветници, "date" за календари. "true" е резервна стойност, когато нито един от останалите токени не е подходящ. "false" (стойността по подразбиране) означава „не е текущ”; обикновено атрибутът просто се пропуска за нетекущите елементи.

В навигационно меню точно една връзка трябва да носи aria-current в даден момент. Актуализирайте го от страната на клиента при промяна на маршрута; сървърно-рендираните страници могат да го рендират директно в HTML.

Маркирайте текущия елемент визуално, за да виждат зрящите потребители същия сигнал. Един разпространен подход е [aria-current="page"] { font-weight: 600; }.

Чести грешки

• Поставяне на aria-current="true" върху всяка навигационна връзка или върху нито една.
• Използване на aria-selected върху навигационна връзка — грешна семантика; връзката не е избираема опция.
• Пропускане на актуализацията на aria-current след клиентски промени на маршрута в едностранично приложение.
• Стилизиране на активното състояние чрез CSS без задаване на aria-current. Екранните четци не обявяват нищо отличително.
• Използване на aria-current="page" върху бутон, който не е навигационна връзка.
• Поставяне на aria-current върху контейнера <nav> вместо върху отделната връзка.

Пример

<nav aria-label="Primary">
  <ul>
    <li><a href="/">Home</a></li>
    <li><a href="/pricing" aria-current="page">Pricing</a></li>
    <li><a href="/docs">Docs</a></li>
  </ul>
</nav>