Native Web in Apple Vision Pro

Apple claims the Vision Pro is the most advanced personal computing device and it’s easy to see why. AR/VR interaction by eye/head/hands tracking and high visual fidelity delivered by a couple of 4K+ displays do seem to be next level technology. What’s interesting for the web is that the device uses good* old Safari to browse the web and the UX depends on websites being fast, semantic HTML, scalable, accessible, and stable. There is also a brand new highlight effect.

Old best practices in a new reality

Almost everything mentioned below applies to any other device browsing the web, but considering the low adoption of semantic HTML in the wild, it bears repeating again.

• Like the iPad, Safari on visionOS ignores :hover rules and provides its own highlight effect via eye tracking, when it detects looking at “interactive regions”, deduced by the markup. These regions are:
  • Buttons, links, and menus
  • Elements with the equivalent ARIA roles
  • Input fields and form elements
  • Elements with CSS cursor: pointer;
• The above elements should span the whole area of their parent button or link, e.g. <a> inside <li> to be spaced out by its own padding, instead of margin or padding on its parent.
• Incorrect tags, like div soup generated by a mega framework, would provide no highlight at all.
• A button should be represented by <button>, which is automatically recognised as interactive element everywhere and has built-in essential properties.
• Labels should be placed around checkboxes and radio buttons, maximising the hit look area.
• The pages should be flexible and dimensionless, making good use of unlimited space. Backgrounds shouldn’t be cropped by an arbitrary frame like 1280px and transition into a solid colour instead.
• Even better text contrast would be required, because the visionOS browser can become translucent like any other app.
• Avoid small text.
• Place important navigation elements within easy reach.
• Use vector graphics for good-looking diagrams or icons on any zoom level. Vision Pro users can approach and walk through the page and should’t see pixellated images.
• They scroll through the page with a flick of the finger and the respective motion should feel natural. Use native scroll without scroll hijacking, and passive scroll event listeners, to avoid hiccups.
• Use native text inputs, to make use of the built-in voice-to-text conversion.
• A correct file input with a label would support drag and drop.
• All interactions on your page should be accessible by keyboard, because the Vision Pro supports Bluetooth keyboards. We don’t want the user to try and do something with the keyboard, fail, wonder if it’s broken, shake it around in VR, potentially breaking a piece of furniture or hurting themselves. Or the cat.
• Aim for short loading times (1” for HTML+CSS+JS on Lighthouse Slow 4G test) to avoid looking at a blank Safari window hanging in front of your eyes. Abandonment is even more tempting in a media rich environment.
• Immersion is the top feature of a VR/AR device, yet it could be degraded when viewing web sites with slowdowns, glitches, and content shift. Size those images.
• No matter how complex your app is, the HTML should be minimal, semantic and accessible. This guarantees any devices or assistive technologies will gleam the meaning and intent.

Example highlight on an element smaller than its button parent / spanning the whole button

More on Apple Vision Pro

Meet Safari for spatial computing

Go native

Apple has seriously invested in improving Safari’s web standards support in the last year and while it’s still spotty, the progress is impressive. The visionOS simulator is now available to test your sites in, complete with inspector support. Testing is always good, but following web standards is a great start. As any civil engineer would confirm, a solid foundation is essential.

Companies are quick to use bloated frameworks, which obfuscate the DOM and make everything harder for devs and users. The Vision Pro is yet another good reason to reconsider that approach. Mega frameworks don’t just work anywhere (blank screen on the Apple Watch) and would require considerable investment to refactor them to native web.

Daily adherence to web standards and semantic HTML guarantees your product will work on anything from Apple Watch to the latest and greatest VR platform with next to zero extra effort. How is that for a KPI?