Description
Description
Here's what I've found while testing <model-viewer> with various browsers, screen readers, and devices. I tested the default demo on Glitch, and a local demo with the two suggested changes applied as described from #443.
Glitch Demo
Current support matrix of <model-viewer> on Glitch:
(Note: role="application" or aria-roledescription has not been applied.)
| OS | Browser | Screen reader | Notes |
|---|---|---|---|
| macOS | Safari | VoiceOver | ✅ On canvas focus: "A 3d model of an astronaut, image … Use mouse, touch or arrow keys to control the camera!" ✅ Using keyboard: adjusts model position, announces currently viewable quadrant. |
| macOS | Chrome | VoiceOver | ✅ On canvas focus: "A 3d model of an astronaut, group … Use mouse, touch or arrow keys to control the camera!" ✅ Using keyboard: adjusts model position, announces currently viewable quadrant. |
| iOS | Safari | VoiceOver | ❌ Ignores canvas element completely. |
| Windows | IE 11 | JAWS | ❌ On canvas focus: _"View from stage front." ❌ Using keyboard: navigates content nodes behind canvas element. |
| Windows | Edge | JAWS | ✅ On canvas focus: "A 3d model of an astronaut, graphic." ❌ Using keyboard: navigates content nodes behind canvas element. |
| Windows | Firefox | NVDA | ✅ On canvas focus: "A 3d model of an astronaut, clickable … Use mouse, touch or arrow keys to control the camera!" ❌ Using keyboard: navigates content nodes behind canvas element. |
| Android | Chrome | TalkBack | ❌ On canvas focus: "View from stage front, graphic. All 3d models on the page have loaded." ❌ On (2nd?) canvas focus: "Use touch, mouse, or arrow keys to control the camera. Double tap to activate." ✅ Two finger double tap, two finger swipe: adjusts model position, announces currently viewable quadrant. |
Web Components Demo
Current support matrix of <model-viewer> web component demo:
(Note: Local fork of the GitHub repo, both role="application" and aria-roledescription attributes have been applied.)
| OS | Browser | Screen reader | Notes |
|---|---|---|---|
| macOS | Safari | VoiceOver | ❌ On canvas focus: "Safari busy" ❌ Using keyboard: "Safari busy" VoiceOver seems to struggle with "loading" the canvas content. Oddly enough, Cmd + Tab away from Safari while the canvas is in focus and returning back, content is announced: ✅ On canvas focus: "A 3d model of an astronaut, 3d model viewer … Use mouse, touch or arrow keys to control the camera!" ✅ Using keyboard: adjusts model position, announces currently viewable quadrant. |
| macOS | Chrome | VoiceOver | ✅ On canvas focus: "A 3d model of an astronaut, 3d model viewer … Use mouse, touch or arrow keys to control the camera!" ✅ Using keyboard: adjusts model position, announces currently viewable quadrant. |
| iOS | Safari | VoiceOver | ❌ Ignores canvas element completely. |
| Windows | IE 11 | JAWS | ❌ N/A (demo refused to load) |
| Windows | Edge | JAWS | ✅ On canvas focus: "A 3d model of an astronaut, graphic" ❌ Using keyboard: adjusts model position but does not announce currently viewable quadrant. |
| Windows | Firefox | NVDA | ✅ On canvas focus: "A 3d model of an astronaut … Use mouse, touch or arrow keys to control the camera!" ✅ Using keyboard: adjusts model position, announces currently viewable quadrant. |
| Android | Chrome | TalkBack | ❌ On canvas focus: "View from stage [angle], application. Double tap to activate." ✅ Using two-finger double tap, then two-finger swipe: adjusts model position, announces currently viewable quadrant. |
It's clear that these attributes do help in the accessibility of the 3D model viewer; VoiceOver and NVDA seem to have the best support by announcing the aria-label and aria-roledescription attribute values as expected. With role="application" set in place, VoiceOver and NVDA users are able to interact with the model.
Some issues remain
However, things are far from perfect. Here's an overview of the major issues from the tests outlined above.
iOS
Aside from not being able to test this second demo with IE, it's iOS which has the most issues. It seems like, with either demo, iOS with VoiceOver enabled completely ignores the canvas element. When using swipe navigation, even with tabindex applied, it's bypassed completely.
According to HTML5Accessibility.com, canvas elements can be made accessible by including child elements within canvas. However, in this case of a 3D model viewer accepting events from the canvas element directly, including child elements doesn't help.
More research, asking for help from the greater community, or perhaps filing a bug with Apple will need to follow suit in order to provide an equal experience for our iOS users.
VoiceOver + Safari on macOS
When paired with Safari browser, VoiceOver on macOS seems to struggle with "loading" the canvas content. On focus, VoiceOver would announce, "Safari busy." When using the arrow keys to adjust the model position, "busy." There seems to be a performance issue with this combination as the same cannot be said for Chrome paired with VoiceOver on macOS.
Oddly enough, Cmd + Tab away from Safari while the canvas is in focus and returning back seems to sometimes help with this; content would be announced as expected.
Related tickets
- User-configurable screen reader view angle announcements #442 User configurable screen reader announcements
- Investigate better canonical ARIA role #443 Better canonical ARIA role
- Status content discoverable by mobile screen reader swipe gestures #445 Ensure status element is not discoverable by screen reader
- Controls SVG discoverable by VoiceOver on iOS #446 Ensure interaction prompt is not discoverable by screen reader
- Set aria-label as static value #460
aria-labelshould be static - Separate aria-live region #461 Use dedicated status region for live updates
- Separate instruction element #462 Use dedicated interaction instruction element
- Focus ring via :focus-visible #463 Implement support for
:focus-visible - Announcement text visible in High Contrast mode #767 Announcement text visible in High Contrast mode
- Default poster element creates accessibility barrier #905 Default poster element creates accessibility barrier
Versions
- model-viewer: v0.1.1