Drag&Drop-компоненты для слепых пользователей. Вы шутите?
Доклад Сергея Кригера о доступности в самых неожиданных местах.
Смотреть: https://www.youtube.com/watch?v=U1UjLN4I9fA
#video #accessibility #interface
Доклад Сергея Кригера о доступности в самых неожиданных местах.
Смотреть: https://www.youtube.com/watch?v=U1UjLN4I9fA
#video #accessibility #interface
YouTube
Drag&Drop-компоненты для слепых пользователей. Вы шутите? / Сергей Кригер (SinnerSchrader)
Приглашаем на FrontendConf 2024, которая пройдет 30 сентября и 1 октября 2024 в Москве.
Программа, подробности и билеты по ссылке: https://frontendconf.ru/moscow/2024
________
РИТ++ 2019
FrontendConf
Тезисы и презентация:
http://frontendconf.ru/moscow…
Программа, подробности и билеты по ссылке: https://frontendconf.ru/moscow/2024
________
РИТ++ 2019
FrontendConf
Тезисы и презентация:
http://frontendconf.ru/moscow…
Правильный ответ: 3
1: Для тега aside по умолчанию используется role=complementary, не имеет смысла дублировать
2: Не следует радикально изменять нативную семантику тегов
4: У обычного текстового поля нет состояния aria-checked
5: Для скрытого input нет доступных ARIA-ролей
6: Для обозначения недоступности кнопок следует использовать нативный атрибут disabled
Что такое ARIA?
Узнать: https://prglb.ru/ds7n
#accessibility #aria
1: Для тега aside по умолчанию используется role=complementary, не имеет смысла дублировать
2: Не следует радикально изменять нативную семантику тегов
4: У обычного текстового поля нет состояния aria-checked
5: Для скрытого input нет доступных ARIA-ролей
6: Для обозначения недоступности кнопок следует использовать нативный атрибут disabled
Что такое ARIA?
Узнать: https://prglb.ru/ds7n
#accessibility #aria
Инклюзивные компоненты: слайдер
Слайдеры похожи на мужчин. Буквально не все они плохие. Кто-то из них даже отзывчивый и тактичный.
Все, что вы должны знать о слайдерах в переводе Татьяны Фокиной: https://prglb.ru/4ra49
#accessibility #interface
Слайдеры похожи на мужчин. Буквально не все они плохие. Кто-то из них даже отзывчивый и тактичный.
Все, что вы должны знать о слайдерах в переводе Татьяны Фокиной: https://prglb.ru/4ra49
#accessibility #interface
🎨 Визуализация данных и цветовая доступность
Как спроектировать удобный для людей с особенностями зрения дизайн? Разработчики Kiddom Academy рассказывают о собственном способе решения проблемы цветовой доступности за 6 шагов.
https://prglb.ru/4v5a
#accessibility
Как спроектировать удобный для людей с особенностями зрения дизайн? Разработчики Kiddom Academy рассказывают о собственном способе решения проблемы цветовой доступности за 6 шагов.
https://prglb.ru/4v5a
#accessibility
:focus-visible уже доступно!!
Доступность без нарушений дизайна: https://prglb.ru/4kln3
#css #accessibility
Доступность без нарушений дизайна: https://prglb.ru/4kln3
#css #accessibility
HTML и CSS ошибки, которые я встречаю как человек без ограничений по здоровью
Сейчас много шума по поводу доступности интерфейсов. Здорово, что появляются интерфейсы, которыми могут пользоваться люди с какими-то ограничениями.
Но мы забываем про людей, у которых нет ограничений по здоровью. У них также есть право пользоваться интерфейсами так, как им удобно.
https://proglib.io/w/cf4fa2ac
#accessibility
Сейчас много шума по поводу доступности интерфейсов. Здорово, что появляются интерфейсы, которыми могут пользоваться люди с какими-то ограничениями.
Но мы забываем про людей, у которых нет ограничений по здоровью. У них также есть право пользоваться интерфейсами так, как им удобно.
https://proglib.io/w/cf4fa2ac
#accessibility
Хабр
HTML и CSS ошибки, которые я встречаю как человек без ограничений по здоровью
Сейчас много шума по поводу доступности интерфейсов. Здорово, что люди обращают на это внимание и начинают разрабатывать интерфейсы, которыми могут пользоваться...
Доступные иконочные ссылки
Иконки - важная часть современного веб-дизайна. Они экономят место и позволяют одним значком объяснить что-то пользователям, говорящим на разных языках. Однако при использовании иконок вместо текста нельзя забывать о доступности - ведь скринридеры не умеют распознавать картинки.
Статья рассказывает, о чем нужно позаботиться, создавая иконочные ссылки без текста: https://proglib.io/w/b5a6b556
#accessibility
Иконки - важная часть современного веб-дизайна. Они экономят место и позволяют одним значком объяснить что-то пользователям, говорящим на разных языках. Однако при использовании иконок вместо текста нельзя забывать о доступности - ведь скринридеры не умеют распознавать картинки.
Статья рассказывает, о чем нужно позаботиться, создавая иконочные ссылки без текста: https://proglib.io/w/b5a6b556
#accessibility
kittygiraudel.com
Accessible icon links
I’m Kitty Giraudel, a transfeminine web engineer based in Berlin, focused on accessibility and inclusivity.
Лучшие практики для создания каруселей
Оптимизируем компонент слайд-шоу для лучшей производительности и доступности: https://proglib.io/w/d5ba96b1
#interface #accessibility #performance
Оптимизируем компонент слайд-шоу для лучшей производительности и доступности: https://proglib.io/w/d5ba96b1
#interface #accessibility #performance
Семь способов тестирования доступности в браузере с помощью Developer Tools
https://proglib.io/w/27cdd995
#accessibility
https://proglib.io/w/27cdd995
#accessibility
Версия для слабовидящих? А можно не надо?
Почему версия для слабовидящих не нужна вашему сайту: https://proglib.io/w/746c610f
#accessibility
Почему версия для слабовидящих не нужна вашему сайту: https://proglib.io/w/746c610f
#accessibility
CSS-LIVE
Версия для слабовидящих? А можно не надо? [расшифровка доклада]
Всем привет, меня зовут Лена. Сейчас я делаю фронтенд в компании AISA и борюсь за вёрстку кнопок кнопками. В сообществе могу быть известна пока что только тем, что модерирую чат Веб-стандартов в Телеграме. В свободное время катаюсь на разных досках. Ну, и…
Сортируемые колонки таблицы
Реализация сортировки с сохранением доступности: https://proglib.io/w/6fe81390
#interface #accessibility
Реализация сортировки с сохранением доступности: https://proglib.io/w/6fe81390
#interface #accessibility
Adrian Roselli
Sortable Table Columns
An accessible sortable table is not necessarily the same as a usable sortable table. Outline: Basics Let The User Know This Thing Has Sorted Screen Reader Announcement Sort Arrows Column Background Column Background via <col> Let The User Know This Thing…
5 идей, как включить веб-доступность в процесс разработки
https://proglib.io/w/ac1f3e3d
#accessibility
https://proglib.io/w/ac1f3e3d
#accessibility
☕️ Доступный автокомплит с нуля на JavaScript
Руководство по созданию компонента автодополнения с учетом всех требований доступности.
https://proglib.io/w/bef1e2f6
#javascript #interface #accessibility
Руководство по созданию компонента автодополнения с учетом всех требований доступности.
https://proglib.io/w/bef1e2f6
#javascript #interface #accessibility
Библиотека программиста
☕ Доступный автокомплит с нуля на JavaScript
Руководство по созданию компонента автодополнения с учетом всех требований доступности.
Вы не знаете как должны работать модальные окна
Уверен, многие хоть раз создавали всплывающее модальное окно. Но задумывались ли вы об определении этого компонента? Как он должен работать?
https://proglib.io/w/21f5e2cc
#interface #accessibility
Уверен, многие хоть раз создавали всплывающее модальное окно. Но задумывались ли вы об определении этого компонента? Как он должен работать?
https://proglib.io/w/21f5e2cc
#interface #accessibility
Хабр
Вы не знаете как должны работать модальные окна
Уверен, многие хоть раз создавали всплывающее модальное окно. Но задумывались ли вы об определении этого компонента? Как он должен работать? В этом материале я постарался собрать максимально полный...
Доступность с начала проекта
Итак, вы запускаете проект с нуля и хотите все сделать очень хорошо. Давайте сделаем ваш проект ДОСТУПНЫМ!
https://proglib.io/w/3daa55de
#accessibility
Итак, вы запускаете проект с нуля и хотите все сделать очень хорошо. Давайте сделаем ваш проект ДОСТУПНЫМ!
https://proglib.io/w/3daa55de
#accessibility
kittygiraudel.com
Accessibility from the ground up
I’m Kitty Giraudel, a non-binary trans frontend developer based in Berlin, focused on accessibility and inclusivity.
Быстрые тесты доступности
10 быстрых проверок доступности вашего сайта: https://proglib.io/w/4100dc82
#video #accessibility
10 быстрых проверок доступности вашего сайта: https://proglib.io/w/4100dc82
#video #accessibility
YouTube
Quick accessibility tests - YouTube
Отключение ссылки
Disabled links - зачем отключать ссылки, стоит ли это делать и как правильно?
https://proglib.io/w/c047188a
#interface #accessibility
Disabled links - зачем отключать ссылки, стоит ли это делать и как правильно?
https://proglib.io/w/c047188a
#interface #accessibility
www.scottohara.me
Disabling a link | scottohara.me
With HTML alone there is no way to disable a hyperlink (an <a href> element), and have it be both exposed as a “link” and as “disabled”. Now, setting ...
Ссылка для скачивания
Как правильно сделать ссылку, которая открывает системный диалог для сохранения файла: https://proglib.io/w/b82c4d50
#accessibility #interface
Как правильно сделать ссылку, которая открывает системный диалог для сохранения файла: https://proglib.io/w/b82c4d50
#accessibility #interface
Авторские и переводные статьи по фронтенду
Ссылка для скачивания — Веб-стандарты
Простой способ сделать ссылку для скачивания при помощи атрибута download.
Разбираемся с логическим порядком фокуса
Порядок фокусировки на элементах не всегда должен совпадать с их порядком в HTML-коде: https://proglib.io/w/9c2eba8f
#accessibility
Порядок фокусировки на элементах не всегда должен совпадать с их порядком в HTML-коде: https://proglib.io/w/9c2eba8f
#accessibility
