Jak wykluczyć węzły tekstowe HTML z funkcji wyszukiwania przeglądarki?

Question

Czy jest jakiś ARIA lub inny sposób oznaczenia danego węzła HTML, aby pominąć go, gdy użytkownik wyszukuje tekst na stronie (Ctrl + F/Cmd + F)?

przypadków użycia: ukrywanie tekstu dostępna/awaryjna od poszukiwań

Przykład: wyszukiwania na tej stronie dla słowa down. Powinieneś znaleźć instancję tylko w poprzednim zdaniu, ale Chrome wyświetli tyle wyników wyszukiwania, ile jest odpowiedzi na to pytanie, plus jeden, ponieważ samo pytanie i każda odpowiedź mają link "d ... głos" a tekst.

Takie wyniki wyszukiwania nie są podświetlone, a to może pojawić się frustrujące, aby zobaczyć „1 x” w polu wyszukiwania, a nic nie widać, że pasuje do tego, co użytkownik szukał.

Answer 1

Nie wiem, czy ja zrozumiałem, ale jeśli rozwijać swoją aplikację, nie hacking SO źródła, może za pomocą CSS :before lub :after pseudo-elementów wypełnionych content nieruchomości pomoże.

Na przykład tekst „Hello” nie znajduje się w Safari, Chrome i Firefox po dodaniu przez właściwość content:

.text:before { 
    content: 'Hello'; 
} 

Opera 12.x znajdzie słowo na stronie, więc jeśli jej wsparcia ma to dla ciebie sens, to rozwiązanie nie zadziała. Nie testowałem go również w żadnej wersji IE, przeglądarkach mobilnych i innych rzadkich środowiskach.

Answer 2

Na przykład można usunąć „głos w dół” tekst (zastępując ją  , spacji lub ciąg pusty), ponieważ tag a zawiera już title atrybuty które miały być wykorzystywane przez czytniki ekranu.

Ta rezygnacja jest wtedy konieczna tylko z przeglądarką tekstową, taką jak Lynx, która zignoruje CSS. Tak, można użyć znaczników jak

<a href="#" title="Explicit alternative"> 
    <span class="hidden">Explicit alternative</span> 
</a> 

Ustawianie display:none od klasy hidden

Jeśli masz wątpliwości, czy atrybut title wystarczy, można dodać atrybut aria-label, ale nie jest to konieczne.