Interaction between aria-hidden and CTRL+F

[Jonas Wagner]

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

--
--
Chromium Discussion mailing list: chromium...@chromium.org
View archives, change email options, or unsubscribe:
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 email to chromium-discu...@chromium.org.

[Jonas Wagner]

+fin...@chromium.org

Finnur@, it looks like you've worked on find_in_page quite a bit. Any ideas whether something could be done to improve CTRL+F for hidden content?

Cheers

- Jonas

[germanj...@gmail.com]

Hello! I use a new email filtering service called BitBounce to filter my email. To deliver your email to my inbox, please click the button below and pay the small cryptocurrency fee. Thank you! $0.05 to deliver your email. We’ve never met — I’ll pay your fee. I know you — Add me to your whitelist.

BitBounce is powered by the Credo cryptocurrency

I’m from a business —  what are my delivery options

BitBounce and Credo are transacted through CredoEx

Made by Turing Technology Inc. in San Mateo, California Sign Up for BitBounce

[Jonas Wagner]

Awesome!

https://crbug.com/915252

Thanks a lot!

Jonas

On Fri, Dec 14, 2018 at 4:16 PM Rakina Zata Amni <rak...@chromium.org> wrote:

Not finnur@, but I've been working around Find-in-Page recently. This is possible (as we've also ignored things inside display:none/those with hidden attribute) and probably preferable. Please file a crbug and tag me :) 

[germanj...@gmail.com]

[Rakina Zata Amni]

Not finnur@, but I've been working around Find-in-Page recently. This is possible (as we've also ignored things inside display:none/those with hidden attribute) and probably preferable. Please file a crbug and tag me :)