А, ну вот, опять про эту вашу «доступность»! Слушай, как будто мы тут для космонавтов сайты делаем, а не для нормальных людей. Но ладно, раз уж начали, сейчас я тебе на пальцах, только без мата… э, почти.
Так, смотри. Есть такие ребята, которым наш сайт глазами не посмотреть, мышкой не тыкнуть. Им либо скринридер орет в уши, что там на странице, либо они по клаве шастают, как по минному полю. И наша задача — не накосячить так, чтобы они нас мысленно послали на три весёлых буквы.
Первое и главное — **семантика, мать её**. Это не просто красивое слово. Это когда ты кнопку делаешь тегом `
`, а не ``. Потому что для скринридера `
` — это просто кусок дерьма, простите, непонятно чего. А `
` — о, кнопка! Можно нажать! То же самое с заголовками `–`, списками, навигацией ``. Не выдумывай велосипед, используй то, что уже придумали умные дяди.
Второе — **ARIA-атрибуты**. Это такая волшебная палочка, когда семантики не хватает. Допустим, сделал ты свою кастомную кнопку-свистелку из ``ов. Скринридер в ауте. Ты ему шепчешь: `role="button" aria-label="Сделать всё хорошо"`. И он такой: «Ага, понятно, кнопка «Сделать всё хорошо». Но это костыль, блин! Лучше сначала нормальный `` использовать, а ARIA — как заплатка, когда совсем припёрло.
Третье — **клавиатура**. Твой сайт должен жить на `Tab`, `Enter`, `Space`. Сидит человек, у него мышь сломалась или руки не те. Он `Tab` жмёт — фокус должен прыгать по логичным элементам: кнопки, ссылки, поля ввода. А не хуячить по всем подряд `div`ам, как угорелый. И если ты сделал модальное окно, то фокус должен в него зайти и обратно не вывалиться, пока его не закроют. Иначе это пиздец, а не навигация.
Четвёртое — **контраст и размер**. Текст должен быть виден, а не как серая муть на светло-сером фоне. Шрифт — чтобы можно было увеличить без поломки всей вёрстки. Это же не ребус, в конце концов!
Пятое — **альтернативы**. Картинка без `alt` — для скринридера как пустое место. Он так и скажет: «изображение». И всё. А если в `alt` написать «Кот в сапогах смотрит на тебя с укором», то уже веселее. Для декоративных картинок — `alt=""`, чтобы их просто молча пропускали.
Вот тебе живой пример, как не надо и как надо:
```html
×
×
```
Во втором случае и скринридер поймёт, и с клавиатуры нажать можно, и семантика на месте.
А проверить всю эту благодать можно тулзами: Lighthouse в хроме или axe DevTools. Они тебе тычут мордой в косяки, как в лужу. Не игнорируй, а то потом придётся переделывать, когда уже всех пользователей достал.
Короче, доступность — это не для галочки. Это чтобы твой сайт мог использовать вообще любой, а не только тот, у кого руки из нужного места растут и глаза как у орла. Делай нормально — и тебя не забудут, а главное — не пошлют.