Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Outstanding a11y work 2019 Q2 #464

Open
5 of 10 tasks
svinkle opened this issue Apr 2, 2019 · 2 comments
Open
5 of 10 tasks

Outstanding a11y work 2019 Q2 #464

svinkle opened this issue Apr 2, 2019 · 2 comments
Labels
arc: compatibility arc: interaction flag: meta flag: partner Issues or PRs opened by an integrating partner, or affecting one in an important way type: feature New feature or request

Comments

@svinkle
Copy link

svinkle commented Apr 2, 2019

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

Versions

  • model-viewer: v0.1.1
@cdata
Copy link
Contributor

cdata commented Apr 2, 2019

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.

@cdata cdata added this to Icebox in model-viewer via automation Apr 3, 2019
@svinkle
Copy link
Author

svinkle commented Apr 3, 2019

@cdata Go for it. 👍

@cdata cdata moved this from Icebox to In progress in model-viewer Apr 3, 2019
@cdata cdata moved this from In progress to To do in model-viewer Apr 3, 2019
@cdata cdata changed the title Current accessibility of <model-viewer> Outstanding a11y work 2019 Q2 Apr 3, 2019
@cdata cdata added the flag: partner Issues or PRs opened by an integrating partner, or affecting one in an important way label May 15, 2019
@cdata cdata moved this from To do to Icebox in model-viewer Jun 4, 2019
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
arc: compatibility arc: interaction flag: meta flag: partner Issues or PRs opened by an integrating partner, or affecting one in an important way type: feature New feature or request
Projects
model-viewer
  
Icebox
Development

No branches or pull requests

2 participants