Page MenuHomePhabricator

Improve screen reader/voice over support of transcluded maps
Open, Needs TriagePublicBUG REPORT

Description

Steps to replicate the issue (include links if applicable):

*Transclude a map using <mapframe>*

  • Enable VoiceOver or iOS or macOS
  • Navigate to the map with accessibility cursor, or in the case of iOS by moving your finger over the screen.

What happens?:
macOS:

  • Static image maps are announced as: Link, show in fullscreen Wikimedia vertical line copyright OpenStreetMap
  • For dynamic maps: Link, Zoom in Zoom out Show in fullscreen Wikimedia vertical line copyright OpenStreetMap

iOS:

  • The map image gets ignored
  • cursor moves immediately to the included "show fullscreen" button (but does not detail what will show fullscreen)
  • The user is unaware that there is an image.

What should have happened instead?:

  • Should indicate that there is a map
  • Should indicate that the fullscreen button will open the map fullscreen

Software version (skip for WMF-hosted wikis like Wikipedia):

Other information (browser name/version, screenshots, etc.):
This entire element is a link. The label for this link is all the textual content included in it. This is the label of the Fullscreen button and the copyright information, both elements within the link.

This becomes quite complex to fix this for all situations at once. Honestly wrapping that entire set of controls in a widget is probably bad practice. Instead they should be overlayed siblings within a container. Another option is to make the link a role=group (group of widgets) and set a label on the map image.

Event Timeline

Current static map

<a href="/map">
 <img alt>
 <div>
   <a href role="button">Show in fullscreen</a>
 </div>
 <div>attribution with a links</div>
</a>
<div> caption </div>

Current dynamic map

<a href="/map">
 <div class="leaflet-map-pane">The map layers</div>
 <div class="leaflet-controls-pane">
   <div>
     <a href role="button">Show in fullscreen</a>
   </div>
   <div>attribution with a links</div>
 </div>
</a>
<div> caption </div>

Possible suggestion for static map. Create controls group with a label. Remove alt suppression.

<a href="/map" role="group" aria-label="Map widget">
 <img alt="Image of map">
 <div>
   <a href role="button">Show in fullscreen</a>
 </div>
 <div>attribution with a links</div>
</a>
<div> caption </div>

This will no longer indicate the <a> as an interactive element, but we still have the enclosed element to go to fullscreen. Would require some validation on iOS still.

Possible suggestion for dynamic map with grouping

<a href="/map"  role="group" aria-label="Map widget">
 <div class="leaflet-map-pane">The map layers</div>
 <div class="leaflet-controls-pane">
   <div>
     <a href role="button">Show in fullscreen</a>
   </div>
   <div>attribution with a links</div>
 </div>
</a>
<div> caption </div>

The labelling is very difficult for a problem like this. An alternative is to completely rewrite the html structure and have the current wrapping map link as separate element within the wrapper instead of being the wrapper ?

thiemowmde renamed this task from Improve Accessibility of transcluded maps to Improve screen reader/voice over support of transcluded maps.Jan 12 2023, 10:01 AM