Автор: Hiway

Рубрики
Верстальщику Разработка

Проблемы доступности слайдеров

Проблемы доступности слайдеров: анализ и варианты решений.

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

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

Но дайвайте сначала решим, что же такое карусель как компонент UX?

Продолжить чтение «Проблемы доступности слайдеров»
Рубрики
Верстальщику Разработка

Паттерны доступности зуммирования изображений

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

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

В этой статье хотелось бы рассмотреть примеры реализации данного функционала с учетом потребностей всех пользователей. Мы рассмотрим примеры от самого простого (но не самого плохого) и до более сложного с использованием JavaScript и плагинов.

Продолжить чтение «Паттерны доступности зуммирования изображений»
Рубрики
Верстальщику Разработка

Проблемы доступности веб-форм

Идея изображения с сайта www.deque.com

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

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

Продолжить чтение «Проблемы доступности веб-форм»
Рубрики
Верстальщику Разработка

Обзор интересных курсов для фронтенд разработчика

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

Продолжить чтение «Обзор интересных курсов для фронтенд разработчика»
Рубрики
Верстальщику Разработка

Tailwind CSS: to use, or not to use?

Я немного опоздал с этой статьей поскольку пару месяцев назад вышло довольно много материалов, особенно в англоязычном Вебе о Tailwind CSS. Но, имея реальный опыт использования этого фреймворка на реальном продакшн проекте, я все-таки решил написать этот пост.

Лично я был весьма доволен результатом моей работы с фреймворком, однако объективно понимал, что это не совсем то, что можно назвать «best practice» в мире CSS. Именно в силу своих двояких чувств я решил написать этот материал, в котором для себя и может еще для кого-то кто думает попробовать этот фреймворк разложить все по полочкам. Когда-то давно я уже публиковал пост с размышлениями о том, стоит ли вообще использовать CSS фреймворки. Теперь, когда для многих вопрос с использованием не возникает вообще, стоит рассмотреть конкретный пример.

Продолжить чтение «Tailwind CSS: to use, or not to use?»