#скринридер — Public Fediverse posts

Инклюзивность без галочки: как мы внедряли доступность в большой продукт и не развалили архитектуру

Это разбор реального опыта внедрения доступности в крупном веб-продукте с десятками микросервисов и сложным фронтендом. Без лозунгов, зато с кодом, ошибками, переработками дизайн-системы и неожиданными проблемами в CI. Поговорим про ARIA, серверный рендеринг, мобильные скринридеры, автоматическое тестирование и про то, почему доступность — это не про alt у картинок, а про архитектуру. Когда я впервые услышал фразу сделаем доступность, я честно подумал: окей, добавим alt, поправим контраст, закроем задачу. Спойлер — это был самый наивный момент за весь проект. Мы работали над крупной B2B-платформой. Много форм, таблиц, кастомных контролов, графиков, drag-and-drop, модалки внутри модалок. И в какой-то момент заказчик сказал: продукт должен соответствовать WCAG 2.1 AA. Причём не формально, а чтобы им реально могли пользоваться люди с ограничениями по зрению и моторике. Если вы думаете, что это история про дизайнеров, то нет. Это история про архитектуру, состояние UI, серверный рендеринг, события клавиатуры, правильный фокус и даже про бэкенд-валидацию. Давайте по порядку.

https://habr.com/ru/articles/1004332/

#доступность #WCAG #ARIA #скринридер #инклюзивный_дизайн #React #тестирование #UX

Как скринридер «видит» сайт: DOM, accessibility tree и API простыми словами

Когда мы говорим про скринридеры, почти все сначала думают так: «Ну он просто читает HTML со страницы». Это не так. Скринридер не видит экран, не читает HTML напрямую, и не “ходит” по странице, как человек с мышкой. Между страницей в браузере и скринридером есть несколько промежуточных слоёв. И именно из-за них доступность либо работает, либо полностью ломается.

https://habr.com/ru/articles/1001642/

#ccessibility #доступность #UX #UI #screen_reader #скринридер #accessibility_tree #семантика_HTML #клавиатурная_навигация #focus_management

Как программировать без мыши, без монитора, без зрения…

Может ли жизнь незрячего человека быть хотя бы немного похожей на жизнь обычных людей? Может ли незрячий человек самореализоваться? Освоить сложную профессию? Легко ли ему конкурировать со зрячими коллегами? Решили разобраться в этих вопросах в новом видеовыпуске на канале вАЙТИ .

https://habr.com/ru/companies/beeline_cloud/articles/821617/

#разработка #скринридер #шрифт_брайля #youtube

Всего 37% российских онлайн-ресурсов доступны для незрячих людей

К таким выводам пришла команда проекта Everland в результате масштабного исследования невизуальной доступности сайтов и мобильных приложений крупнейших российских компаний. Тринадцать незрячих тестировщиков, прошедших специальное обучение, проанализировали в общей сложности 90 платформ 36-ти компаний из 6 сфер: ритейл, путешествия, телеком, банки, образование и маркетплейсы. Исследовались сайты и приложения на iOS (в случае банков — мобильные версии сайтов) и Android. О выводах ниже.

https://habr.com/ru/articles/791030/

#инклюзия #скринридер #скринридеры #экранныйдоступ #невизуальнаядоступность #невизуальная_доступность

<dl> или <table>? Исследуем подходы к представлению пар ключ-значение в HTML

Казалось бы, простая задача - сверстать список пар ключ-значение. Бери <div> и делай. Но что, если захотелось подушнить ? Этим и займёмся в статье... Рассмотрим три подхода к решению этой задачи: <div> , <dl>, <dt>, и <dd> , и <table> . Обсудим преимущества, недостатки и примеры. Цель - помочь выбрать наиболее подходящий подход для конкретной задачи.

https://habr.com/ru/articles/782622/

#html #accessibility #семантика #div #dl_dt_dd #table #скринридер #душнилы