Есть расширения для симуляции дальтонизма на сайте и даже по URL:
Colorblind Web Page Filter Testing Tool & Simulator | Toptal®. Указываем url-адрес для просмотра и цветовой фильтр, который необходимо применить к этому ресурсу. Выдает страницу сайта, обработанную под выбранный вид дальтонизма.
Funkify – Disability Simulator (платный) тремор, дальтонизм, туннельное зрение, дислексия, слабовидящий, периферийное зрение и другие нарушения.
Остальные про дальтонизм:
Расширение Chrome A11Y - Color blindness empathy test. Симулятор различных видов дальтонизма.
Расширение Chrome Let's get color blind. Симулятор дальтонизма и наоборот - позволяет адаптировать цвета для дальтоников. И то, и другое с возможностью изменить серьезность дальтонизма.
Расширение Chrome WCAG Color contrast checker (не официальный от WebAIM или WCAG). Симулятор различных видов цветовой слепоты. Также проверяет контрастность всех элементов на странице. В том числе, в зависимости от выбранного типа дальтонизма, так как визуальный контраст при этом может меняться.
Тестировать то можно, но требовать нельзя, потому что нет законных оснований (для не гос. организаций, хотя с госами тоже сложно). Вон в США большая судебная практика, потому что у них есть обязательства по закону и они касаются большинства сайтов (общественных мест и организаций).
А тут вообще ничего не разглядеть, даже если нажать картинку и она типа откроется в увеличенном виде.
стандарты доступности (A11y) на уровне ДНК: контрастность
Контрастность, говорите? Поля ввода как были незаметные, так и остались. Даже на ЦИПРе, прошедшем 19 мая 2026 года, обратили внимание на неконтрастные поля ввода:
Контраст 1.07 на грани видимости, замерила на странице авторизации.
Так что я согласна,
«рисовать макеты» — это путь в ад
Автор почему-то написал в песочницу, а не в официальном профиле РТЛабс. Значит он уже не работает, но при этом пишет про Госуслуги, как будто там ещё работает.
Поставила бы минус, если бы могла. За 1) качество иллюстраций, 2) вранье (автор недоговаривает), 3) качество статьи - чего-то полезного и интересного нет в статье, она как будто написана нейросетью, 4) оторванность от реальности.
Редакция РТЛабс бы не пропустила в таком виде статью, её пришлось бы много дорабатывать и наполнять реальным смыслом.
Такое впечатление, что автор уже не работает в РТЛабс. Профиль компании (РТЛабс) существует на Хабре, но почему-то автор опубликовался не в нём, а в песочнице 🤨
С тех пор папочка уже разрослась и разделилась на 3 папки. В основной более релевантное по цифровой доступности и разработческое, в остальных куча всего разного (все 3 папки в канале).
Роль presentation удаляет только семантику блока, на котором находится, и не затрагивает дочерние элементы. Так что можно не опасаться, что наша кнопка превратится в кирпич, и смело добавлять role="presentation" на блок.
Это ошибка или результат проведенных исследований? Если второе, очень не хватает пруфов.
В статье имелись ввиду те служебные div-контейнеры в вёрстке Госуслуг, на которые планировалась ставить role="presentation", на них и тестировала озвучку.
Что хотелось бы в качестве пруфов — скрины с видео, описанием и демку для самостоятельной проверки?
Наверное, надо было подробней написать, что не на всех блоках семантика удаляется и почему. Восполню этот пробел сейчас.
Если читать спецификацию, то там описываются разные случаи: семантика удаляется у потомков, не удаляется у потомков, или даже не удаляется у родителя.
Чтобы разобраться, сначала надо дать 4 определения, которые используются в спеке.
Неявная (implicit) роль — имеющаяся у элемента по умолчанию, встроенная. Например, роль button у тега кнопки <button>, роль link у ссылки <a>, роль heading у заголовков <h1>-<h6>.
Явная (explicit) роль — заданная с помощью атрибута role. Например, роль tab (вкладка) у элемента <button> вместо неявной роли button от тега.
Важный термин для потомко-родительских отношений элементов:
Required Owned Elements (ROE) — элементы, требующие владельца/родителя (затрудняюсь, как перевести красиво). Элементы-потомки, которые не могут существовать и носить свою роль без родителя, к таким относятся <li> с ролью listitem внутри <ul> и <ol> с ролью list, внутренние элементы <table>, роли tab внутри tablist и тому подобные.
Унаследованная (inherited) — роль у ROE-потомка, которую он получил от своего обязательного родителя.
Как role="presentation" повлияет на дочерние элементы, зависит от ролей родительских и дочерних элементов.
Фокусабельные элементы и другие интерактивные. Если на них поставить role="presentation", то она не применится, неявная семантика элемента сохранится. <button role="presentation"> останется кнопкой с ролью button :)
Комплексные роли, которые не могут существовать сами по себе - родители и их потомки-ROE. Если role="presentation" ставится на родителя, то их ROE-потомки наследуют роль — вся семья теряет семантику. Кроме тех случаев, когда у потомков явно задана роль атрибутом role.
По поводу удаления семантики вложенных элементов там есть примечание, в нём прямо написано, что семантика должна удалиться только у ROE-потомков (требующих владельца-родителя). Весь остальной вложенный контент сохранит свою семантику, включая вложенные списки и таблицы.
Если это <div role=presentation">, то у него удаляется семантика, у его потомков сохраняется.
Там ещё нюансы, что у элементов с глобальными атрибутами должна сохраняться неявная нативная роль. А если атрибуты специфичные для роли, то семантика удаляется.
Проверить как озвучивается кейс Госуслуг можно на услуге получения российского паспорта. Там как раз на первом экране список, который вместе с другим текстом обернут в div-контейнер с role="presentation". Списки озвучиваются, место элемента в списке — всё, как обычно.
Добавить семантику цен: «Цена со скидкой: X», «Старая цена: Y»
Может быть для незрячих будет лучше писать сначала цену: "200 р со скидкой, старая цена 300 р". Потому что и так понятно, что единственная цена в рублях в карточке - это текущая цена. Такие тонкости - уже UX для незрячих, можно обсуждать с UX-редакторами и исследовать с ЦА.
Скрыть боковое меню от табуляции, когда оно закрыто (inert или tabindex="-1")
Почему не visibility: hidden? Даже если есть tabindex="-1" на всех внутренних ссылках, элементы будут попадать в фокус скринридера.
Есть расширения для симуляции дальтонизма на сайте и даже по URL:
Colorblind Web Page Filter Testing Tool & Simulator | Toptal®. Указываем url-адрес для просмотра и цветовой фильтр, который необходимо применить к этому ресурсу. Выдает страницу сайта, обработанную под выбранный вид дальтонизма.
И все бесплатные (кроме Funkify).
Есть такое расширение:
Funkify – Disability Simulator (платный) тремор, дальтонизм, туннельное зрение, дислексия, слабовидящий, периферийное зрение и другие нарушения.
Остальные про дальтонизм:
Расширение Chrome A11Y - Color blindness empathy test. Симулятор различных видов дальтонизма.
Расширение Chrome Let's get color blind. Симулятор дальтонизма и наоборот - позволяет адаптировать цвета для дальтоников. И то, и другое с возможностью изменить серьезность дальтонизма.
Расширение Chrome WCAG Color contrast checker (не официальный от WebAIM или WCAG). Симулятор различных видов цветовой слепоты. Также проверяет контрастность всех элементов на странице. В том числе, в зависимости от выбранного типа дальтонизма, так как визуальный контраст при этом может меняться.
В фигме симуляторы дальтонизма тоже есть.
Тестировать то можно, но требовать нельзя, потому что нет законных оснований (для не гос. организаций, хотя с госами тоже сложно). Вон в США большая судебная практика, потому что у них есть обязательства по закону и они касаются большинства сайтов (общественных мест и организаций).
Контрастность, говорите? Поля ввода как были незаметные, так и остались. Даже на ЦИПРе, прошедшем 19 мая 2026 года, обратили внимание на неконтрастные поля ввода:
Так что я согласна,
Автор почему-то написал в песочницу, а не в официальном профиле РТЛабс. Значит он уже не работает, но при этом пишет про Госуслуги, как будто там ещё работает.
Поставила бы минус, если бы могла. За 1) качество иллюстраций, 2) вранье (автор недоговаривает), 3) качество статьи - чего-то полезного и интересного нет в статье, она как будто написана нейросетью, 4) оторванность от реальности.
Редакция РТЛабс бы не пропустила в таком виде статью, её пришлось бы много дорабатывать и наполнять реальным смыслом.
Скорее, чтобы добавить ссылочку на "статью" на Хабре в резюме.
Такое впечатление, что автор уже не работает в РТЛабс. Профиль компании (РТЛабс) существует на Хабре, но почему-то автор опубликовался не в нём, а в песочнице 🤨
формулировка не для дизайнеров, а для разработчиков
Вот запостила — https://t.me/A11y_Space/486
Собираю туда всякое интересное по теме доступности и инклюзии, статистику тоже.
Спасибо за упоминание, приятно!
С тех пор папочка уже разрослась и разделилась на 3 папки. В основной более релевантное по цифровой доступности и разработческое, в остальных куча всего разного (все 3 папки в канале).
Вроде пишете про доступность, но вставляете текст в виде картинки и график без подписи 👎
Статистика настроек доступности в RuStore интересная, запощу к себе в канал, может быть.
В чем проблема написать текстом вместо картинок? На мобилке мелко, в тёмной теме вообще ужас
А таблица? Хоть бы уменьшили столбцы, которые не показываются:
Поставила бы минус, если бы могла 👿
Судя по количеству плюсов и сохранений, та статья крутая и вполне вписывается.
В статье имелись ввиду те служебные div-контейнеры в вёрстке Госуслуг, на которые планировалась ставить role="presentation", на них и тестировала озвучку.
Что хотелось бы в качестве пруфов — скрины с видео, описанием и демку для самостоятельной проверки?
Наверное, надо было подробней написать, что не на всех блоках семантика удаляется и почему. Восполню этот пробел сейчас.
Если читать спецификацию, то там описываются разные случаи: семантика удаляется у потомков, не удаляется у потомков, или даже не удаляется у родителя.
Чтобы разобраться, сначала надо дать 4 определения, которые используются в спеке.
Неявная (implicit) роль — имеющаяся у элемента по умолчанию, встроенная. Например, роль button у тега кнопки <button>, роль link у ссылки <a>, роль heading у заголовков <h1>-<h6>.
Явная (explicit) роль — заданная с помощью атрибута role. Например, роль tab (вкладка) у элемента <button> вместо неявной роли button от тега.
Важный термин для потомко-родительских отношений элементов:
Required Owned Elements (ROE) — элементы, требующие владельца/родителя (затрудняюсь, как перевести красиво). Элементы-потомки, которые не могут существовать и носить свою роль без родителя, к таким относятся <li> с ролью listitem внутри <ul> и <ol> с ролью list, внутренние элементы <table>, роли tab внутри tablist и тому подобные.
Унаследованная (inherited) — роль у ROE-потомка, которую он получил от своего обязательного родителя.
Как role="presentation" повлияет на дочерние элементы, зависит от ролей родительских и дочерних элементов.
Фокусабельные элементы и другие интерактивные. Если на них поставить role="presentation", то она не применится, неявная семантика элемента сохранится. <button role="presentation"> останется кнопкой с ролью button :)
Комплексные роли, которые не могут существовать сами по себе - родители и их потомки-ROE. Если role="presentation" ставится на родителя, то их ROE-потомки наследуют роль — вся семья теряет семантику. Кроме тех случаев, когда у потомков явно задана роль атрибутом role.
По поводу удаления семантики вложенных элементов там есть примечание, в нём прямо написано, что семантика должна удалиться только у ROE-потомков (требующих владельца-родителя). Весь остальной вложенный контент сохранит свою семантику, включая вложенные списки и таблицы.
Если это <div role=presentation">, то у него удаляется семантика, у его потомков сохраняется.
Там ещё нюансы, что у элементов с глобальными атрибутами должна сохраняться неявная нативная роль. А если атрибуты специфичные для роли, то семантика удаляется.
Проверить как озвучивается кейс Госуслуг можно на услуге получения российского паспорта. Там как раз на первом экране список, который вместе с другим текстом обернут в div-контейнер с role="presentation". Списки озвучиваются, место элемента в списке — всё, как обычно.
Другие специфичные случаи собрала в демке https://codesandbox.io/p/sandbox/tndp9n
Так что судя по спеке, цитата из Доки не совсем верна и конкретна:
Повод законтрибьютить в Доку и предложить исправление :)
Может быть для незрячих будет лучше писать сначала цену: "200 р со скидкой, старая цена 300 р". Потому что и так понятно, что единственная цена в рублях в карточке - это текущая цена. Такие тонкости - уже UX для незрячих, можно обсуждать с UX-редакторами и исследовать с ЦА.
Почему не
visibility: hidden? Даже если естьtabindex="-1"на всех внутренних ссылках, элементы будут попадать в фокус скринридера.Как проводили исследование?
Спасибо за крутую статью, редко пишут про адаптацию к изменению размера шрифта. Добавила себе в закладки.
Почему считаете, что на сайте должно быть заявление о доступности?
В самом конце статьи:
Видимо, подразумевается канал
Кстати, nvda ведь опенсорсный проект, как минимум, можно принести им ишью, а как максимум — предложить исправление.
Чем стотажные дивы мешают пользователю?
Только как это относится к accessibility (цифровая доступность)?