30 советов для начинающего FrontEnd программиста
Надо избегать селекторов, которые являются или включают в себя html теги.
По возможности писать сокращённые записи свойств (например, вместо padding-left, padding-top и тд, писать значения в padding).
Не указывать единицы измерений для нулевых значений (например, вместо margin: 0 px, нужно писать margin: 0).
Не ставить 0 в целой части в значениях между -1 и 1 (т.е, вместо, например, 0.5em, писать .5em).
Не использовать кавычки в ссылках.
Сортировать объявления в CSS по алфавиту.
Стараться использовать BEM для CSS.
Сделать элементы видео доступными для людей с ограниченными возможностями.
Для фокуса на определённые элементы существует атрибут tabindex. Он полезен, когда нужно обеспечить доступность для пользователей, использующих только клавиатуру.
Для пользователей экранной лупы есть 3 правила для контента, который появляется при наведении:
Контент можно отклонить без перемещения фокуса или курсора (например, с помощью Esc).
Курсор можно перевести с кнопки на появляющийся контент и при этом он не исчезает.
Появляющийся дополнительный контент остаётся видимым, пока фокус или курсор не убрали с кнопки или дополнительного контента либо пока пользователь не отклонит контент клавишей Esc.
Атрибут Aria-label помогает присвоить элементу заголовок, который видим исключительно программам чтения с экрана. Атрибут Aria-labelledby позволяет сделать так, чтобы скринридер при фокусе на элемент читал другое видимое название или заголовок.
Aria-describedby позволяет предоставить дополнительную информацию для скринридера к имеющемуся видимому заголовку.
Aria-disabled позволяет включить неактивный элемент в порядок следования фокуса. Значит, для пользователя со скринридера этот элемент как бы не будет существовать.
Роль «alertdialog» позволяет вспомогательным технологиям и браузеру распознать выскакивающие окно предупреждения или сообщения об ошибке и озвучить его появление специальным образом, например проиграв системный звук предупреждения.
Фокус может находиться только на интерактивных элементах, т.е. кнопках, ссылках, чекбоксах и т.д. Порядок следования фокуса должен соответствовать визуальному или логическому порядку расположения интерактивных элементов на экране. Неактивные элементы управления не фокусируются.
Чтобы посмотреть то, как элемент должен ввести себя при работе с клавиатуры, стоит посмотреть раздел «Design Patterns and Widgets».
Стоит указывать основной язык каждой страницы, используя, например, lang атрибут в html lang=«en».Нужно использовать lang атрибут для определённых элементов, когда язык элемента отличается от остальной части страницы.
Роли WAI-ARIA могут придать дополнительный смысл коду, например, используя role=«search» для определения функциональности поиска.
Нужно предоставить чёткие инструкции, сообщения об ошибках и уведомления, чтобы помочь пользователям заполнять формы на вашем сайте.
Стоит убедиться, что порядок элементов в коде соответствует логическому порядку представленной информации. Один из способов проверить это — удалить стиль CSS и убедиться, что порядок содержимого имеет смысл.
Следует использовать отзывчиво-адаптивный дизайн сайта.
Используйте WAI-ARIA для предоставления информации о функциях и состоянии пользовательских виджетов, таких как аккордеоны и кнопки, изготовленные на заказ. Например, role=«navigation» и aria-expanded=«true» (aria-expanded устанавливается для элемента, чтобы указать, развёрнут элемент управления или свёрнут, и отображаются ли контролируемые элементы или скрыты).
