Model-Viewer Web Component

Emerging Solution: Google's Model-Viewer Web Component

Available athttps://github.com/google/model-viewer

Video Presentation:  Accessibility for AR and VR - Google I/O '18 (Youtube)

Further Reading:  model-viewer: The Web Component Making 3D and AR Accessible to Everyone

Background Reading: W3C on Augmented Reality and Accessibility

Sample Implementation:  Here is a quick proof-of-concept with Model-Viewer web component, Alt Attributes, ChromeVox Screen Reader & AR on Android with TalkBack Screen Reader in SceneView. When viewed on Android running  Google Play Services for AR, a 3D model can be displayed on Android in a way that takes advantage of the Android Accessibility Settings.

  • To explore the features, we start three web models that are in traditional X3D format from the UC Berkeley P.A. Hearst Museum of Anthropology portal
  • Using the X3D and ImageTexture mapping X3D, these can be converted in Meshlab and Blender to glTF/GLB format for use with Model-Viewer:
  • Below is a screenshot from a web page  where you can view the three Google Model-Viewer-based objects. The HTML for the first object looks like:

<h3>
Museum number: 16-11061 - Pottery bottle</h3>
Description: Pottery bottle<br>
<model-viewer
src="https://cdn.glitch.com/8d789680-5940-4990-924a-47bec90e305f%2FMA_16-1106..."
ar
auto-rotate
camera-controls
alt="A 3D model of a ceramic pottery bottle; single tapered spout with strap handle to modeled and painted human head; round bottom; hands and clothes painted on body; cream cloak; height: 7¼ inches.">
</model-viewer>
<h3>

  • Below are movies of screen reader interactions with the Model-Viewer Alt Attributes: one with ChromeVox browsing the web page, the other with TalkBack going through the web page and the AR experience on an Samsung S7 Android phone. [Note: Model-Viewer and the SceneViewer AR support are also available for Magic Leap and Quick Look on iOS.]
  • The AR experience on Android requires Google Play Services for AR.  While browsing the page here,  the TalkBack screen reader calls aloud the hidden Alt Attribute descriptions. This example also uses a custom AR button with an added WAI-ARIA label to make the Model-Viewer AR mode control more prominent. Next steps for overall improvement of the experience would be more audio cues about object location, rotation, gaze, focus and more controller feedback within the AR Scene View.
Image of a pottery bottle; single tapered spout with strap handle to modeled and painted human head; round bottom;

PAHMA Museum number:16-11061

Pottery Bottle X3D web object for Model-Viewer test.

Pottery bottle; flask-shaped; short flare neck; stylized birds in black, white, and purple on upper half;

PAHMA Museum number: 16-11053

Pottery Bottle  X3D web object for Model-Viewer test.

Snuff bottle, stained and carved ivory, represents Chinese couple.

PAHMA Museum number: 9-13573a

Snuff Bottle  X3D web object for Model-Viewer test.

X3D Object Conversion to glTF/GLB

X3D image converted to glTF/GLB format

For use in Model-Viewer, the X3D files are converted to GLB, the binary format of glTF.

Screenshot of Model-Viewer webpage showing Google Model-Viewer based display of the converted 3D objects:

Web page (link is external) showing the Google Model-Viewer based display of the three objects.

Model-Viewer w/ChromeVox & Web Page

Model-Viewer_screen_reader_test_072620 1

Model-Viewer on Android w/TalkBack & AR

AR Test Android MV 091020