Model Viewer and Screen Reader

[youngkcarnegie]

Hi there! I'm testing the model viewer for WCAG compliance for my site (legally required). Everything is working great so far except when I turn my screen reader on (in this case, the Screen Reader Google Chrome Extension) the model doesn't load. If I turn my screen reader off and refresh it loads. Any guesses why?

Thank you!

[vaggarath]

I tested too and i also can't get it to work at the same time.

The issue returned by chrome is as follows :

Uncaught TypeError: Cannot read properties of null (reading 'indexOf')
    at HTMLElement.[addHotspot] (model-viewer.js:58704:27)
    at model-viewer.js:58616:34
    at Array.forEach (<anonymous>)
    at model-viewer.js:58615:45
    at Array.forEach (<anonymous>)
    at <computed> (model-viewer.js:58610:27)
    at <anonymous>:166:785
    at Set.forEach (<anonymous>)
    at Rc.flush (<anonymous>:166:765)
    at <anonymous>:166:660

[elalish]

Uh oh, that sounds like a bug. Does this happen everywhere or only on certain usages of MV? It seems odd that it would fail to add a hotspot if no hotspots are present...

[elalish]

We have tested with screen readers and make a serious a11y effort, so I'd be surprised if this is universal, unless it's a recent regression?

[youngkcarnegie]

It doesn't happen on the main modelviewer.dev site, so I'm not sure what's happening there. It happens specifically when I use this code:

<style> :host { display: block; position: relative; contain: strict; /* width: 300px; */ height: 400px !important; } </style> <script type="module" src="https://unpkg.com/@google/model-viewer/dist/model-viewer.min.js"></script>

Eye TEST

<div class="progress-bar hide" slot="progress-bar">
    <div class="update-bar"></div>
</div>

On this page: https://carnegiemnh.org/egypt-on-the-nile-3d-test/

Password: modeltest

[youngkcarnegie]

Sorry it didn't paste correctly.

[vaggarath]

We have tested with screen readers and make a serious a11y effort, so I'd be surprised if this is universal, unless it's a recent regression?

Aaah i didn't thought much about it but it may come from the fact that i first create the models, then, only when it's loaded the hotspots/button are generated. This may be the reason for this bug (and i use last build 1.11.1 btw). I'll do some test tomorrow.

[youngkcarnegie]

<style>
:host {
    display: block;
    position: relative;
    contain: strict;
    /* width: 300px; */
    height: 400px !important;
}
</style>
<script type="module" src="https://unpkg.com/@google/model-viewer/dist/model-viewer.min.js"></script>
<model-viewer bounds="tight" enable-pan="" style="height:400px !important;width:600px !important;border: solid 2px #444444;" src="https://carnegiemnh.org/wp-content/uploads/2022/04/egypt.glb" ar="" ar-modes="webxr scene-viewer quick-look" camera-controls="" environment-image="neutral" poster="poster.webp" shadow-intensity="1">
<button class="Hotspot" slot="hotspot-1" data-position="18.11853438522427m 23.511473300274446m -5.0824535927857255m" data-normal="0.36569380113156236m 0.434875338746566m 0.822892145766387m" data-visibility-attribute="visible" data-visible=""><div class="HotspotAnnotation">Eye TEST</div></button>

    <div class="progress-bar hide" slot="progress-bar">
        <div class="update-bar"></div>
    </div>
  
</model-viewer>

[vaggarath]

what error do you get on console?

[youngkcarnegie]

ChromeVox not starting on unloaded page: https://carnegiemnh.org/egypt-on-the-nile-3d-test/. Will try again in 200ms
jquery-migrate.min.js?ver=3.3.2:2 JQMIGRATE: Migrate is installed, version 3.3.2
chromeVoxChromePageScript.js:2059 Starting ChromeVox.
DevTools failed to load source map: Could not load content for https://carnegiemnh.org/egypt-on-the-nile-3d-test/webcomponents-bundle.js.map: HTTP error: status code 404, net::ERR_HTTP_RESPONSE_CODE_FAILURE
carnegiemnh.org/:616          GET https://carnegiemnh.org/egypt-on-the-nile-3d-test/poster.webp 404
carnegiemnh.org/:1 Error handling response: TypeError: self.processResponse is not a function
    at chrome-extension://cmkdbmfndkfgebldhnkbfhlneefdaaip/js/notification.js:154:10
fbevents.js:24 [Meta Pixel] - Invalid PixelID: null.
t @ fbevents.js:24
w @ fbevents.js:24
E @ fbevents.js:24
e @ fbevents.js:24
Y @ fbevents.js:27
X @ fbevents.js:27
ta @ fbevents.js:27
(anonymous) @ fbevents.js:27
(anonymous) @ fbevents.js:24
v @ fbevents.js:24
each @ fbevents.js:24
value @ fbevents.js:24
value @ fbevents.js:24
value @ fbevents.js:24
plugin @ fbevents.js:32
value @ fbevents.js:24
a.registerPlugin @ fbevents.js:27
(anonymous) @ fbevents.js:28
carnegiemnh.org/:1 Access to XMLHttpRequest at 'https://ssl.gstatic.com/accessibility/javascript/ext/loader.js?1651691171086' from origin 'https://carnegiemnh.org' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
chromeVoxChromePageScript.js:902          GET https://ssl.gstatic.com/accessibility/javascript/ext/loader.js?1651691171086 net::ERR_FAILED 200
cvox.ScriptInstaller.installScriptHelper_ @ chromeVoxChromePageScript.js:902
next @ chromeVoxChromePageScript.js:899
xhr.onreadystatechange @ chromeVoxChromePageScript.js:902
XMLHttpRequest.send (async)
cvox.ScriptInstaller.installScriptHelper_ @ chromeVoxChromePageScript.js:902
next @ chromeVoxChromePageScript.js:899
xhr.onreadystatechange @ chromeVoxChromePageScript.js:902
XMLHttpRequest.send (async)
cvox.ScriptInstaller.installScriptHelper_ @ chromeVoxChromePageScript.js:902
cvox.ScriptInstaller.installScript @ chromeVoxChromePageScript.js:898
cvox.ApiImplementation.init @ chromeVoxChromePageScript.js:902
listener @ chromeVoxChromePageScript.js:2030
(anonymous) @ chromeVoxChromePageScript.js:99
carnegiemnh.org/:1 Access to XMLHttpRequest at 'https://id.siteimprove.com/connect/authorize?client_id=my2&redirect_uri=https%3A%2F%2Fmy2.siteimprove.com%2FAuth%2FAuthCallback&response_type=code%20id_token&scope=openid%20profile%20si.profile&state=OpenIdConnect.AuthenticationProperties%3DmKu4tPPucFmbGg6ryqk3birGSjujH2FCGfSu7KBCirtjqWsNkjC8hG11AJQRCTDOF-lVBQBxqK82L2CKrvL_jM6V29-ms5Rz9hNJ0kugjZm-nW5bV4N6_SCEx6DNDW9_m7wtT8qC7A3zxzpFBSwXayNmtcQqnDonV_ua4LIZN92GWQ4AC-VvoPJ96g0Y_YyeD0pZg16j1X3zhHtkQ3QhwE6ApS7EcMy0fV_ss4X-voYh92aUpPvIELFXl1QdZ3wtJHnog2RvzXXlDn7ltXbZb1GfbeYWkjFqhtZ84pfWGloYN0Sbe4XSpdvbZiBw_LHphNaJGUGBTgYxtEXL-Tfs-nsFijEMMCDDfGERzix03qR2LcGjVZCSv3PEVZx2bSCeLOuF9MItogcLB5XoSCrxVhr5RETwgDOmhow_K_RYWZc&response_mode=form_post&nonce=637872879711453022.ZjhjYWUxZTUtNzgxNy00Y2FkLTg2MzgtZDI3YjU4Y2NjYzNlYTI1NTk4MDMtMGQ2MC00NDdkLTliODEtYTI0MmIzNzc5ZDk4&post_logout_redirect_uri=https%3A%2F%2Fmy2.siteimprove.com%2FAuth%2FLogoutCallback&x-client-SKU=ID_NET461&x-client-ver=5.3.0.0' (redirected from 'https://my2.siteimprove.com/overlay/cms/cmspage?url=https://carnegiemnh.org/egypt-on-the-nile-3d-test/&encodedUrl=https%3A%2F%2Fcarnegiemnh.org%2Fegypt-on-the-nile-3d-test%2F&token=638411d4a7cc462fb10f0b7b9339fe22') from origin 'https://carnegiemnh.org' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
overlay.js?ver=5.8.4:1          GET https://id.siteimprove.com/connect/authorize?client_id=my2&redirect_uri=https%3A%2F%2Fmy2.siteimprove.com%2FAuth%2FAuthCallback&response_type=code%20id_token&scope=openid%20profile%20si.profile&state=OpenIdConnect.AuthenticationProperties%3DmKu4tPPucFmbGg6ryqk3birGSjujH2FCGfSu7KBCirtjqWsNkjC8hG11AJQRCTDOF-lVBQBxqK82L2CKrvL_jM6V29-ms5Rz9hNJ0kugjZm-nW5bV4N6_SCEx6DNDW9_m7wtT8qC7A3zxzpFBSwXayNmtcQqnDonV_ua4LIZN92GWQ4AC-VvoPJ96g0Y_YyeD0pZg16j1X3zhHtkQ3QhwE6ApS7EcMy0fV_ss4X-voYh92aUpPvIELFXl1QdZ3wtJHnog2RvzXXlDn7ltXbZb1GfbeYWkjFqhtZ84pfWGloYN0Sbe4XSpdvbZiBw_LHphNaJGUGBTgYxtEXL-Tfs-nsFijEMMCDDfGERzix03qR2LcGjVZCSv3PEVZx2bSCeLOuF9MItogcLB5XoSCrxVhr5RETwgDOmhow_K_RYWZc&response_mode=form_post&nonce=637872879711453022.ZjhjYWUxZTUtNzgxNy00Y2FkLTg2MzgtZDI3YjU4Y2NjYzNlYTI1NTk4MDMtMGQ2MC00NDdkLTliODEtYTI0MmIzNzc5ZDk4&post_logout_redirect_uri=https%3A%2F%2Fmy2.siteimprove.com%2FAuth%2FLogoutCallback&x-client-SKU=ID_NET461&x-client-ver=5.3.0.0 net::ERR_FAILED 302
getData @ overlay.js?ver=5.8.4:1
input @ overlay.js?ver=5.8.4:1
si.push @ overlay.js?ver=5.8.4:1
common @ siteimprove.js?ver=1.0.0:35
input @ siteimprove.js?ver=1.0.0:13
(anonymous) @ siteimprove.js?ver=1.0.0:70
e @ jquery.min.js?ver=3.6.0:2
t @ jquery.min.js?ver=3.6.0:2
setTimeout (async)
(anonymous) @ jquery.min.js?ver=3.6.0:2
c @ jquery.min.js?ver=3.6.0:2
fireWith @ jquery.min.js?ver=3.6.0:2
fire @ jquery.min.js?ver=3.6.0:2
c @ jquery.min.js?ver=3.6.0:2
fireWith @ jquery.min.js?ver=3.6.0:2
ready @ jquery.min.js?ver=3.6.0:2
B @ jquery.min.js?ver=3.6.0:2
ytprefs.min.js?ver=13.4.3:2 YT API init check

[youngkcarnegie]

Sorry, there's a lot of irrelevant stuff in there: for TLDR:

DevTools failed to load source map: Could not load content for https://carnegiemnh.org/egypt-on-the-nile-3d-test/webcomponents-bundle.js.map: HTTP error: status code 404, net::ERR_HTTP_RESPONSE_CODE_FAILURE
carnegiemnh.org/:616          GET https://carnegiemnh.org/egypt-on-the-nile-3d-test/poster.webp 404
carnegiemnh.org/:1 Error handling response: TypeError: self.processResponse is not a function
    at chrome-extension://cmkdbmfndkfgebldhnkbfhlneefdaaip/js/notification.js:154:10
fbevents.js:24 [Meta Pixel] - Invalid PixelID: null.

[elalish]

None of that looks like MV errors. I think you'll want to clear those before you start looking at the screen reader problems.