ARIA-атрибуты в SEO

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

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

Часто ARIA нужен для ссылки или кнопки с иконкой без текста. Плохой вариант:

<a href="/cart">
	<svg></svg>
</a>

Скринридер не поймет, куда ведет такая ссылка. Правильно добавить атрибут aria-label:

<a href="/cart" aria-label="Корзина">
	<svg></svg>
</a>

Теперь программа озвучит: «Корзина, ссылка».

Атрибут aria-label задает понятное название элемента, которое не видно на экране, но слышно в скринридере.

Не нужно добавлять ARIA везде. Если у кнопки уже есть текст, дополнительная подпись обычно не нужна:

<button type="button">
	Оформить заказ
</button>

Разработчик использует ARIA, когда без него элемент остается непонятным для скринридера.

Объясните, зачем нужны ARIA атрибуты и почему они не заменяют HTML-теги.

Дана верстка:

<a href="/profile">
	<svg></svg>
</a>

Объясните, в чем ошибка и исправьте ее.

Нужен ли атрибут aria-label для такой кнопки:

<button type="button">
	В корзину
</button>

Объясните свой ответ.