Frequently, I encounter designs where not enough consideration for mobile accessibility or UX is considered.
## Mobile Submenu Accordions
On Mobile, there is only tap. Tapping things does things.
However, frequently, I'm given a menu hierarchy like so:
* Products -> /products/
* A -> /products/a/
* B -> /products/b/
* C -> /products/c/
This works on Desktop, as hovering Products displays the submenu, and clicking navigates to products.
On mobile, we can only Tap, there's no Hover. So you need to tap products to... navigate there? Expand the accordion?
There's a conflict here.
There's only 3 actual options:
* Remove the link on "Products".
* Make the little chevron > the only thing that activates the accordion.
* Double tap. On an open accordion. Tapping again navigates to the link.
However, none is really good UX. Most of these are non-obvious, and removing the link impacts the site accessibility and visibility.
The solution is to not use this pattern at all, or avoid submenu items. You could have product links on mobile be ON the product page, avoiding the issue. It depends on the design and site.
# References