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

Мартин Холс в своем блоге рассказал о ключевых принципах доступности, которые должен знать каждый фронтенд-разработчик при разработке компонентов. Часть того, о чем пишет автор:

🔴 Семантический 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