Model-Viewer Web Component

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(link is external) 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(link is external)  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...(link is external)"
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(link is external).  While browsing the page here,  the TalkBack screen reader calls aloud the hidden Alt Attribute descriptions. This example also uses a custom AR button(link is external) with an added WAI-ARIA(link is external) 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(link is external)

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(link is external)

Pottery Bottle  X3D web object for Model-Viewer test.

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

PAHMA Museum number: 9-13573a(link is external)

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