От автора: фокус — это странное кольцо, которое появляется, когда вы промахиваетесь мимо клавиши caps и нажимаете вместо этого клавишу табуляции. Это то, о чем я два года назад особо не задумывался. Он просто не был важен для моих проектов дизайна. Но со временем, когда я начал работать над тем, чтобы сделать свои проекты более доступными, я обнаружил, что в CSS фокус не только обеспечивает доступность, но и дает возможность изучить весь подход вашей компании к дизайну.
В этой статье мы рассмотрим более сложные методы проектирования, которые вы можете использовать, чтобы сделать дизайн фокуса более привлекательным.
Почему фокус имеет значение?
Основная цель фокуса — дать пользователю руководство. Рассмотрим пользователя, который может использовать только клавиатуру для перемещения по вашему приложению. Будет ли фокус соответствовать визуальному стилю элемента или тому, как ведет себя этот элемент? Будет ли он визуально выделен вообще? Задача фокуса заключается в том, чтобы указать, с каким элементом пользователь в настоящее время имеет дело: это кнопка или блок текста?
Для пользователя со слабым зрением или слепого внешний вид вашего приложения может не иметь значения, поскольку они, вероятно, будут использовать определенные вспомогательные технологии (AT), такие как устройство чтения с экрана, чтобы помочь им перемещаться в приложении. Тем не менее, для пользователей, которые могут видеть экран, внешний вид имеет значение. Это шаблон, как и любой другой элемент, который вы разрабатываете, и он должен быть согласованным. Ваш фокус показывает пользователю, что является «кликабельным», и это помогает определить, что это за элемент.
Кроме того, фокус интересно разрабатывать. Разработав до этого сотни состояний наведения и клика, было неожиданно вдруг обнаружить и спроектировать это состояние, которое я как-то полностью упускал из виду. Я начал видеть многие мои «законченные» шаблоны в новом свете. Как и многие другие псевдоклассы в CSS, его можно стилизовать и переопределить по вашему усмотрению — то, что вы можете сделать, ограничено только вашей фантазией.
Фокус по умолчанию
Прежде чем вы начнете творить сумасшедшие вещи и задавать причудливые фокусы для каждого шаблона, подумайте о том, каким будет ваш фокус по умолчанию. Это фокус, который будет применен ко всему вашему приложению и будет использоваться в качестве резервного варианта, если вы не укажете для объекта пользовательский фокус. Ваш фокус по умолчанию должен быть четко виден на фоне приложения, он должен соответствовать рекомендациям по цветовому контрасту, и он должен вписываться в цветовую палитру.
Давайте рассмотрим фокус по умолчанию для нашей библиотеки шаблонов:
*:focus {outline: 2px solid #d71ef7;}
Наш фокус по умолчанию — насыщенный фиолетовый, он отображается на белом (#ffffff) или не совсем белом (#fdfdfe) рабочем пространстве. Он имеет контур в 2px, поэтому он немного более заметен, чем с контуром в 1px, и имеет смещение в 2px, поэтому он не примыкает к самому тексту, например, когда вы выделяете фокусом ссылку.
Хороший пример
Плохой пример
Пройдитесь с помощью табуляции по своему приложению и обратите внимание, где у вас фокус выглядит действительно хорошо, и где он выглядит … хм, не так хорошо. Места, где стиль фокуса выглядит неподходяще — это первые кандидаты на применение индивидуального подхода.
Пользовательский фокус
Есть два случая, в которых мы используем пользовательский фокус:
Если вы хотите сделать элемент, выделенный фокусом, особенно заметным (например, элементы ввода или кнопки терминала).
Когда цвет фокуса по умолчанию не подходит для определенного фона.
Давайте рассмотрим несколько пользовательских фокусов, которые мы разработали для Cauldron.
Поля для ввода
Это не выделенное фокусом поле с Cauldron.
Мы хотели, чтобы фокус поля выглядел выделяющимся, а также согласованным с состоянием поля. Мы решили сочетать контур поля и аккуратное свечение вокруг него.
Когда поле находится в состоянии ошибки, оно выделяется более толстым контуром красного цвета, а также мы добавляем соответствующий текст об ошибке.
Когда фокус возвращается в поле с ошибкой, к толстой границе снова добавляется свечение, обеспечивая визуальную согласованность с состоянием фокуса без ошибок.
Мы попытались сделать состояние фокуса для полей естественным расширением шаблона, а не чем-то контрастирующим с ним.
Кнопки
Это невыделенная фокусом основная кнопка из Cauldron:
Фокус кнопки терминала — это мой личный фаворит не только потому, что сторонний разработчик блестяще выполнил его, но и потому, что он визуально интересен и сразу идентифицируется как состояние фокуса.
Наши вторичные кнопки и кнопки ошибок используют один и тот же фокус, но их цвет изменяется, чтобы соответствовать тексту.
Мы сделали фокусы кнопок визуально выделяющимися, поскольку они используются для действий терминала в приложениях.
Диалоги
Когда пользователь экранного диктора выделяет фокусом форму с текстом или заголовком, эта информация должна считываться. Поэтому для формы нужно задавать определенное состояние фокуса. Для этого часто используется подсветка формы (иногда невидимая?). Когда у нас есть текстовые области, мы используем пару различных фокусов, чтобы позволить AT считывать их, обеспечивая при этом визуальную чистоту дизайна.
Для фрагментов текста, которые будут считываться в блоке, мы используем полосу слева, которая отображается в блоке, ограничивающем объект, например, здесь, в нашем предупреждении. После того, как вы снова нажмете клавишу табуляции, фокус перейдет на следующий табулируемый объект — в данном случае кнопка READY.
Для таких вещей, как модальные окна, где у нас есть форма с четким заголовком, мы используем подстрочный указатель для указания фокуса. Он также перемещается к первому табулируемому объекту после того, как вы нажмете клавишу табуляции — в этом случае поле имени.
Не подходит фокус по умолчанию
Бывают случаи, когда вы не хотите создавать пользовательский фокус, но дизайн по умолчанию не соответствует цвету фона. Бьюсь об заклад, вы можете сами угадать, что вам нужно сделать: изменить цвет фокуса. Ниже приведен пример из наших проектов.
Хороший пример
Плохой пример
Несмотря на то, что крестик закрытия использует фокус по умолчанию, нам нужно было изменить цвет, чтобы лучше передать цветовой контраст и соответствовать цветовой схеме.
Чего следует избегать
Несколько вещей, которых вы должны пытаться избегать при разработке фокуса:
Фокус, который является слишком дискретным. Я думаю, что мы все видели ужасный пунктирный фокус, который практически не виден. Фокус должен быть визуально четким.
Исчезающий фокус. Это часто является проблемой, связанной с z-index, и она часто встречается в меню с вкладками. Важно убедиться, что фокус элемента не отключается чем-то другим.
Визуально несогласованный фокус. Это, безусловно, зависит от вашего видения дизайна, но не забывайте о правиле: если что-то кажется неподходящим, скорее всего, это действительно не подходит.
У нас есть еще много примеров фокусов, которые мы используем на нашем сайте шаблонов Coddron, и мы хотели бы услышать ваши отзывы. Если у вас есть какие-либо советы или приемы, которые вы считаете эффективными, или даже примеры отличных фокусов, которые вы нашли, поделитесь ими.
Автор: Aaron Pearlman
Источник: https://www.deque.com/
Редакция: Команда webformyself.