How Apple Tackles CSS-Only Navigation

November 5, 2020

I am a big fan of CSS only navigations but current methods has some accessibility issues, so I wondered, what does Apple, a company with big pockets and obessess over user experience, tackle this problem?

So I looked.

Both Checkbox Hack and :Target

On Apple's Human Interface Guidelines page, Apple uses both the checkbox hack (mouse and touch) and :target trick with anchors (keyboard).

This is a very interesting solution, as anchors are much better at keyboard navigation but inflates your back button due to anchor link usage, limiting this to keyboard navigation keeps history littering only to the keyboard users.

Ditching Aria Expanded

Another interesting decision Apple made is that the dropdown menu does not make use of aria-expanded, but instead utilizes two anchor tags, each with the text "Open Menu" and "Close Menu" respectively, and gets toggled using CSS.

This is a very simple and effective solution. As assistive software will by design read out the text of the link, the "open" and "close" state is directly communicated to the user instead of utilizing yet another attribute.

The lesson here is that standards are not the holy scripture in web design, there are many instances where not following, or even breaking the rules can lead to better solutions.

Progressive Enhancement

If JavaScript is available, anchor links become triggers for scripts that toggles the menu, thereby avoiding littering the history stack. At the same time, when toggling the anchor links, the focus of the hidden anchor is moved to the anchor that's revealed, optimizing navigation.

Closing Thoughts

What Apple has done seems to be the most accessible CSS only dropdown menu you can create right now. The only issue is that you now have extra tags and code to support two sets of control for the same menu, but this redundancy is a small price to pay for commercial websites.