Подсветка найденного текста в таблице: как не потерять значение и контекст

Подсветка поиска в таблице показывает, где именно встретился запрос, но не должна менять само значение или мешать прочитать строку. Для надёжного решения заранее определите, какие столбцы ищутся, как считаются совпадения и что происходит после перехода к результату. Ниже — практический порядок: от правил поиска до доступного оформления, примеров и проверки перед выпуском.

Подсветка — это визуальный маркер совпавшего фрагмента внутри отображаемого значения. Она отвечает на вопрос «почему эта строка попала в результат?», тогда как фильтр отвечает на другой вопрос: «какие строки оставить?». Эти функции часто соседствуют, но не обязаны заменять друг друга. Поиск может сохранять всю таблицу и выделять строки с найденным текстом, а может дополнительно скрывать несовпавшие записи. Интерфейс должен ясно показать выбранный режим.

Представим таблицу заказов с колонками «Номер», «Покупатель», «Город» и «Комментарий». Если запрос — «лес», совпадение может быть в названии покупателя «Лесной Алексей» или в комментарии «доставка до лесного участка». Подсвечивать нужно именно найденные символы в ячейке, а не окрашивать всю строку так, будто запись выбрана. Выделенная строка, активная ячейка и совпадение поиска — три разных состояния; визуально смешивать их опасно.

До дизайна решите, где действует поиск:

Ответ влияет на доверие к результатам. Если найдено слово в скрытой колонке, пользователь не поймёт причину попадания строки. Если «Иванов» найдено в комментарии, а не в колонке фамилии, подсветка помогает объяснить результат. Добавьте короткую подсказку о составе поиска, если он ограничен: например, «Поиск по номеру, покупателю и городу».

Для простого поиска подстроки полезно выделять непрерывный отрезок, совпавший с запросом. При запросе «812» в номере «ЗК-812-04» можно подчеркнуть или выделить только «812», сохранив дефисы и остальную строку без изменений. Не перестраивайте данные в ячейке ради подсветки и не подменяйте их сокращённой версией. Цветной маркер — слой представления, исходное значение остаётся тем же.

Сложнее становится, если приложение нормализует запрос. Например, интерфейс может игнорировать регистр, схлопывать несколько пробелов или считать буквы с диакритикой эквивалентными. В таком случае подсветка должна ссылаться на реальные диапазоны символов исходной строки после той же нормализации. Нельзя просто заменить строку в ячейке нормализованной копией: так можно неверно подсветить соседние знаки, особенно если преобразование изменило длину текста.

Уточните три вещи в спецификации или макете:

Эти решения меняют счётчик и поведение кнопок «предыдущее» и «следующее». Уточните, что считает счётчик: найденные записи, ячейки с совпадением или отдельные вхождения. Для таблицы заказов пользователю обычно важнее количество строк, но при поиске внутри длинного комментария может быть полезно и число совпадений в текущей ячейке.

В маленькой ячейке заливка яркого цвета способна ухудшить читаемость текста. Начните с умеренного фона или тонкого контура и проверьте контраст самого текста относительно фона подсветки. Затем посмотрите, не выглядит ли маркер как выделение мышью, ошибка валидации, активная ячейка или статус записи. Разные значения интерфейса должны иметь разные формы, а не только близкие оттенки.

Подсветка не должна менять начертание на жирное, если это перестраивает ширину текста или создает ложное ощущение важности данных. На плотной таблице такой скачок заметен: столбец начинает «прыгать», цифры визуально выпирают, строки перестают выглядеть ровно. Безопаснее использовать фон или нижнюю линию, сохраняя семейство, размер, вес и сам текст. Для моноширинных идентификаторов особенно важно оставить каждую позицию и ведущие нули.

Проверяйте и контраст пары «текст — фон», и различимость состояния. WCAG 2.2 требует не использовать цвет как единственный визуальный способ передать смысл. Поэтому поиск должен объясняться также текстом запроса, состоянием счётчика и порядком перехода, а не только жёлтой или фиолетовой подложкой. Для обычного текста критерий 1.4.3 задаёт минимальный контраст 4,5:1; для крупного текста действует отдельное условие. Это ориентир для проверки цвета в контексте конкретного текста и фона, а не повод считать любой оттенок подсветки автоматически доступным.

Если значение длинное, сначала решите проблему видимости значения, а не пытайтесь подчеркнуть обрезанный фрагмент. Допустимы перенос строки, раскрытие детали, горизонтальная прокрутка или отдельная панель с полным содержимым. Если найденная часть осталась за пределами видимой области, подсветка вне экрана не поможет: после перехода к результату прокрутите или откройте ячейку так, чтобы совпадение стало заметно, но не потерялась метка строки.

Кнопки навигации по совпадениям должны перемещать внимание предсказуемо. При переходе к следующему результату оставляйте заголовки колонок, номер строки или другой устойчивый ориентир в поле зрения. Если таблица прокручивается вертикально, активный результат не должен уезжать под закреплённую шапку. Если прокрутка горизонтальная, сохраняйте связь ячейки с её заголовком.

Покажите активное совпадение сильнее остальных, но не превращайте всю строку в цветовой сигнал. Например, все найденные фрагменты могут иметь спокойную подложку, а текущий результат — дополнительную рамку. Рамка должна оставаться видимой и в соседстве с рамкой выбранной строки. Обозначьте пользователю порядковый номер текущего результата: «3 из 8». Кнопки перехода не должны сбрасывать запрос и терять позицию при каждом обновлении таблицы.

Когда запрос обновляется на каждый ввод, результаты могут меняться быстрее, чем пользователь успевает их просмотреть. Не перемещайте фокус самопроизвольно в таблицу при каждом символе. Оставьте фокус в поле поиска; обновите подсветку, число результатов и сами строки согласованно. Если поиск запускается кнопкой или клавишей, объявите, что действие выполнено. WCAG 2.2 критерий 4.1.3 описывает передачу статусных сообщений вспомогательным технологиям без перемещения фокуса. W3C отдельно приводит обновления вроде «18 результатов» и «Ничего не найдено» как примеры таких сообщений.

Не отправляйте громкое объявление после каждого нажатия клавиши, если человек печатает длинную строку. Подождите короткую паузу или подтверждение поиска, затем произнесите одно актуальное сообщение. Счётчик должен содержать достаточно контекста: «Найдено 8 строк» полезнее, чем просто «8». Для нового запроса обнуляйте позицию навигации или явно сохраняйте её, но не оставляйте скрытый указатель на исчезнувшем результате.

«Совпадений нет» не всегда значит одно и то же. Разделите хотя бы эти ситуации: таблица действительно пуста; в таблице есть строки, но запрос не найден; фильтр уже исключил все строки; данные ещё загружаются; поиск не выполнен из-за ошибки. Покажите короткое объяснение и доступное действие: очистить запрос, снять фильтр или повторить загрузку. Не оставляйте пустую область без пояснения.

Если совпадения есть только в скрытых столбцах, выясните, можно ли сделать это поведение понятнее. Один вариант — добавить настройку «Искать также в скрытых колонках» и указывать название поля рядом с результатом. Другой — ограничить поиск видимыми значениями. Не стоит подсвечивать недоступные ячейки: если пользователь не может увидеть поле или открыть детали, маркер становится бессмысленным.

Регистр, похожие символы и опечатки тоже могут создавать неожиданность. Латинская A и кириллическая А выглядят почти одинаково, но являются разными знаками; приложение должно либо считать их разными и объяснить правила, либо явно сообщать о расширенном поиске. Не смешивайте обычное совпадение и «похожее» в одной подсветке без указания типа результата. Для служебных данных, артикулов и кодов строгий поиск часто безопаснее догадок.

В таблице есть артикулы «AB-120-7», «AB-120-70» и комментарии к поставке. Менеджер вводит «120-7». Поиск находит две строки, потому что первая содержит эту последовательность полностью, а вторая тоже содержит её в начале большего значения. Если продукт использует поиск подстроки, это корректный результат. Счётчик говорит «2 строки», а в артикулах подсвечивается ровно найденный отрезок. Нельзя сокращать второй артикул до «AB-120-7»: это превратило бы совпадение в подмену значения.

После нажатия «Следующее» активная рамка перемещается ко второй строке и счётчик меняется на «2 из 2». Менеджер сверяет полный артикул перед выбором. Если ему нужно точное совпадение, он включает режим «Целое значение»; теперь остаётся одна строка. Режим отражается рядом с поиском, а не только в невидимой настройке. После очистки запроса фильтр поставки продолжает действовать — подсветка поиска и фильтр не сбивают друг друга.

В комментарии встречается тот же фрагмент, но его колонка скрыта на узком экране. Если поиск по скрытым данным включён, приложение не должно молча показывать строку как загадочное совпадение. Сообщите, например, «Совпадение в комментарии» и дайте открыть деталь; на узком экране можно показать раскрывающуюся панель. Так человек понимает причину, но не теряет исходную запись из таблицы.

Подсвечивать всю найденную строку. Маркер теряет точность, а выбранная строка и результат начинают выглядеть одинаково. Оставьте строке её обычный фон, выделите фрагмент в ячейке и отдельно покажите текущий результат навигации.

Подменять значение текстом из запроса. Это особенно опасно для похожих кодов, чисел и идентификаторов. Выводите исходное отображаемое значение и добавляйте к нему только визуальную разметку совпадения.

Использовать один цвет для всех состояний. Пользователь может принять совпадение за ошибку, активный выбор или подтверждённый статус. Проверьте стили рядом друг с другом, включая режим высокой контрастности и отключённые цвета.

Считать только ячейки, но подписать как строки. Число «12» двусмысленно без единицы подсчёта. Напишите «12 строк», «4 совпадения в этой ячейке» или другую точную формулировку.

Перемещать фокус при каждом вводе. Пользователь теряет место в поле и не может исправить запрос. Обновляйте содержимое, но сохраняйте фокус; объявляйте итоговый статус без принудительного перехода.

Не объяснять отсутствие результатов. Пустота похожа на сбой или ещё не завершившуюся загрузку. Сообщите, что запрос ничего не нашёл, и предложите убрать запрос или пересмотреть фильтр.

Если в ячейке нашлось несколько вхождений и они помогают понять результат, можно показать каждое. При этом отдельно отметьте текущее совпадение для навигации. Если маркировка превращает длинный текст в сплошную пёструю полосу, покажите первое совпадение и предложите переход между остальными.

Это зависит от задачи. Поиск может только подсветить совпавшие фрагменты, а может фильтровать таблицу. Если он скрывает записи, покажите это поведение и число оставшихся строк; не называйте скрытые результаты подсветкой. В интерфейсе поиска и фильтра важно сохранять независимые настройки.

Не обрезайте так, чтобы совпавшая часть исчезала без объяснения. Можно раскрыть ячейку, показать полное значение в панели деталей либо прокрутить содержимое до найденного фрагмента. Любой вариант должен сохранить имя строки и заголовок колонки, чтобы пользователь знал, что именно он читает.

После завершения поиска передайте короткое статусное сообщение, например «Найдено 18 строк» или «Совпадений нет». Оно должно быть доступно вспомогательной технологии без перемещения фокуса. При быстром наборе объединяйте обновления так, чтобы экранный диктор не произносил сообщение после каждого символа.

Решите это как отдельное правило поиска. Если скрытые поля входят в поиск, объясните, где найден фрагмент, и дайте открыть значение. Не оставляйте строку совпавшей по невидимым данным без подсказки о причине.

Для кода начните с сохранения точной строки и предсказуемого поиска подстроки. Если пользователям нужно полное совпадение, добавьте явный режим или переключатель «Целое значение». Не убирайте ведущие нули, дефисы или пробелы в отображении, если они являются частью идентификатора.

Хорошая подсветка поиска объясняет совпадение, сохраняя исходное значение и контекст строки. Сначала определите правила поиска, затем различите найденный фрагмент, активную ячейку и выбранную запись, а после проверьте навигацию, пустое состояние и доступность. Для своего проекта можно подготовить контрольный текст и оценить читаемость букв и цифр в разных размерах с помощью Fontgenerator.

Источники по доступности: W3C: критерий WCAG 2.2 «Использование цвета», W3C: минимальный контраст текста, W3C: сообщения о состоянии.