Model Viewer and Screen Reader #3419

youngkcarnegie · 2022-05-04T13:01:17Z

youngkcarnegie
May 4, 2022

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 · 2022-05-04T13:45:18Z

vaggarath
May 4, 2022

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

5 replies

elalish May 4, 2022
Maintainer

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 May 4, 2022
Maintainer

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 May 4, 2022
Author

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:

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 May 4, 2022
Author

Sorry it didn't paste correctly.

vaggarath May 4, 2022

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 · 2022-05-04T17:39:06Z

youngkcarnegie
May 4, 2022
Author

<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>

4 replies

vaggarath May 4, 2022

what error do you get on console?

youngkcarnegie May 4, 2022
Author

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 May 4, 2022
Author

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 May 4, 2022
Maintainer

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

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Model Viewer and Screen Reader #3419

{{title}}

Replies: 2 comments 9 replies

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

Select a reply

Model Viewer and Screen Reader #3419

youngkcarnegie May 4, 2022

Replies: 2 comments · 9 replies

vaggarath May 4, 2022

elalish May 4, 2022 Maintainer

elalish May 4, 2022 Maintainer

youngkcarnegie May 4, 2022 Author

youngkcarnegie May 4, 2022 Author

vaggarath May 4, 2022

youngkcarnegie May 4, 2022 Author

vaggarath May 4, 2022

youngkcarnegie May 4, 2022 Author

youngkcarnegie May 4, 2022 Author

elalish May 4, 2022 Maintainer

youngkcarnegie
May 4, 2022

Replies: 2 comments 9 replies

vaggarath
May 4, 2022

elalish May 4, 2022
Maintainer

elalish May 4, 2022
Maintainer

youngkcarnegie May 4, 2022
Author

youngkcarnegie May 4, 2022
Author

youngkcarnegie
May 4, 2022
Author

youngkcarnegie May 4, 2022
Author

youngkcarnegie May 4, 2022
Author

elalish May 4, 2022
Maintainer