Outstanding a11y work 2019 Q2

[svinkle]

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

• [ ] #442 User configurable screen reader announcements
• [ ] #443 Better canonical ARIA role
• [ ] #445 Ensure status element is not discoverable by screen reader
• [x] #446 Ensure interaction prompt is not discoverable by screen reader
• [x] #460 aria-label should be static
• [ ] #461 Use dedicated status region for live updates
• [ ] #462 Use dedicated interaction instruction element
• [x] #463 Implement support for :focus-visible
• [x] #767 Announcement text visible in High Contrast mode
• [x] #905 Default poster element creates accessibility barrier

Versions

• model-viewer: v0.1.1

[cdata]

This is awesome research @svinkle ! Thanks also for filing individual related issues. With your permission I would like to turn this into a tracking issue for the others.

[svinkle]

@cdata Go for it. 👍