Accessibility *

Привет, Хабр!

У меня есть хобби — смотреть записи собеседований фронтенд-разработчиков. К моей радости, во многих из них встречаются вопросы про accessibility. На этом хорошие новости заканчиваются.

Далее я начинаю тихо плакать в уголку. Что интервьюер, что кандидат строят весь диалог в стиле: «Это про адаптацию для слепых». В общем, набрался я сил, решил написать статью, чтобы показать всем, где у нас ошибки.

Я на практике покажу, в каких местах появляется accessibility. Дам несколько советов. Также важно сказать, что все термины, используемые в статье, моя вольная интерпретация. Пожалуйста, учтите это и больше обращайте внимание на смысл.

Давайте посмотрим, что я вам подготовил.

Сегодня мобильными приложениями активно пользуются не только молодёжь, но и представители старших поколений, количество которых непрерывно растёт (Pew Research Center). Чаще всего именно эти пользователи меняют системный шрифт и настраивают контрастность для комфортного использования. Это влияет не только на пользовательский опыт работы, но ещё и формирует новые потребности в развитии операционных систем Android и iOS.

По данным ресурса Appt, многие люди предпочитают изменять стандартные настройки отображения интерфейса, однако далеко не все разработчики учитывают эту особенность и адаптируют свои интерфейсы под нужды пользователей. Из-за этого возможны ситуации, когда информация, необходимая для совершения критически важных действий (вроде заказа такси или перевода денег) либо вовсе не помещается на экране, либо оказывается расположена неудобно и не соответствует ожиданиям пользователя.

Меня зовут Игорь, я Android-разработчик в Сбере, развиваю проект СберИнвестии в команде «Портфель клиента». Расскажу про наш опыт работы с особыми возможностями Android, как мы к этому пришли, а также на практических примерах покажу улучшения UX нашего приложения. Конечно же, я также расскажу про подводные камни, на которых мы удачно поскользнулись, куда же без этого :).

Этот проект я изначально писал для себя и под свои рабочие привычки: хотелось иметь быстрый «пульт» к компьютеру/серверу из Telegram, где всё управляется кнопками, без постоянного ввода команд.

Потом стало понятно, что штука может пригодиться и другим людям, поэтому я решил выложить её в открытый доступ.

Репозиторий на GitHub

Последняя версия на GitHub на момент публикации: v1.1.7.

Если интересно, как всё начиналось и к чему я пришёл по ходу разработки, у меня уже выходили две статьи на Хабре:

Когда мы говорим о дизайне, чаще всего имеем в виду интерфейсы, сайты, приложения.
Но на самом деле дизайн начинается раньше — в тот момент, когда человек оказывается в новой, непривычной и потенциально пугающей среде.

Один из самых наглядных примеров — кабинет МРТ.

Для пациента это:

Привет, Хабр!

Мне нравится рассказывать про красивые и удобные интерфейсы. Всю свою карьеру я старался делать всё, что мог для комфорта пользователя.

Но также я встречал фронтендеров, которые не тратили много времени, продумывая взаимодействие пользователя с интерфейсом. Им было всё равно, а некоторые даже хотели специально подложить какую-то «какашку».

Я подумал, что надо им помочь сделать ужасный интерфейс! Составил список решений, которые заставят пользователя подумать о разработчиках не очень хорошо.

Давайте посмотрим, что я вам подготовил.

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

На самом деле всё не так просто. Часто эти места спрятаны глубоко в описаниях, а на схеме не отражены вовсе. В этой статье я покажу, как разные площадки — от театров до концертных залов — визуализируют специальные места (или, увы, не делают этого вовсе). 

Сегодня медицинские сервисы соревнуются за удобство: онлайн-запись, чат с врачом, результаты анализов в один клик.

Но есть одна особенность, которую часто недооценивают дизайнеры, продуктовые команды и разработчики:

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

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

Кто же будет первым? Более 12 лет я являюсь клиентом Приорбанка (Беларусь, РБ). Банки — это важные сервисы, они определенно должны быть доступны людям с ограничениями. Я решил начать именно с него, это сервис который важен и для меня, поэтому в двойне интересно это сделать. Да простят меня сотрудники банка!)

Современные языковые модели стремительно меняют наши представления о том, как можно вести разработку, особенно когда ресурсов катастрофически не хватает. Но если в коммерческой сфере целью внедрения ИИ является оптимизация, то в социальной — с помощью LLM хочется решить задачи, которые важны, но зачастую выпадают из бэклога из‑за нехватки средств. В мире существует бесчисленное множество проектов, работающих на стыке технологий и социальных проблем, и за каждым из них стоит свой опыт поиска ресурсов на развитие.

Проект LUWRAIN — пример именно такой истории. Это платформа для разработки невизуальных приложений, которая тринадцать лет создаётся усилиями энтузиастов. Сегодня у неё появляется шанс сделать рывок — с помощью LLM и инженерных подходов, основанных на открытых технологиях. В случае LUWRAIN, как и в случае многих похожих инициатив, существует поиск правильного соотношения смысла и усилий. Поэкспериментировать и найти баланс в том числе помогла программа грантов Yandex Open Source.

Меня зовут Михаил Пожидаев, я работаю доцентом теоретической информатики в Томском государственном университете. Читаю такие предметы как обработка естественного языка, ОС UNIX, анализ социальных сетей и введение в программную инженерию. В этой статье расскажу о своём опыте создания программных продуктов, которые должны казаться странными и нелогичными в привычных обстоятельствах, но обстоятельства нестандартны.

Привет, Хабр!

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

Только по какой-то причине сложно найти антипаттерны по языкам HTML и CSS. Может, потому что они не языки программирования?

В общем, у меня появилось желание это исправить. Я собрал несколько примеров, которые лично отношу к антипаттернам. Возможно, это субъективно, но надеюсь, что нет.

Давайте посмотрим, что я вам подготовил.

Мне часто доводится вести странные споры с фанатами фреймворков о том, действительно ли <div> «столь же хорош», как и <button>.

Спойлер: нет. И давайте выясним, почему.

В современном мире дашборды стали неотъемлемой частью любого бизнеса. Однако часто мы сталкиваемся с тем, что красивые, но бесполезные панели данных не приносят реальной пользы. В этой статье мы разберем основные проблемы создания дашбордов и посмотрим как их решить на практике.

Привет, Хабр.

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

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

Давайте посмотрим, что я вам подготовил.

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

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

• где полезно использовать элемент search;

• существующие проблемы при использовании единиц измерения от размеров вьюпорта для установки размера текста;

• как элемент hr влияет на опыт пользователей скринридера;

• нужны ли заголовки модальным окнам.

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

Все разработчики знают о теге <input>, это рабочая лошадка веба.

Но что такое <output>? Большинство его никогда не касались. Кто-то даже не подозревает о его существовании.

И очень жаль, ведь этот тег решает проблему, которую мы годами пытались решить связкой <div> и ARIA: динамические результаты, по умолчанию объявляемые программам для чтения экрана.

Этот тег уже много лет находится в спецификации, но почему-то скрывается у всех на виду.

💥  «Слепые не видят преград — только дедлайны»

Сложности в трудоустройстве есть у некоторых всех. Вы знали, что люди с инвалидностью и без отзываются об этом одинаковыми словами? Одни говорят «Трудоустройте меня, потому что "Я слепой, мне и так трудно”», а другие «У меня же ипотека, войдите в моё положение» или «Я работаю в айти уже 30 лет, у меня гигантский опыт, а эйчары даже не отвечают. Рынок найма сломался!»

Больно? Ещё как! Но если мы будем просто жалеть себя и в панике наматывать круги в чатах по поиску работы, никакого толкового КПД не родим. В этой статье я поделюсь своим личным опытом и опытом других людей со слепотой о том, как найти и реализовать себя, будь то работа, блогерство или проекты в искусстве.

И этот опыт как никогда пригодится тебе, мой нормотипичный друг.

Привет, Хабр!

Давно я ничего не писал для джунов. А ведь HTML и CSS не стали проще для них. Всё так же есть сложности, и мне надо как-то помочь людям.

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

Давайте посмотрим, что я вам подготовил.

Зачем две темы в одной статье? Затем, что есть задачи, которые нуждаются в обоих механизмах, поэтому новичок, решивший освоить C++ для своих практических нужд, с помощью этой статьи может сразу приступить к реализации не слишком сложных проектов.
Для примера, вот список некоторых задач, которые решаются с помощью этих механизмов:

подмена/эмуляция нажатий клавиш, кнопок мыши;

автоматизация ввода, симуляция поведения пользователя в зависимости от содержимого на экране;

снимки с экрана (по нажатию клавиш или по таймингу);

замена статического содержимого с целью повышения комфорта работы (замена фона, повышение контраста шрифта, экранная лупа);

вывод компактных индикаторов/списков выбора в любой момент в любое место на экране;

превращение домашнего компьютера в медиацентр (беспроводная клавиатура + набор шаблонов для запуска фильмов, музыки, регулировки звука и частот + кресло/диван + большой монитор + печеньки :-) ).

Любопытно? Тогда прошу в статью!

С развитием LLM моделей AI начали появляться разные ИИ агенты, автоматизирующие задачи.

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

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

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

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

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

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

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