Статьи с тегом «a11y»
FrontendCSSa11y CSS переменные можно использовать, чтобы сделать цвета темнее, когда они отображаются на светлом фоне, и светлее, когда они отображаются на тёмном, что делает их более яркими в обоих случаях.FrontendCSSHTMLJavaScripta11y За последние несколько лет интерфейсы с темным режимом сильно изменились. Все мы знаем традиционный
подход с использованием медиа-запросов, но в этой статье Sara Joy демонстрирует современные CSS-функции, благодаря которым соблюсти предпочтения пользователя в выборе цветовой схемы становится чертовски просто.FrontendHTMLCSSJavaScripta11y Давайте уделим немного времени рассмотрению Dialog API, Popover API и остальных. Рассмотрим, когда лучше использовать каждый из них в зависимости от требований. Модальные или немодальные? JavaScript или чистый HTML/CSS? Не уверены? Не волнуйтесь, мы разберёмся во всём этом.Frontenda11yHTML Мы все бывали там, когда, торопясь уложиться в срок, создавали выпадающее меню или модальное окно, не задумываясь о его доступности. Но что, если внести несколько небольших изменений, которые могли бы значительно улучшить работу с сайтом для широкого круга пользователей? Доступность не должна быть сложной задачей или галочкой в графе соответствие
. Речь идёт о создании продуктов, которыми могут пользоваться все, независимо от их способностей, технической грамотности, операционной системы или устройства.ReactJavaScripta11y Мы считаем, что следует чаще использовать хук useId()
. Если вы обнаружили, что не используете его, есть большая вероятность, что ваше приложение или сайт либо недоступны (a11y), либо вы создаёте код, склонный к ошибкам. Позвольте объяснить.Frontenda11y Все знают, что нельзя использовать aria-hidden
в интерактивных элементах. Но в чём проблема? Я решил выяснить это, чтобы в следующий раз, когда об этом спросят, я мог лучше объяснить.FrontendCSSa11y Состояние фокуса пользователя совершенно не учитывается веб-разработчиками. Представьте себе навигацию по сайту без чёткого указания того, где вы находитесь и с чем взаимодействуете; это сбивает с толку. Именно здесь на помощь приходят CSS-псевдоклассы, такие, как :focus
, :focus-within
и :focus-visible
. Цель этой статьи — пролить свет на важность состояния фокуса в веб-разработке.FrontendCSSa11y Иногда требуется, чтобы список отображался не вертикально, а в виде горизонтального списка (как в навигационном меню).FrontendCSSa11y Оптимизация и настройка под пользователей, предпочитающих непрозрачный пользовательский интерфейс.FrontendHTMLa11y Если вы новичок в веб-разработке, то, возможно, слышали термин "Семантический HTML" и задавались вопросом, что он означает. Проще говоря, Семантический HTML — это использование разметки HTML для передачи смысла содержимого веб-страницы, а не только её внешнего вида.