Accessibility *

Хабр, я снова пришёл к вам с практическими советами про доступность вместе с Ильёй. Мы показываем, как HTML и CSS могут улучшить или ухудшить её. Напоминаю, что Илья — мой незрячий знакомый, который помогает мне найти наши косяки в вёрстке.

Сегодня мы рассмотрим следующие аспекты:

• как сверстать поиск, чтобы им мог воспользоваться пользователь скринридера;
• чем полезно свойство outline-offset;
• зачем вам нужно использовать медиа-функцию prefers-color-scheme;
• где должен находиться заголовок в разметке блока с новостью.

Давайте начнём!

Всем доброго первого зимнего дня!

Меня зовут Рома, я проджект менеджер студенческой команды ПИН-КОД.

Мы хотим рассказать о первой в России продуктовой истории с моделью распознавания РЖЯ - сервисе изучения русского жестового языка и представить небольшой кусочек, который вы сможете сами "пощупать". ?

Ссылка на демо (для нетерпеливых)

Всем привет! Меня зовут Капитанов Александр, я отвечаю за направление компьютерного зрения в SberDevices. В этой статье я расскажу о том, как моя команда Vision RnD разработала серию моделей SignFlow, обеспечивающих перевод с жестового языка на русский и американский английский в реальном времени с высокой метрикой качества. На основе этих моделей мы реализовали прототип общения с генеративной языковой моделью GigaChat, что является первым в мире открытым решением задачи общения с искусственным интеллектом при помощи русского жестового языка (РЖЯ). Далее я расскажу о разработке модели, тонкостях обучения, демо-стенде и интеграции с GigaChat.

Привет, я Марго — инклюзивный продакт. Впервые вопросом «Какого черта одним можно, а другим нет?» я задалась после отдыха в Турции, где мы с друзьями покоряли горки в аквапарке. Все было круто, потом мы прилетели в Россию и решили повторить, но на аттракционы… меня не пустили.

В ответ на праведный и почти цензурный гнев я услышала что-то про СанПиН (которых не нашла) и грязные колеса (которые я не подумала протереть, да же ж?).

Так вот, именно эту проблему решает инклюзивность: чтобы все могли разгонять адреналин на горках, пользоваться любыми приложениями и устройствами, пить пиво и тусить в клубах, вне зависимости от физических, национальных, гендерных и других особенностей.

И если вы подумали: «Эта ваша мораль и этика вовсе не про бизнес, а мы тут деньги зарабатываем», у меня для вас новости.

Инклюзивность — это действительно +100500 к карме, а еще способ сыграть на метриках и получить прибыль. Как? Погнали читать!

Хабр, я уже третий месяц пишу про доступность вместе с Ильёй. Мы показываем, как HTML и CSS могут улучшить или ухудшить её. Напоминаю, что Илья — мой незрячий знакомый, который помогает мне найти наши косяки в вёрстке.

Сегодня уже будет не только HTML и CSS. В некоторых кейсах мы будем использовать ARIA-атрибуты. Я расскажу:

• как мы незаметно потеряли пользу элементов <section> и <form>;
• как атрибут tabindex запутывает незрячего пользователя;
• почему визуально скрытые элементы — проблема современных интерфейсов;
• что делать с паттерном «Звёздочка» для обязательных полей.

Давайте начнём!

Допустим, вы уже прониклись важностью обеспечения доступности ваших сервисов, закатали рукава и готовы взяться за работу.

С чего же начать? Сделать методички для дизайнеров? Протестировать свои продукты на пользователях с нарушениями зрения? Отправить всех разработчиков читать материалы по доступной разработке?

Что вам действительно важно, если вы занялись доступностью? Вам важны работающие доступные сервисы, поэтому начать надо с решения конкретных проблем. Вам нужны быстрые победы. Много и недорого.

Я продолжаю рассказывать, как HTML и CSS могут улучшить или ухудшить доступность интерфейсов. В своём рассказе я использую свой опыт и моего незрячего знакомого Ильи.

В этой статье будет: атрибут autofocus и его нюансы, паттерн «Skip-link» и идея Ильи об использовании его на практике, проблема использования одинаковых ссылок для одной новости, что не так с кнопкой «Наверх» и как вы спрятали список от скринридеров.

Давайте начнём!

В этой статье я хочу поделиться своим опытом использования тематического разделения доступа (ТРД) для создания веб-приложения, которое позволяет пользователям обмениваться сообщениями по разным темам. ТРД — это метод управления доступом, при котором права доступа субъектов системы на объекты группируются с учётом специфики их применения, образуя роли¹. Например, в моём приложении есть роли администратора, модератора, автора и читателя. Каждая роль имеет свой набор прав на разные действия, такие как создание, редактирование, удаление и просмотр сообщений.

Здравствуйте! Я сделал несколько наборов русскоязычных карточек для Альтернативной и дополнительной коммуникации (АДК) / Alternative and Augmentative Communication (AAC) в формате OpenBoard. Карточки созданы в программе CoughDrop. Формат .obz поддерживается в том числе программой Optikey Symbol.

Карточки предназначены для людей с ДЦП, СМА и другими схожими расстройствами, которые могут общаться только при помощи айтрекинга (окулографии), как, например, Стивен Хокинг. Мой форк программы LINKa. Смотри, альтернативы OptiKey Symbol, с моими наборами карточек — LINKa.Looks-fork 1.7.0.2. Пользуемся этими проектами в Детском Паллиативном Центре (Беларусь).

Репозиторий GitHub: https://github.com/pasha-liubetski/aac-cards-obf
Релизы: https://github.com/pasha-liubetski/aac-cards-obf/releases
Лицензия: Creative Commons BY-SA 4.0

Cегодня я хочу рассказать про атрибут aria-label. В статье не будет заумных определений и бездумного копирования стандарта. Я хотел простым языком объяснить, какая польза от атрибута, а также передать свой практический опыт, чтобы вы могли его повторить. А получилось у меня или нет, решать вам.

Со вступительным словом всё. Давайте начнём!

Всем привет! Меня зовут Артём Плаксин, я незрячий специалист по цифровой доступности и работаю в ВК. Почитать о моей работе в офисе вы можете в одном из постов этого блога, а сегодня я хочу поговорить о практической стороне доступности. Этот пост посвящён доступности изображений, выводимых через теги <img> и <svg>.

Вы узнаете:

• Как понять, нужна ли подпись (альтернативный текст) к картинке.

• Какие подписи будут too much.

• Как адаптировать картинки, которым нужна подпись.

• И, наконец, как адаптировать картинки, которым не нужна подпись.

Данной статьёй я планирую рассказать про интересные случаи и про то, в каких ситуациях можно оказаться, постигая новые горизонты, но не собираюсь даже пытаться заменить справочники по aria-атрибутам и эталонным примерам доступных компонентов. Стандарт W3C полон полезной информации, которая сдержанно подает только нужное. Я же предостерегу вас от некоторых сомнительных решений, с которыми вы можете столкнуться, и постараюсь приблизить задачу доступности к стандарту, коим для нас сейчас является покрытие тестами и использование анализаторов кода.

Этот вопрос преследует меня всю мою карьеру, начиная с 2013 года. Одни разработчики отвечают, потому что так правильно. Другие говорят про SEO. Третьи — ничего не говорят. А я считаю, что атрибут role является отличным ответом на этот вопрос!

Привет, я Таня Рузанова, специалист по доступности интерфейсов в компании РТЛабс. Сегодня расскажу о разных ограничениях здоровья и о ситуациях, которые могут помешать людям пользоваться сайтом или приложением. 

Человек может не очень хорошо видеть, слышать, мыслить и двигаться. Иногда эти проблемы с ним ненадолго и вот он снова в строю. А иногда ничего уже не поправишь, и всю свою жизнь человек проведёт с ОВЗ, то есть с ограниченными возможностями здоровья. ОВЗ — уже устоявшийся термин, который звучит более дружелюбно, чем «инвалид», так что давайте использовать именно его. Рассмотрим виды и типы ограничений в статье.

Многие разработчики думают, что доступность реализуется только с помощью aria-атрибутов. Если их не добавить, то всё, доступности нет. Конечно, aria-атрибуты нужны, но HTML и CSS такая же важная часть процесса создания доступных интерфейсов. Эти технологии непросто несут в себе кучу скрытых моментов, влияющих на доступность. Они напрямую позволяют её улучшить. В статье хочу показать это.

Я затрону не все аспекты. Их очень много, поэтому поговорю о: интерактивных элементах, доступности текста, анимации и изображениях. В статье буду использовать опыт моего незрячего знакомого (привет, Илья). Он внёс бесценный вклад. Уверен, что вам будет интересно. Поехали!

Все слышали про "эпилепсию", иногда натыкались на видео с пометкой "epilepsy warning". И вроде бы понятно, что это что-то связанное с резкими мерцаниями и переменами цветов, но так ли все просто на самом деле? На True Tech Hack одной из задач учатников стала "Адаптация фильмов для людей с особыми потребностями", а одной из таких потребностей стала возможность фильтровать или изменять сцены, которые могли бы вызвать эпилептические припадки. Именно о решении мною этой задачи я и хочу рассказать далее.

Эвристики Нильсена — это правила, которыми должны пользоваться дизайнеры для проектирования взаимодействия между интерфейсом и пользователями. Они помогают выявить основные проблемы, с которыми пользователи могут столкнуться, и предотвратить их.

Применение эвристик полезнее, когда невозможно провести исследования, но необходимо аргументировать решения.

Ниже расскажу на примере реальных приложений про каждую эвристику.