Accessibility *

Коллекция советов и приёмов вёрстки с сайта 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 с учётом цветовой схемы и предпочтений пользователя.

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

Это перевод статьи Nic Chan «A Complete Guide To Accessibility Tooling» из журнала Smashing Magazine.

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

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

Отдельное спасибо комментаторам, которые отметились в комментариях к первой части. Устройства с костной проводимостью, программные решения вроде Equalizer APO 1.2.1, слуховые устройства с поддержкой Bluetooth — мы собрали и передали все ваши идеи. Может быть, что-то из этого и выйдет. Но мы расскажем о своём варианте. Возможно, он тоже окажется кому-то полезен.

Привет, c вами Cloud4Y!

Есть замечательная статья 'Experimenting On My Hearing Loss' by paddlesteamer, которая сама по себе достойна перевода. Но инженер компании Дмитрий Михайлов вместе с Андреем Огурчиковым пошли дальше, испытав методику на себе. Материала получилось много, с обилием кода и аудиограмм. Поэтому мы разбили его на две части. В первой расскажем, зачем нам понадобилось "играться" со звуком и опубликуем перевод статьи, ставшей основной для последующей доработки напильником. Вторая часть будет посвящена нашему решению. Если у вас есть сотрудники с нарушениями слуха, рекомендуем к прочтению.

8 июня 2009 года Фил Шиллер выступил на WWDC. Всего 36 секунд он неловко говорил о VoiceOver, Zoom, White on Black (с  iOS 6 называется Invert Colors) и Mono Audio. Это были первые реальные специальные функции на платформе iPhone OS, как её тогда называли. Однако, они не произвели большого впечатления — 36 секунд закончились, а потом не было никакой демонстрации или аплодисментов, и Шиллер просто перешел к описанию приложения Nike+.

Но в сообществе людей с проблемами зрения всё было иначе. Казалось, что время остановилось где-то после 1:51:54. Произошло нечто совершенно удивительное, и только несколько человек, казалось, понимали, что это значит.

Перевод заметок с сайта HTMHell - коллекции плохих примеров HTML-кода, взятых из реальных проектов.

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

Я был обычный человек, а теперь инвалид. Рассказываю свою противостояния последствиям травмы, восстановления и возвращения к обычной жизни. 

В статье рассказываю о том, что случилось и как я преодолел это.

Заряд мотивации обеспечен!

Как я стал инвалидом и организовал свою жизнь. Да, финансы - мое больное место. Зато я женат и счастлив.

Как так получилось? Узнаете из этой статьи...

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

Осталось меньше месяца до конференции HolyJS (20-23 апреля, онлайн) — пора рассказать, что именно там будет. Под катом описания докладов с разбивкой по тематическим блокам. А для начала — несколько вопросов для затравки:

• В чём недостатки GraphQL?
• Зачем OCaml на фронтенде?
• Чего вы не знаете о DevTools?
• Как писать надёжные тесты для Vue?
• Как сделать свой DSL-язык легко и непринуждённо?
• Как добиться на дешёвом устройстве плавности дорогого?
• Как отобразить 100500 метрик и не сойти с ума?
• Как принести в JS типы ещё радикальнее, чем в TypeScript?

Ответы на всё это и многое другое — в докладах.