С тех пор папочка уже разрослась и разделилась на 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" на всех внутренних ссылках, элементы будут попадать в фокус скринридера.
Скринридеры нормально читают эмодзи, хоть и не все. Этот (💥) озвучивается как "взрыв". Незрячие тоже могут добавлять эмодзи, не все это любят, так же как и среди зрячих не все их используют
Стоят они действительно дорого. Но государство выдаёт дисплеи Брайля бесплатно, хоть и не просто так:
Брайлевский дисплей с 2022 года включили в список технических средств реабилитации для детей с инвалидностью по зрению
Это из старой новости, их могли выдавать слепоглухим и детям с инвалидностью по зрению (без глухоты или слабовидящим). А с недавних пор их могут выдавать и взрослым незрячим без глухоты. Подходящих новостей не нашла, но незрячие знакомые обсуждали и делились опытом, как просто их получили.
Опыт незрячих кардинально отличается от опыта зрячих, и среди них тоже люди с разным уровнем технических навыков. Некоторые и Брайль не знают, а некоторые синтезатор слушают на скорости 1000 слов в минуту и зарабатывают по 100500 (конечно больше)
формулировка не для дизайнеров, а для разработчиков
Вот запостила — 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 (цифровая доступность)?
Есть люди со светобоязнью, это уже про доступность
Скринридеры нормально читают эмодзи, хоть и не все. Этот (💥) озвучивается как "взрыв". Незрячие тоже могут добавлять эмодзи, не все это любят, так же как и среди зрячих не все их используют
Статья не относится к хабу Accessibility (цифровая доступность).
Стоят они действительно дорого. Но государство выдаёт дисплеи Брайля бесплатно, хоть и не просто так:
Это из старой новости, их могли выдавать слепоглухим и детям с инвалидностью по зрению (без глухоты или слабовидящим). А с недавних пор их могут выдавать и взрослым незрячим без глухоты. Подходящих новостей не нашла, но незрячие знакомые обсуждали и делились опытом, как просто их получили.
Опыт одного зрячего человека)
Опыт незрячих кардинально отличается от опыта зрячих, и среди них тоже люди с разным уровнем технических навыков. Некоторые и Брайль не знают, а некоторые синтезатор слушают на скорости 1000 слов в минуту и зарабатывают по 100500 (конечно больше)
Посмотрите, как показывал брайлевский ввод Анатолий Попко для wylsacom, или тут на Хабре. Необходимость в морзянке для слепых сразу отпадает