I have a question about highlighting search terms that match in a large document of text. So a user does a search and the matching terms are highlighted with a background color. This is fine for visual users but for visually impaired users/screen readers this is of no use.
Here is an example of what the current code looks like:
<span class="match">This is a match</span>
And the CSS is:
.match {background-color:yellow;}
So the question is ... how would you get the screen reader to announce or mark these terms as matching for the user of a screen reader.
CodePudding user response：
IF you want to attract attention to a particular match, the simplest is to select and focus it. Screen readers follows the focus, so in general the browse cursor should jump to the corresponding place. It doesn't work all the time though, especially if you do it at page load.
<span id="match" tabindex="-1">Match</span>
document.getElementById('match').focus();
Don't hesitate to extend the element focused beyond the strict string matched, so that the user can have some context. For example, focus the entire senteance where the word is matched rather than just the word alone.
You may also create an aria-live region:
<span aria-live="polite">match</span>
But it looks a priori less relevant here, since you aren't going to modify the text matched afterwards. Aria-live regions aren't always working reliably at page load.
Note that you might want to use the HTML5 element <mark> to indicate the matches, which is better semantically speaking, and looks perfectly appropriate here.
CodePudding user response：
You can use ::selection pseudo-class for that.
Heres the snippet:
.match{
background-color:red;
}
.match::selection{
background-color:orange;
} <span class="match">This is a match</span>