ПостОсновы доступности, которые должен знать каждый фронтенд-разработчик

Основы доступности, которые должен знать каждый фронтенд-разработчик Мартин Холс в своем блоге рассказал о ключевых принципах доступности, которые должен знать каждый фронтенд-разработчик при разработке компонентов. Часть того, о чем пишет автор: 🔴 Семантический HTML. Используйте правильные элементы для интерактивности и нативные элементы. Если нужно показать кнопку, то используйте <button>, а для ссылок <a>. Не надо вместо этого использовать onClick на div элементе. Такие нативные элементы как <select>, <input> и <textarea> доступны из коробки, старайтесь использовать их. Но если запланируете делать кастомный элемент на подобие <select>, то лучше использовать готовые решения, например, react-select. 🔴 Формы. Каждое поле формы должно быть внутри элемента <form> с onSubmit и кнопкой отправки. Это позволяет браузерам определять связанные поля формы и, например, на мобильных устройствах позволяет переключаться между полями без закрытия клавиатуры. 🔴 Навигация с помощью клавиатуры. Проверьте что в приложении можно переключаться между элементами по нажатию Tab и работает Enter. Используйте CSS индикаторы фокуса :focus-visible и :focus. 🔴 Модалки. Сделать их доступными может быть не просто. Важно при открытии модалки переключать фокус внутри него, а при закрытии возвращать фокус на кнопку открытия модалки. 🔴 Стилизация. Улучшайте доступность интерфейсов через стилизацию, например: - проверьте, что ссылки выглядят как ссылки, а кнопки как кнопки; - сделайте отчетливые состояния элемента при наведении, активном и выключенном состоянии; - используйте достаточный контраст цветов для различения элементов; - поддержите пользовательские размеры шрифтов и зуминг; - поддержите настройку отключения анимации; https://martijnhols.nl/blog/accessibility-essentials-every-front-end-developer-should-know