Accessibility Specialist. I focus on ensuring content created, events held and company assets are as accessible as possible, for as many people as possible.
Really interesting but this misses a really important issue.
The page should not change unexpectedly and the second you start expanding accordions with CTRL + F as the trigger this will be unsettling for some people.
You certainly can't use that hack (even though it is super clever) as it doesn't work if you use the backspace key (and that is just one of the issues)!
So the answer is simple, use the native element and let browser vendors fix that or just don't worry about hidden content in accordions.
But I really want to fix this!
The best solution I can think of is to have a toggle <button> above an accordion that has "open all" and "close all" as an option.
That way people can open all the accordions and then search if they wish!
You could even have a little prompt pop up that asks "do you want to open all collapsed sections so your search results are better" if a user presses CTRL + F "yes, open all collapsed sections" and "no thank you" as options, but yet again that may be unexpected (but doesn't disrupt the page at least)!
The beauty of having the "open all" and "close all" option is that users who use the browser menu to search (as not everyone knows CTRL + F shortcut) can still use it 👍
Anyway, that was quite a long way of saying I really enjoyed the article and have a much deserved ❤ and 🦄! 🤣
So the answer is simple, use the native element and let browser vendors fix that or just don't worry about hidden content in accordions.
Yup absolutely.
You could even have a little prompt pop up that asks "do you want to open all collapsed sections so your search results are better" if a user presses CTRL + F "yes, open all collapsed sections" and "no thank you" as options, but yet again that may be unexpected (but doesn't disrupt the page at least)!
Ahh yes, that is probably a better and more UX friendly option.
The beauty of having the "open all" and "close all" option is that users who use the browser menu to search (as not everyone knows CTRL + F shortcut) can still use it 👍
Yeah right or even combination of both of your approaches might also work.
Accessibility Specialist. I focus on ensuring content created, events held and company assets are as accessible as possible, for as many people as possible.
Really interesting but this misses a really important issue.
The page should not change unexpectedly and the second you start expanding accordions with CTRL + F as the trigger this will be unsettling for some people.
You certainly can't use that hack (even though it is super clever) as it doesn't work if you use the backspace key (and that is just one of the issues)!
So the answer is simple, use the native element and let browser vendors fix that or just don't worry about hidden content in accordions.
But I really want to fix this!
The best solution I can think of is to have a toggle
<button>above an accordion that has "open all" and "close all" as an option.That way people can open all the accordions and then search if they wish!
You could even have a little prompt pop up that asks "do you want to open all collapsed sections so your search results are better" if a user presses CTRL + F "yes, open all collapsed sections" and "no thank you" as options, but yet again that may be unexpected (but doesn't disrupt the page at least)!
The beauty of having the "open all" and "close all" option is that users who use the browser menu to search (as not everyone knows CTRL + F shortcut) can still use it 👍
Anyway, that was quite a long way of saying I really enjoyed the article and have a much deserved ❤ and 🦄! 🤣
Hey thanks for the input, I'm glad you liked it.
Yup absolutely.
Ahh yes, that is probably a better and more UX friendly option.
Yeah right or even combination of both of your approaches might also work.
At the end of the day they were just "off the top of my head", you might come up with something even better combining your ideas with those!
Once again, nicely written article! ❤