Фокус показывает, какой элемент сейчас выбран при работе клавиатурой. Если убрать рамку ради дизайна, человек может перестать понимать, куда попадёт Enter. Фирменное оформление лучше продолжить заметным собственным индикатором, сохранив возможность управления.
Проверьте существующее поведение
Откройте опубликованную страницу и нажимайте Tab. В базовых блоках Tilda предусмотрен индикатор фокуса, но собственный CSS может его подавить. Прежде чем добавлять новую стилизацию, найдите правила outline: none и outline: 0 в своих вставках.
Удалите ненужное подавление и проверьте результат. Не нужно менять все базовые блоки, если стандартная рамка заметна и не мешает. Собственный пример ниже предназначен для одной HTML-вставки, чтобы не затрагивать случайные элементы проекта.
Учебный пример для собственной ссылки
Добавьте T123 из категории «Другое» и вставьте пример, заменив адрес на действующую страницу. Он использует обычный HTML и CSS, а не специальный API Tilda.
<style>
.pp-focus-demo a:focus-visible {
outline: 3px solid #1748b5;
outline-offset: 4px;
}
</style>
<div class="pp-focus-demo">
<a href="/projects">Посмотреть проекты</a>
</div>Класс pp-focus-demo ограничивает правило этой вставкой. Псевдокласс :focus-visible применяет индикатор, когда браузер считает его нужным для видимости фокуса, в частности при навигации клавиатурой. Синяя рамка — учебный выбор, а не обязательный цвет бренда.
Стандартный механизм описан в MDN, а публикация T123 — в справке Tilda. Не добавляйте в этот пример общее правило, снимающее outline со всех ссылок: оно лишит другие элементы их штатного индикатора.
Подберите цвет и расстояние
На светлом и тёмном фоне рамка должна отличаться от окружения. Если кнопка того же цвета, подберите иной заметный тон или сочетание индикаторов. Проверяйте реальный фон изображения, а не только белый холст редактора.
Outline-offset отделяет рамку от элемента. Однако родительский контейнер с обрезкой содержимого может скрыть внешний контур. Если это происходит, исправьте компоновку или используйте подходящий внутренний индикатор после проверки. Не уменьшайте рамку до почти незаметной линии только ради сохранения обрезки.
Приёмка
- Опубликуйте страницу и откройте её в рабочем браузере.
- Найдите учебную ссылку клавишей Tab, затем вернитесь Shift+Tab.
- Проверьте видимость рамки и работоспособность Enter.
- Уменьшите экран до мобильной ширины: контур не должен обрезаться или закрывать соседний текст.
- Проверьте другие ссылки, чтобы собственное правило не затронуло их неожиданно.
Если оформление сломало взаимодействие, удалите только собственную вставку стиля и верните штатное поведение. Для полного маршрута используйте аудит клавиатурой, для назначения элементов — выбор кнопки или ссылки. Для самостоятельного обучения изучите актуальные программы и условия в разделе курсов Perkova&Perkova.