Доступность — это характеристика сайта, которая отражает возможность пользоваться сайтом людям с ограниченными возможностями. Это если очень сухо и кратко.

Если разбирать эту характеристику подробнее, то к категории людей с ограниченными возможностями относимся почти все мы с вами. Не верите? Читайте дальше!

Понятно, что в первую очередь все вспоминают о людях, страдающих хроническими нарушениями здоровья (зрение — слепота/дальтонизм; слух — глухота; опорно-двигательный аппарат — параличи / тремор / отсутствие конечностей; ментальное развитие — нарушения, связанные с восприятием информации/запоминанием). И вы правы, но не стоит забывать и тех, кто имеет временную нетрудоспособность (переломы конечностей, использование медицинских препаратов, замедляющих реакцию и пр.), и тех, кто в текущий момент попал в неудобную ситуацию (забыл мышку, занята одна из рук, перестали работать динамики на устройстве и пр.). Так что доступность нужна всем нам без исключения, но только в разной степени.

Продолжая разбирать понятие доступности стоит отметить, что под использованием понимается восприятие информации (как зрительно, так и на слух), навигация по интерфейсу и взаимодействие с ним.

Теперь я опишу несколько самых важных нюансов:

Семантическая верстка

Заголовки должны быть расставлены в логическом порядке. (после <h2> не должно быть <h4>);
<h1> должен быть только 1 раз на странице;
Параграф должен быть <p>, а не <div>;
Пустые ссылки либо убрать, либо заменить на <button> либо добавить role="button" и rel="nofollow";
<footer> не должен быть внутри <main>;
и т.д. Подробнее в статье про семантику.

Доступ с клавиатуры

К любому интерактивному элементу должен быть доступ с клавиатуры. То есть по сути с сайтом должна быть возможность нормально взаимодействовать не притрагиваясь к мышке. Главное правило вы только что прочли, сейчас пробежимся по нюансам.

Скрытые визуально элементы должны быть недоступны с клавиатуры. Например, ссылки внутри выпадающего списка в меню должны быть доступны только если пользователь открыл этот список.
Перед блоками с большим списком интерактивных элементов следует создавать невидимые в несфокусированном состоянии кнопки. Самая популярная и обязательная к созданию на каждом сайте это skip to content кнопка. Для того чтобы понять, что это, зайдите, к примеру на главную страницу https://github.com/ и нажмите tab.

Пример кнопки Skip to content.

Суть этой кнопки в том что нажав на нее ваш фокус сместится на основной контент страницы и вы пропустите кучу ссылок в меню, если оно вам не требуется.

Так как якорная ссылка не всегда срабатывает, ниже пример кода для инициализации кнопки.
```
const initSkipToContent = () => {
	const skipToContent = (event) => {
		event.preventDefault();

		const target = document.querySelector('[data-role="main"]');

		target.setAttribute('tabindex', '-1');
		target.focus();
	};

	const button = document.querySelector('[data-role="skip-to-content-button"]');

	button.addEventListener('click', skipToContent);
};

window.addEventListener('load', initSkipToContent);
```

Семантическая верстка

Доступ с клавиатуры

Outline