[Resolved] Maps plugin loads maps images which generate accessibility errors

[Author]

Posts

[Suzanne Wenger]

We are running accessibility compliance scans on our website, and I notice that maps generated by the Toolset Maps plugin are throwing an "Image map area missing alternative text" accessibility error.

The plugin generates a blank alt tag in the code. Here is an example:

<img alt="" src="hidden link" draggable="false" usemap="#gmimap0" style="position: absolute; left: 0px; top: 0px; width: 22px; height: 40px; user-select: none; border: 0px; padding: 0px; margin: 0px; max-width: none;">

Since our sites need to be made accessible I have to find a fix for this.

[Beda]

You can use a feature which is present in the GUI do avoid this partially.
In the GUI when you insert the Map you can define a "Text to show while the map is loading", in the "Map Style and Marker Icon" settings.

But that is for the entire Map. I suspect your issue is related to a custom icon of a marker?
Because with a vanilla Map, the above HTML you shared is not generated by the Plugin.

Can you outline the exact steps I need to take in order to see the HTML you shared?

[Suzanne Wenger]

I see the html when I am looking through the accessibility report of the page. The code is highlighted by the program. For you to see better where the images are located below is all of the code. I have added character returns before the image tags that are lacking alt information. There is about 22 of them.

<div id="js-wpv-addon-maps-render-cfs" style="width: 100%; height: 250px; position: relative; overflow: hidden;" class="wpv-addon-maps-render js-wpv-addon-maps-render js-wpv-addon-maps-render-cfs" data-map="cfs" data-generalzoom="5" data-generalcenterlat="0" data-generalcenterlon="0" data-fitbounds="on" data-singlezoom="17" data-singlecenter="on" data-maptype="roadmap" data-showlayerinterests="false" data-markericon="" data-markericonhover="" data-draggable="on" data-scrollwheel="on" data-doubleclickzoom="on" data-maptypecontrol="on" data-fullscreencontrol="off" data-zoomcontrol="on" data-streetviewcontrol="on" data-backgroundcolor="" data-cluster="off" data-clustergridsize="60" data-clustermaxzoom="" data-clusterclickzoom="on" data-clusterminsize="2" data-stylejson="//falk.syr.edu/wp-content/plugins/toolset-maps/resources/json/Standard.json">
<div style="height: 100%; width: 100%; position: absolute; top: 0px; left: 0px; background-color: rgb(229, 227, 223);">
<div class="gm-style" style="position: absolute; z-index: 0; left: 0px; top: 0px; height: 100%; width: 100%; padding: 0px; border-width: 0px; margin: 0px;">
<div tabindex="0" style="position: absolute; z-index: 0; left: 0px; top: 0px; height: 100%; width: 100%; padding: 0px; border-width: 0px; margin: 0px; cursor: url("<em><u>hidden link</u></em>") 8 8, default;">
<div style="z-index: 1; position: absolute; top: 0px; left: 0px; width: 100%; transform-origin: 0px 0px 0px; transform: matrix(1, 0, 0, 1, 0, 0);">
<div style="position: absolute; left: 0px; top: 0px; z-index: 100; width: 100%;">
<div style="position: absolute; left: 0px; top: 0px; z-index: 0;">
<div aria-hidden="true" style="position: absolute; left: 0px; top: 0px; z-index: 1; visibility: inherit;">
<div style="width: 256px; height: 256px; position: absolute; left: 121px; top: -59px;">
<div style="width: 256px; height: 256px; position: absolute; left: 121px; top: 197px;">
<div style="width: 256px; height: 256px; position: absolute; left: 377px; top: -59px;">
<div style="width: 256px; height: 256px; position: absolute; left: 377px; top: 197px;">
<div style="width: 256px; height: 256px; position: absolute; left: -135px; top: -59px;">
<div style="width: 256px; height: 256px; position: absolute; left: -135px; top: 197px;">
<div style="width: 256px; height: 256px; position: absolute; left: 633px; top: -59px;">
<div style="width: 256px; height: 256px; position: absolute; left: 633px; top: 197px;">
</div>
</div>
</div>
<div style="position: absolute; left: 0px; top: 0px; z-index: 101; width: 100%;">
<div style="position: absolute; left: 0px; top: 0px; z-index: 102; width: 100%;">
<div style="position: absolute; left: 0px; top: 0px; z-index: 103; width: 100%;">
<div style="position: absolute; left: 0px; top: 0px; z-index: -1;">
<div aria-hidden="true" style="position: absolute; left: 0px; top: 0px; z-index: 1; visibility: inherit;">
<div style="width: 256px; height: 256px; overflow: hidden; position: absolute; left: 121px; top: -59px;">
<div style="width: 256px; height: 256px; overflow: hidden; position: absolute; left: 121px; top: 197px;">
<div style="width: 256px; height: 256px; overflow: hidden; position: absolute; left: 377px; top: -59px;">
<div style="width: 256px; height: 256px; overflow: hidden; position: absolute; left: 377px; top: 197px;">
<div style="width: 256px; height: 256px; overflow: hidden; position: absolute; left: -135px; top: -59px;">
<div style="width: 256px; height: 256px; overflow: hidden; position: absolute; left: -135px; top: 197px;">
<div style="width: 256px; height: 256px; overflow: hidden; position: absolute; left: 633px; top: -59px;">
<div style="width: 256px; height: 256px; overflow: hidden; position: absolute; left: 633px; top: 197px;">
</div>
</div>
<div style="width: 22px; height: 40px; overflow: hidden; position: absolute; left: 413px; top: 85px; z-index: 125;">


<img alt="" src="<em><u>hidden link</u></em>" draggable="false" style="position: absolute; left: 0px; top: 0px; width: 22px; height: 40px; user-select: none; border: 0px; padding: 0px; margin: 0px; max-width: none;">
</div>
</div>
<div style="position: absolute; left: 0px; top: 0px; z-index: 0;">
<div aria-hidden="true" style="position: absolute; left: 0px; top: 0px; z-index: 1; visibility: inherit;">
<div style="position: absolute; left: 121px; top: -59px; transition: opacity 200ms ease-out;">


<img draggable="false" alt="" src="<em><u>hidden link</u></em>" style="width: 256px; height: 256px; user-select: none; border: 0px; padding: 0px; margin: 0px; max-width: none;">
</div>
<div style="position: absolute; left: 121px; top: 197px; transition: opacity 200ms ease-out;">


<img draggable="false" alt="" src="<em><u>hidden link</u></em>" style="width: 256px; height: 256px; user-select: none; border: 0px; padding: 0px; margin: 0px; max-width: none;">
</div>
<div style="position: absolute; left: 377px; top: -59px; transition: opacity 200ms ease-out;">


<img draggable="false" alt="" src="<em><u>hidden link</u></em>" style="width: 256px; height: 256px; user-select: none; border: 0px; padding: 0px; margin: 0px; max-width: none;">
</div>
<div style="position: absolute; left: 377px; top: 197px; transition: opacity 200ms ease-out;">


<img draggable="false" alt="" src="<em><u>hidden link</u></em>" style="width: 256px; height: 256px; user-select: none; border: 0px; padding: 0px; margin: 0px; max-width: none;">
</div>
<div style="position: absolute; left: -135px; top: -59px; transition: opacity 200ms ease-out;">


<img draggable="false" alt="" src="<em><u>hidden link</u></em>" style="width: 256px; height: 256px; user-select: none; border: 0px; padding: 0px; margin: 0px; max-width: none;">
</div>
<div style="position: absolute; left: -135px; top: 197px; transition: opacity 200ms ease-out;">


<img draggable="false" alt="" src="<em><u>hidden link</u></em>" style="width: 256px; height: 256px; user-select: none; border: 0px; padding: 0px; margin: 0px; max-width: none;">
</div>
<div style="position: absolute; left: 633px; top: -59px; transition: opacity 200ms ease-out;">


<img draggable="false" alt="" src="<em><u>hidden link</u></em>" style="width: 256px; height: 256px; user-select: none; border: 0px; padding: 0px; margin: 0px; max-width: none;">
</div>
<div style="position: absolute; left: 633px; top: 197px; transition: opacity 200ms ease-out;">


<img draggable="false" alt="" src="<em><u>hidden link</u></em>" style="width: 256px; height: 256px; user-select: none; border: 0px; padding: 0px; margin: 0px; max-width: none;">
</div>
</div>
</div>
</div>
<div class="gm-style-pbc" style="z-index: 2; position: absolute; height: 100%; width: 100%; padding: 0px; border-width: 0px; margin: 0px; left: 0px; top: 0px; opacity: 0;">
<p class="gm-style-pbt"></p>
</div>
<div style="z-index: 3; position: absolute; height: 100%; width: 100%; padding: 0px; border-width: 0px; margin: 0px; left: 0px; top: 0px;">
<div style="z-index: 1; position: absolute; height: 100%; width: 100%; padding: 0px; border-width: 0px; margin: 0px; left: 0px; top: 0px;">
</div>
<div style="z-index: 4; position: absolute; top: 0px; left: 0px; width: 100%; transform-origin: 0px 0px 0px; transform: matrix(1, 0, 0, 1, 0, 0);">
<div style="position: absolute; left: 0px; top: 0px; z-index: 104; width: 100%;">
<div style="position: absolute; left: 0px; top: 0px; z-index: 105; width: 100%;">
<div style="position: absolute; left: 0px; top: 0px; z-index: 106; width: 100%;">
<div class="gmnoprint" style="width: 22px; height: 40px; overflow: hidden; position: absolute; opacity: 0.01; left: 413px; top: 85px; z-index: 125;">


<img alt="" src="<em><u>hidden link</u></em>" draggable="false" usemap="#gmimap0" style="position: absolute; left: 0px; top: 0px; width: 22px; height: 40px; user-select: none; border: 0px; padding: 0px; margin: 0px; max-width: none;">
<map name="gmimap0" id="gmimap0">
<area href="javascript:void(0)" log="miw" coords="8,0,5,1,4,2,3,3,2,4,2,5,1,6,1,7,0,8,0,14,1,15,1,16,2,17,2,18,3,19,3,20,4,21,5,22,5,23,6,24,7,25,7,27,8,28,8,29,9,30,9,33,10,34,10,40,11,40,11,34,12,33,12,30,13,29,13,28,14,27,14,25,15,24,16,23,16,22,17,21,18,20,18,19,19,18,19,17,20,16,20,15,21,14,21,8,20,7,20,6,19,5,19,4,18,3,17,2,16,1,14,1,13,0,8,0" shape="poly" title="Child & Family Studies " style="cursor: pointer;">
</map>
</div>
</div>
<div style="position: absolute; left: 0px; top: 0px; z-index: 107; width: 100%;">
</div>
</div>
<div style="margin-left: 5px; margin-right: 5px; z-index: 1000000; position: absolute; left: 0px; bottom: 0px;">
<a target="_blank" href="<em><u>hidden link</u></em>" title="Click to see this area on Google Maps" style="position: static; overflow: visible; float: none; display: inline;">
<div style="width: 66px; height: 26px; cursor: pointer;">


<img alt="" src="<em><u>hidden link</u></em>" draggable="false" style="position: absolute; left: 0px; top: 0px; width: 66px; height: 26px; user-select: none; border: 0px; padding: 0px; margin: 0px;">
</div>
</a>
</div>
<div style="background-color: white; padding: 15px 21px; border: 1px solid rgb(171, 171, 171); font-family: Roboto, Arial, sans-serif; color: rgb(34, 34, 34); box-shadow: rgba(0, 0, 0, 0.2) 0px 4px 16px; z-index: 10000002; display: none; width: 256px; height: 148px; position: absolute; left: 274px; top: 35px;">
<div style="padding: 0px 0px 10px; font-size: 16px;">
Map Data
</div>
<div style="font-size: 13px;">
Map data ©2017 Google
</div>
<div style="width: 13px; height: 13px; overflow: hidden; position: absolute; opacity: 0.7; right: 12px; top: 12px; z-index: 10000; cursor: pointer;">


<img alt="" src="<em><u>hidden link</u></em>" draggable="false" style="position: absolute; left: -2px; top: -336px; width: 59px; height: 492px; user-select: none; border: 0px; padding: 0px; margin: 0px; max-width: none;">
</div>
</div>
<div class="gmnoprint" style="z-index: 1000001; position: absolute; right: 168px; bottom: 0px; width: 121px;">
<div draggable="false" class="gm-style-cc" style="user-select: none; height: 14px; line-height: 14px;">
<div style="opacity: 0.7; width: 100%; height: 100%; position: absolute;">
<div style="width: 1px;">
<div style="background-color: rgb(245, 245, 245); width: auto; height: 100%; margin-left: 1px;">
</div>
<div style="position: relative; padding-right: 6px; padding-left: 6px; font-family: Roboto, Arial, sans-serif; font-size: 10px; color: rgb(68, 68, 68); white-space: nowrap; direction: ltr; text-align: right; vertical-align: middle; display: inline-block;">
<a style="color: rgb(68, 68, 68); text-decoration: none; cursor: pointer; display: none;">
Map Data
</a>
<span>
Map data ©2017 Google
</span>
</div>
</div>
</div>
<div class="gmnoscreen" style="position: absolute; right: 0px; bottom: 0px;">
<div style="font-family: Roboto, Arial, sans-serif; font-size: 11px; color: rgb(68, 68, 68); direction: ltr; text-align: right; background-color: rgb(245, 245, 245);">
Map data ©2017 Google
</div>
</div>
<div class="gmnoprint gm-style-cc" draggable="false" style="z-index: 1000001; user-select: none; height: 14px; line-height: 14px; position: absolute; right: 96px; bottom: 0px;">
<div style="opacity: 0.7; width: 100%; height: 100%; position: absolute;">
<div style="width: 1px;">
<div style="background-color: rgb(245, 245, 245); width: auto; height: 100%; margin-left: 1px;">
</div>
<div style="position: relative; padding-right: 6px; padding-left: 6px; font-family: Roboto, Arial, sans-serif; font-size: 10px; color: rgb(68, 68, 68); white-space: nowrap; direction: ltr; text-align: right; vertical-align: middle; display: inline-block;">
<a href="<em><u>hidden link</u></em>" target="_blank" style="text-decoration: none; cursor: pointer; color: rgb(68, 68, 68);">
Terms of Use
</a>
</div>
</div>
<button draggable="false" title="Toggle fullscreen view" aria-label="Toggle fullscreen view" type="button" style="background: none; border: 0px; margin: 10px 14px; padding: 0px; position: absolute; cursor: pointer; user-select: none; width: 25px; height: 25px; overflow: hidden; top: 0px; right: 0px;">


<img alt="" src="<em><u>hidden link</u></em>" draggable="false" class="gm-fullscreen-control" style="position: absolute; left: -52px; top: -86px; width: 164px; height: 175px; user-select: none; border: 0px; padding: 0px; margin: 0px;">
</button>
<div draggable="false" class="gm-style-cc" style="user-select: none; height: 14px; line-height: 14px; position: absolute; right: 0px; bottom: 0px;">
<div style="opacity: 0.7; width: 100%; height: 100%; position: absolute;">
<div style="width: 1px;">
<div style="background-color: rgb(245, 245, 245); width: auto; height: 100%; margin-left: 1px;">
</div>
<div style="position: relative; padding-right: 6px; padding-left: 6px; font-family: Roboto, Arial, sans-serif; font-size: 10px; color: rgb(68, 68, 68); white-space: nowrap; direction: ltr; text-align: right; vertical-align: middle; display: inline-block;">
<a target="_new" title="Report errors in the road map or imagery to Google" href="<em><u>hidden link</u></em>" style="font-family: Roboto, Arial, sans-serif; font-size: 10px; color: rgb(68, 68, 68); text-decoration: none; position: relative;">
Report a map error
</a>
</div>
</div>
<div class="gmnoprint gm-bundled-control gm-bundled-control-on-bottom" draggable="false" controlwidth="28" controlheight="93" style="margin: 10px; user-select: none; position: absolute; bottom: 107px; right: 28px;">
<div class="gmnoprint" controlwidth="28" controlheight="55" style="position: absolute; left: 0px; top: 38px;">
<div draggable="false" style="user-select: none; box-shadow: rgba(0, 0, 0, 0.3) 0px 1px 4px -1px; border-radius: 2px; cursor: pointer; background-color: rgb(255, 255, 255); width: 28px; height: 55px;">
<button draggable="false" title="Zoom in" aria-label="Zoom in" type="button" style="background: none; display: block; border: 0px; margin: 0px; padding: 0px; position: relative; cursor: pointer; user-select: none; width: 28px; height: 27px; top: 0px; left: 0px;">
<div style="overflow: hidden; position: absolute; width: 15px; height: 15px; left: 7px; top: 6px;">


<img alt="" src="<em><u>hidden link</u></em>" draggable="false" style="position: absolute; left: 0px; top: 0px; user-select: none; border: 0px; padding: 0px; margin: 0px; max-width: none; width: 120px; height: 54px;">
</div>
</button>
<div style="position: relative; overflow: hidden; width: 67%; height: 1px; left: 16%; background-color: rgb(230, 230, 230); top: 0px;">
<button draggable="false" title="Zoom out" aria-label="Zoom out" type="button" style="background: none; display: block; border: 0px; margin: 0px; padding: 0px; position: relative; cursor: pointer; user-select: none; width: 28px; height: 27px; top: 0px; left: 0px;">
<div style="overflow: hidden; position: absolute; width: 15px; height: 15px; left: 7px; top: 6px;">


<img alt="" src="<em><u>hidden link</u></em>" draggable="false" style="position: absolute; left: 0px; top: -15px; user-select: none; border: 0px; padding: 0px; margin: 0px; max-width: none; width: 120px; height: 54px;">
</div>
</button>
</div>
</div>
<div class="gm-svpc" controlwidth="28" controlheight="28" style="background-color: rgb(255, 255, 255); box-shadow: rgba(0, 0, 0, 0.3) 0px 1px 4px -1px; border-radius: 2px; width: 28px; height: 28px; cursor: url("<em><u>hidden link</u></em>") 8 8, default; position: absolute; left: 0px; top: 0px;">
<div style="position: absolute; left: 1px; top: 1px;">
<div style="position: absolute; left: 1px; top: 1px;">
<div aria-label="Street View Pegman Control" style="width: 26px; height: 26px; overflow: hidden; position: absolute; left: 0px; top: 0px;">


<img alt="" src="<em><u>hidden link</u></em>" draggable="false" style="position: absolute; left: -147px; top: -26px; width: 215px; height: 835px; user-select: none; border: 0px; padding: 0px; margin: 0px; max-width: none;">
</div>
<div aria-label="Pegman is on top of the Map" style="width: 26px; height: 26px; overflow: hidden; position: absolute; left: 0px; top: 0px; visibility: hidden;">


<img alt="" src="<em><u>hidden link</u></em>" draggable="false" style="position: absolute; left: -147px; top: -52px; width: 215px; height: 835px; user-select: none; border: 0px; padding: 0px; margin: 0px; max-width: none;">
</div>
<div aria-label="Street View Pegman Control" style="width: 26px; height: 26px; overflow: hidden; position: absolute; left: 0px; top: 0px; visibility: hidden;">


<img alt="" src="<em><u>hidden link</u></em>" draggable="false" style="position: absolute; left: -147px; top: -78px; width: 215px; height: 835px; user-select: none; border: 0px; padding: 0px; margin: 0px; max-width: none;">
</div>
</div>
</div>
<div class="gmnoprint" controlwidth="28" controlheight="0" style="display: none; position: absolute;">
<div title="Rotate map 90 degrees" style="width: 28px; height: 28px; overflow: hidden; position: absolute; background-color: rgb(255, 255, 255); box-shadow: rgba(0, 0, 0, 0.3) 0px 1px 4px -1px; border-radius: 2px; cursor: pointer; display: none;">


<img alt="" src="<em><u>hidden link</u></em>" draggable="false" style="position: absolute; left: -141px; top: 6px; width: 170px; height: 54px; user-select: none; border: 0px; padding: 0px; margin: 0px; max-width: none;">
</div>
<div class="gm-tilt" style="width: 28px; height: 28px; overflow: hidden; position: absolute; background-color: rgb(255, 255, 255); box-shadow: rgba(0, 0, 0, 0.3) 0px 1px 4px -1px; border-radius: 2px; top: 0px; cursor: pointer;">


<img alt="" src="<em><u>hidden link</u></em>" draggable="false" style="position: absolute; left: -141px; top: -13px; width: 170px; height: 54px; user-select: none; border: 0px; padding: 0px; margin: 0px; max-width: none;">
</div>
</div>
</div>
<div class="gmnoprint" style="margin: 10px; z-index: 0; position: absolute; cursor: pointer; left: 0px; top: 0px;">
<div class="gm-style-mtc" style="float: left; position: relative;">
<div role="button" tabindex="0" title="Show street map" aria-label="Show street map" aria-pressed="true" draggable="false" style="direction: ltr; overflow: hidden; text-align: center; position: relative; color: rgb(0, 0, 0); font-family: Roboto, Arial, sans-serif; user-select: none; font-size: 11px; background-color: rgb(255, 255, 255); padding: 8px; border-bottom-left-radius: 2px; border-top-left-radius: 2px; -webkit-background-clip: padding-box; background-clip: padding-box; box-shadow: rgba(0, 0, 0, 0.3) 0px 1px 4px -1px; min-width: 21px; font-weight: 500;">
Map
</div>
<div style="background-color: white; z-index: -1; padding: 2px; border-bottom-left-radius: 2px; border-bottom-right-radius: 2px; box-shadow: rgba(0, 0, 0, 0.3) 0px 1px 4px -1px; position: absolute; left: 0px; top: 29px; text-align: left; display: none;">
<div draggable="false" title="Show street map with terrain" style="color: rgb(0, 0, 0); font-family: Roboto, Arial, sans-serif; user-select: none; font-size: 11px; background-color: rgb(255, 255, 255); padding: 6px 8px 6px 6px; direction: ltr; text-align: left; white-space: nowrap;">
<span role="checkbox" style="box-sizing: border-box; position: relative; line-height: 0; font-size: 0px; margin: 0px 5px 0px 0px; display: inline-block; background-color: rgb(255, 255, 255); border: 1px solid rgb(198, 198, 198); border-radius: 1px; width: 13px; height: 13px; vertical-align: middle;">
<div style="position: absolute; left: 1px; top: -2px; width: 13px; height: 11px; overflow: hidden; display: none;">


<img alt="" src="<em><u>hidden link</u></em>" draggable="false" style="position: absolute; left: -52px; top: -44px; user-select: none; border: 0px; padding: 0px; margin: 0px; max-width: none; width: 68px; height: 67px;">
</div>
</span>
<label style="vertical-align: middle; cursor: pointer;">
Terrain
</label>
</div>
</div>
</div>
<div class="gm-style-mtc" style="float: left; position: relative;">
<div role="button" tabindex="0" title="Show satellite imagery" aria-label="Show satellite imagery" aria-pressed="false" draggable="false" style="direction: ltr; overflow: hidden; text-align: center; position: relative; color: rgb(86, 86, 86); font-family: Roboto, Arial, sans-serif; user-select: none; font-size: 11px; background-color: rgb(255, 255, 255); padding: 8px; border-bottom-right-radius: 2px; border-top-right-radius: 2px; -webkit-background-clip: padding-box; background-clip: padding-box; box-shadow: rgba(0, 0, 0, 0.3) 0px 1px 4px -1px; min-width: 39px; border-left: 0px;">
Satellite
</div>
<div style="background-color: white; z-index: -1; padding: 2px; border-bottom-left-radius: 2px; border-bottom-right-radius: 2px; box-shadow: rgba(0, 0, 0, 0.3) 0px 1px 4px -1px; position: absolute; right: 0px; top: 29px; text-align: left; display: none;">
<div draggable="false" title="Show imagery with street names" style="color: rgb(0, 0, 0); font-family: Roboto, Arial, sans-serif; user-select: none; font-size: 11px; background-color: rgb(255, 255, 255); padding: 6px 8px 6px 6px; direction: ltr; text-align: left; white-space: nowrap;">
<span role="checkbox" style="box-sizing: border-box; position: relative; line-height: 0; font-size: 0px; margin: 0px 5px 0px 0px; display: inline-block; background-color: rgb(255, 255, 255); border: 1px solid rgb(198, 198, 198); border-radius: 1px; width: 13px; height: 13px; vertical-align: middle;">
<div style="position: absolute; left: 1px; top: -2px; width: 13px; height: 11px; overflow: hidden;">


<img alt="" src="<em><u>hidden link</u></em>" draggable="false" style="position: absolute; left: -52px; top: -44px; user-select: none; border: 0px; padding: 0px; margin: 0px; max-width: none; width: 68px; height: 67px;">
</div>
</span>
<label style="vertical-align: middle; cursor: pointer;">
Labels
</label>
</div>
</div>
</div>
</div>
</div>
</div>
</div>

[Beda]

Please let me know how I can replicate it.

I added a map with a marker to a page, and the page source code does not mention a single line of the code you shared, unless of course the Views HTML which renders the Map, and the Map code itself.

But the entire page to me presents exactly 2 img alt attributes:
The gravatar provided by WordPress (BTW as well empty, but that is delivered by WordPress).

I see no img alt in the map.
How do you replicate this problem?

Can you show me how you insert the map? If you use Custom markers or map styles?
Please see here:
https://toolset.com/forums/topic/maps-plugin-loads-maps-images-which-generate-accessibility-errors/#post-598422

Thank you for the cooperation!

[Suzanne Wenger]

The map is generated by WP-Toolset maps shortcodes. I use the "Field and Views" shortcodes button while editing the page. This window has the Google Maps section gives me options for "Map Marker", "Reload", "Focus on marker", "Zoom out". I don't know of another way to use the WP-Toolset maps plugin besides the shortcodes as there is no section under the administrative Toolset menu for maps. The only other Maps plugin area I have control over is the Settings page under Toolset. Perhaps you use another way to add maps, if so I would be happy to know how that works.

Below is an example of the shortcode generated by the plugin:

[wpv-map-render map_id='cfs' map_width='100%' single_zoom='17'][wpv-map-marker map_id='cfs' marker_id='cfs-office' marker_title='Falk College' lat='43.037341' lon='-76.137499']

The above shortcode is what generates the map code I sent to you.

[Beda]

Great, so you use several optional attributes.
With them I can still not see the issue.

The only img alt tags I have in the entire template are of the gravatar, please see the screenshot.

Please send me a copy of your site, elaborating where and how I can see the issue.
Here are the details on who to submit me the copy:
https://toolset.com/faq/provide-supporters-copy-site/

I can then debug this.

Thank you

[Suzanne Wenger]

Beda,
I cannot send you a copy of my site, I am on a University server platforms which will not allow the use of Duplicator, nor can I give you access to the backend of the site, because only persons with valid University profiles are allowed to log in.

Perhaps it is an error generated through the Google maps API when maps are pulled from Google.

All I know is I am using your plugin as directed on your site, I don't have a lot of other options to load maps using WP-Toolset. Perhaps you need to test your plugin more, because it is generating compatibility errors. You can see these if you use a accessibility tool such as WAVE. You can do this yourself by going to hidden link and you can use one of our urls as a reference, hidden link

This will show you the map errors live and perhaps help you see where your code is pulling in the error.

[Beda]

As mentioned, I tested it at no avail.

I tested with your URL and the Tool, and I see no errors on empty alt values.
Sorry if I miss it, can you send me a screenshot to the Tool above so I can find my way through it?
Where can I see the error?

I see the alerts but they are not mentioning these empty alt tags.
I see the empty alt tags on your link thou.
They are the marker:
hidden link

Thanks to this I was now also able to find this in the local install!

I have reported it and as you requested we will check if we can improve this.

I am sorry the back and forth.

[Beda]

Updating Ticket status to "escalated to 2nd Tier Support"

[Suzanne Wenger]

Hi Beda,
It looks like the web app is picking up a different error then the web page accessibility checker. Above is a screen shot with the error. Perhaps it is just a problem with the WAVE web plugin accessibility tools.

[Beda]

Those images are generated by the Google Maps API, and we have no control ver their attributes. Markers offer no API to fill their alt attribute, and tiles and other map elements like the icons for Street View are generated and served by Google directly.

Interesting enough, some years ago empty alt tags was what people were asking for:
https://stackoverflow.com/questions/20714153/google-map-tiles-missing-alt-tag-causing-lower-accessibility-score

Google states they are acessibility-ready:
hidden link

The W3C states that decorative images shoudl just get an empty alt tag:
hidden link

All in all, this is out of our control, and seems not to be a real accessibility issue either

We cannot change how it's done by Google - in this case the only way I see is to ask Google Support for this detail.

Thank you!

[Suzanne Wenger]

Beda,
Thanks for looking into this. I will treat it as a false positive and hope that it does not come up as an issue in any of the compliance scans for our website.

Thanks for your help,
Suzanne