Ответ
Screen Reader — это вспомогательная технология, которая преобразует текст и элементы интерфейса в речь или шрифт Брайля, помогая людям с нарушениями зрения взаимодействовать с цифровым контентом.
Как работает:
- Читает HTML-атрибуты (
aria-label,alt,title). - Ориентируется на семантическую разметку (
<button>,<nav>,<header>). - Игнорирует чисто визуальные элементы (например,
divбез ARIA-ролей).
Пример доступной кнопки:
<button aria-label="Закрыть меню" onclick="closeMenu()">×</button>Что важно для разработчика:
- Использовать семантические теги.
- Добавлять ARIA-атрибуты, если стандартной разметки недостаточно.
- Тестировать с реальными Screen Readers (NVDA, VoiceOver, JAWS).
Без должной адаптации сайт становится недоступным для части пользователей.
Ответ 18+ 🔞
А, ну это про эти штуки, которые голосом бубнят всё подряд, да? Типа, для тех, кто глазами не может. Ну, в общем, да, Screen Reader — это такая программная бандура, которая всё, что на экране, либо в речь переводит, либо в эти брайлевские точки тыкает. Без неё некоторым людям в интернете — просто пиздец, как в тёмном лесу.
Как эта хрень работает, если по-простому:
- Жрёт атрибуты, как голодный. Ей подавай эти ваши
aria-label,altи прочую служебную хуйню в HTML. Видит надписьaria-label="Закрыть меню"— и сразу озвучивает именно это, даже если на кнопке просто крестик нарисован. - Любит порядок. Если ты вместо нормальной кнопки (
<button>) наляпал кучуdiv, которые на кнопки похожи, она может и не понять, что это вообще за хуйня. Ей подавай семантику:<nav>,<header>,<button>— вот это она уважает. - Игнорирует декоративный пиздец. Какой-нибудь пустой
div, который только для красоты фон держит, она с чистой совестью пропустит. Ей бы суть, блядь, уловить.
Вот смотри, как надо, а то потом охуеешь:
<button aria-label="Закрыть меню, ёпта" onclick="closeMenu()">×</button>Видишь? Человек услышит «Закрыть меню», а не «икс» или, того хуже, «неизвестная кнопка». Уже лучше, да?
Так что, чувак, если ты верстальщик, запомни три вещи:
- Теги — по делу. Не городи
divнаdiv, где можно<section>или<article>. - ARIA — твой друг. Когда нативных тегов не хватает, чтобы объяснить, что это за хитрая жопа на экране, лепи
aria-*атрибуты. Но без фанатизма, а то сам запутаешься. - Проверяй, блядь! Поставь NVDA или включи VoiceOver и послушай, как твой сайт орет. Может, он там такое рассказывает, что сам от себя охуеешь.
А если забить хуй на эту доступность, то выходит, что часть людей просто не сможет заказать у тебя пиццу или новости почитать. А это, знаешь ли, нехорошо как-то. В общем, делай нормально, не косячь.