[chromium-discuss] Interaction between aria-hidden and CTRL+F

['Jonas Wagner' via Chromium-discuss]

Hi, Chromium experts,

I'd like to ask for your advice to improve the search experience (using
CTRL+F search) on a website I manage.

The website uses buttons with material icons, which look like this:

<a role="button" title="Add a comment" aria-label="Add a comment" href="#"
tabindex="0">
<i class="material-icons" aria-hidden="true">comment</i>
</a>

When the user searches for "comment" using CTRL+F, the browser highlights
all those icons. This is undesired and confusing. Users don't see the
actual "comment" text, because the material icons font treats it as a
ligature and replaces it with the comment icon. Also, we have many such
buttons on a single page; this makes it almost impossible to find the word
"comment" in the real page content, because it is drowned in the spurious
results from material icons.

Do you have suggestions on how to improve our HTML to fix this? One idea
would be to put the text "comment": into a ::after CSS selector. That
requires complex changes to our site generator, but it would work.

However, I believe a much better solution would be to ignore text for
CTRL+F search if it has an aria-hidden="true" attribute. This matches the
behavior of screen readers, and I believe it would be a better experience
for Chromium users. Could this be considered as a feature request?

Thanks!
Jonas

[PhistucK]

Interesting solution with the ligatures!
I remember hearing (or reading) that using fonts for icons is bad practice
(especially for accessibility), but this solution does sound more
accessible, but I wonder whether this is still a bad practice...
Any idea why it uses font as icons instead of using background
images/images (using SVG URLs with # for example, that can isolate images
from a larger SVG)?

While ::after might work now, I remember reading about plans to start
including content from pseudo elements in selection (and therefore in
search, I imagine), so it is probably not a long term solution/hack that
works.

Sorry for being more curious than helpful. ;)

☆*PhistucK*


On Thu, Dec 6, 2018 at 4:24 PM 'Jonas Wagner' via Chromium-discuss <

Post by 'Jonas Wagner' via Chromium-discuss
Hi, Chromium experts,
I'd like to ask for your advice to improve the search experience (using
CTRL+F search) on a website I manage.
<a role="button" title="Add a comment" aria-label="Add a comment" href="#"
tabindex="0">
<i class="material-icons" aria-hidden="true">comment</i>
</a>
When the user searches for "comment" using CTRL+F, the browser highlights
all those icons. This is undesired and confusing. Users don't see the
actual "comment" text, because the material icons font treats it as a
ligature and replaces it with the comment icon. Also, we have many such
buttons on a single page; this makes it almost impossible to find the word
"comment" in the real page content, because it is drowned in the spurious
results from material icons.
Do you have suggestions on how to improve our HTML to fix this? One idea
would be to put the text "comment": into a ::after CSS selector. That
requires complex changes to our site generator, but it would work.
However, I believe a much better solution would be to ignore text for
CTRL+F search if it has an aria-hidden="true" attribute. This matches the
behavior of screen readers, and I believe it would be a better experience
for Chromium users. Could this be considered as a feature request?
Thanks!
Jonas
--
--
http://groups.google.com/a/chromium.org/group/chromium-discuss
---
You received this message because you are subscribed to the Google Groups
"Chromium-discuss" group.
To unsubscribe from this group and stop receiving emails from it, send an