Drag-&-Drop-компоненты для слепых пользователей
Что объединяет Trello, Gmail, Aviasales, Google Keep? В каждом из них есть Drag-&-Drop-компоненты, которые можно перетаскивать мышкой. Это делает сайты по-настоящему удобными, потому что в реальной жизни мы часто используем этот паттерн. Передвигать вещи для нас естественно, поэтому и в вебе мы хотим перемещать элементы по экрану с одного места на другое, как стикеры на доске или магнитики на холодильнике. Сортировка todo-списков, организация дашбордов, загрузка файлов — очень сложно представить все эти события без перетаскивания элементов на странице.
Но есть нюанс. При создании таких компонентов разработчик думает, что пользователи физически видят экран и элементы, могут зацепиться за них мышкой и перетащить. Часто так и есть, но существует сегмент пользователей с проблемами зрения. Как сделать так, чтобы им тоже были доступны Drag-&-Drop-компоненты?
Рекомендуем рассказ разработчика о создании Drag-&-Drop-компонентов для тех, кто не видит экран и пользуется другими устройствами для взаимодействия с браузером. Текстовая версия: https://tprg.ru/YG27
#фронтенд #css #javascript
Что объединяет Trello, Gmail, Aviasales, Google Keep? В каждом из них есть Drag-&-Drop-компоненты, которые можно перетаскивать мышкой. Это делает сайты по-настоящему удобными, потому что в реальной жизни мы часто используем этот паттерн. Передвигать вещи для нас естественно, поэтому и в вебе мы хотим перемещать элементы по экрану с одного места на другое, как стикеры на доске или магнитики на холодильнике. Сортировка todo-списков, организация дашбордов, загрузка файлов — очень сложно представить все эти события без перетаскивания элементов на странице.
Но есть нюанс. При создании таких компонентов разработчик думает, что пользователи физически видят экран и элементы, могут зацепиться за них мышкой и перетащить. Часто так и есть, но существует сегмент пользователей с проблемами зрения. Как сделать так, чтобы им тоже были доступны Drag-&-Drop-компоненты?
Рекомендуем рассказ разработчика о создании Drag-&-Drop-компонентов для тех, кто не видит экран и пользуется другими устройствами для взаимодействия с браузером. Текстовая версия: https://tprg.ru/YG27
#фронтенд #css #javascript