It was the first time I’ve heard of caret browsing(or navigation). For who are not familiar with caret the browsing like me, let me explain.
It is browser feature that helps you browsing the webpage with caret.
Yes, The name exactly stands for what it does.
If you’d like to know how it works, just press F7key ,
it asks whether you’d to use caret browsing.
You turn on, caret will be located on the page and with arrow keys, navigation can be handled. (There’s caret between even and ing)
I’m definitely mouse or touch person, never used caret to navigate but does not have problem with it. Actually I thought it is pretty cool feature in the aspect of accessibility.
But most users are not that familiar with the tech and it can confuse users, that they can write thing on the DOM where it is focused now. Or let them assume that the site has a bug! (Of course it does not accept keyboard input, but still confusing.)
When I got the question, I try to find the way to prevent the function and failed, and then tried to find the flag for activity of caret browsing so we can tell users it is not bug, your browser is accepting caret browsing and can turn off by clicking F7 , also failed. I saw many questions on stackoverflow and qna but no good answer was attained.
What I can come up was setting the caret-color to transparent for normal elements like the following
.hide-caret
*
caret-color: transparent input,
textarea,
[contenteditable]
caret-color: #000
[contenteditable='false']
caret-color: transparent
and gives .hide-caret to body, keydown event to window respectively and if user press F7, just remove the .hide-caret ..(they might need to press 2times though)
I’m not sure it is a good practice, but desperate times need desperate measures, if it really bothers your business, probably you can implement.
(At least it is better than to add user-select:none to your page.)
If you have an experience of this kind, or any opinion, please leave the comment. Thank you.
