Contrib.social

Static map needs alt tag for accessibility

Open on Drupal.org →
Created on 28 July 2018, over 6 years ago
Updated 23 January 2025, 3 months ago

When you test a page with Simple Google Map output through the WAVE accessibility plug-in using a static image map, the image does not have alt text which causes it to fail accessibility testing.

It would be great if the module could include a field where the user could provide customized alt text per map.

A possible default solution could be to include the {{ address_text }} in the alt text field for the static map images.

Example: Map Location: {{ address_text }}

Output: alt=”Map Location: 34.411921, -119.844040 ”

I modified the twig template to add an Alt tag to fix the accessibility issue on my site.

{% if include_map %}
  <iframe width="{{ width }}" height="{{ height }}" frameborder="0" style="border:0" src="https://maps.google.com/maps?hl={{ langcode }}&amp;q={{ url_suffix }}&amp;t={{ map_type }}&amp;z={{ zoom }}&amp;output=embed"></iframe>
{% endif %}
{% if include_static_map %}
  <div class="simple-gmap-static-map">
    <img alt="Map Location: {{ address_text }}" src="https://maps.googleapis.com/maps/api/staticmap?size={{ width }}x{{ height }}&amp;scale={{ static_scale }}&amp;zoom={{ zoom }}&amp;language={{ langcode }}&amp;maptype={{ static_map_type }}&amp;markers=color:red|{{ url_suffix }}&amp;sensor=false&amp;key={{ apikey }}" />
  </div>
{% endif %}
{% if include_link %}
  <p class="simple-gmap-link"><a href="https://maps.google.com/maps?q={{ url_suffix }}&amp;hl={{ langcode }}&amp;t={{ map_type }}&amp;z={{ zoom }}" target="_blank">{{ link_text }}</a></p>
{% endif %}

{# Used address for static map alt text.

{% if address_text is not empty %}
  <p class="simple-gmap-address">{{ address_text }}</p>
{% endif %}

#}

WAVE Accessibility Tool
https://wave.webaim.org/

🐛 Bug report
Status

Active

Version

4.0

Component

Code

Created by

🇺🇸United States Bwolf

Live updates comments and jobs are added and updated live.
  • Accessibility

    It affects the ability of people with disabilities or special needs (such as blindness or color-blindness) to use Drupal.

Sign in to follow issues

Merge Requests

Comments & Activities

Not all content is available!

It's likely this issue predates Contrib.social: some issue and comment data are missing.

contrib.social Blog FAQ Discussions
Production build 0.71.5 2024