Доступность в SEO

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

Доступная страница понятнее и для пользователя, и для поисковой системы: в ней есть нормальная структура, читаемый текст и рабочие элементы управления.

Текст должен быть хорошо виден на фоне. Плохой вариант:

<p style="color: #cccccc; background: #ffffff;">
	Важная информация
</p>

Серый текст на белом фоне читается с трудом. Такой контент неудобен для пользователя.

Интерактивные элементы должны работать с клавиатуры. Плохо, когда вместо кнопки используют обычный div:

<div onclick="sendOrder()">
	Оформить заказ
</div>

Такой элемент нельзя выбрать клавишей Tab и нажать клавишей Enter. Правильно использовать тег button:

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

Скринридеры читают страницу вслух и опираются на заголовки, семантические теги и атрибут alt у изображений. Если вместо кнопки стоит div, программа не поймет назначение элемента.

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

Объясните, что такое доступность сайта и зачем она нужна.

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

<div onclick="buy()">
	Купить
</div>

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

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

<p style="color: #aaaaaa; background: #ffffff;">
	Условия доставки
</p>

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