Accessibility *

Дайджест новостей и полезных статей из мира фронтенд-разработки за последнюю неделю 30 мая–05 июня.

Давайте поговорим о том, как написать хорошее описание фотографий в атрибуте alt, или альтернативный текст.

Альтернативный текст — это описание картинки на сайте словами. Оно должно помогать людям, которые не видят картинку, но читают или слышат это описание. А иначе можно вообще ничего не писать.

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

В 2018 году мы взяли из детдома в семью слепую девочку Анжелу. Тогда я думал, что это чисто семейное обстоятельство, никак не связанное с моей профессией разработчика систем компьютерного зрения. Но благодаря дочери через два года появилась программа и интернет-сервис для распознавания текстов, написанных шрифтом Брайля - Angelina Braille Reader.

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

Ниже расскажу о том, как делалась эта разработка и с какими трудностями пришлось столкнуться. Более развернутое описание приведено в публикациях [1,2].

Возможно, кто-то захочет внести в проект свой вклад.

На первый взгляд создание доступной среды в цифровом продукте кажется простой задачей. В конце концов, что может быть проще, чем использовать нормальные кнопки вместо div? Но когда пытаешься масштабировать такой подход, все становится сложнее. В этой статье я начну с базовых компонентов (текстовые поля или попапы), а затем объясню, как сделать доступной целую платформу из множества разных приложений, которые написаны десятками разных команд.

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

В статье поговорим про одно из таких решений — написание Angular-компонента Slider с помощью встроенных инструментов  браузеров и с минимальным использованием Javascript. Расскажу про доступность, интересное решение с многослойным градиентом, немного CSS-хитростей и даже чуть-чуть про Change Detection в Angular.

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

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

Это крик души. Речь пойдет не о usability в классическом понимании этого, а в легкости работы со средами для самого ITшника. Здесь все плохо, и, по моему, становится все хуже.

История парня с инвалидностью, который решил стать мелким блогером на YouTube.

В статье найдете мотивацию, аналитику, идеи, чек-лист перед стартом — все,что нужно, чтобы вдохновиться и действовать. 

Наверное, сейчас не очень актуальная информация. Зато пригодится в будущем!

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

В основе устройства – мемристоры (memory + resistor) – микроэлектронные компоненты, способные «запоминать» предыдущие воздействия. Сопротивление таких микроэлектронных устройств зависит от величины прошедшего через них заряда.

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

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

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

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

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

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

На нашей конференции Mobius Виктор Вихров (Яндекс Go) рассказал о том, как сделать Android-приложение более подходящим для использования «вслепую». А эксперт в сфере цифровой доступности Анатолий Попко помог ему, прокомментировав представленные решения с точки зрения такого пользователя. Мы считаем, что такой контент нужен и на Хабре — поэтому сделали текстовую расшифровку доклада.

Коллекция советов и приёмов вёрстки с сайта HTMHell.

Сверстать собственный индикатор загрузки — одна из самых простых задач, с которой может столкнуться веб-разработчик. Для получения рабочего решения пригодятся базовые знания HTML и CSS, а JS будет нужен лишь для управления процентом выполненной задачи.

Однако эта простота обманчива. Интернет наполнен множеством решений, в которых индикатор загрузки анатомически состоит из кучи вложенных друг в друга div-контейнеров, приправленных щепоткой CSS. Не нужно так! В мире грустит один котенок, когда вы игнорируете семантику верстки и забываете про доступность (a11y).

В этой статье я расскажу, как мы в проекте Taiga UI подошли к написанию собственных Angular-компонентов ProgressBar и ProgressCircle.

В статье я расскажу о том, как разрабатывать дизайн доступных (т. е. отвечающих требованиям доступности) компонентов, об основных руководствах по доступности и о ключевых моментах, на которые стоит обратить внимание, а именно: о порядке фокуса, о клавиатурном взаимодействии и об ARIA-атрибутах.

Мы привыкли слышать, что Angular это фреймворк, который решает массу задач из коробки: свой cli, встроенная сборка приложений, автоматическая миграция на новые версии с помощью schematic, работа с http, DI, реактивные формы, работа с состоянием - все это удобные инструменты для разработчика. Обычно я сравниваю его с коробкой автомат, сел и сосредоточенно поехал по дороге, без отвлечений на коробку передач.

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

Этот материал — карманный справочник о том, как работать с цветом в CSS и вебе в целом. Он начинается с теоретических основ и содержит множество инструментов и примеров работы с градиентами, анимацией, SVG и не только.

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

Раньше я считал, что написать книгу — это история длиной в жизнь. Год назад я бы рассмеялся, если бы кто-то сказал, что к стольки-то годам напишу книгу на 250 страниц. Но с фактом не поспоришь: вот книга «Про доступность на iOS».

Рассказываю, как случайности и хорошая подготовка нашли друг друга.

В рамках серии материалов GUI Challange, в данной статье Адам Аргайл демонстрирует один из способов создания очень маленького, но трудоёмкого компонента переключателя toggle с учётом цветовой схемы и предпочтений пользователя.