[accessibility] Controls' icons should be explicitly hidden from assistive technology

[Malvoz]

Screen readers currently announce the "icons" or characters inside of controls because they're not hidden from ATs.

Taking the zoom in control as an example, a screen reader such as NVDA will announce Plus button zoom in on focus, and Plus on hover.

Similarly, the attribution control is announced as i button attributions on focus, and i on hover, because the character "i" (for "info") is not hidden from screen readers.

I propose that these icons/characters be wrapped in a child <span aria-hidden="true"> as a child element of <button> to prevent screen readers from announcing them.

(Ideally this should also be a consideration for custom controls, if only by updating the examples.)

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[walkermatt]

@Malvoz my understanding is that the ol/control/Zoom~Zoom zoomInLabel and zoomOutLabel properties facilitate wrapping the icons/characters in a child <span aria-hidden="true">.

The following takes a different approach of instead adding a span with a descriptive aria-label which I think results in ATs describing the zoom buttons appropriately:

import Map from 'ol/Map.js';
import OSM from 'ol/source/OSM.js';
import TileLayer from 'ol/layer/Tile.js';
import View from 'ol/View.js';
import {defaults} from 'ol/control/defaults';

// Customise the Zoom control to add a aria-label attribute to each button
const zoomInLabel = document.createElement('span');
zoomInLabel.ariaLabel = 'Zoom in';
zoomInLabel.append('+');

const zoomOutLabel = document.createElement('span');
zoomOutLabel.ariaLabel = 'Zoom out';
zoomOutLabel.append('-');

const controls = defaults({
  zoomOptions: {
    zoomInLabel: zoomInLabel,
    zoomOutLabel: zoomOutLabel
  }
});

// Create a Map instance, specifying our custom control options via
// the `controls` option
const map = new Map({
  layers: [
    new TileLayer({
      source: new OSM(),
    }),
  ],
  target: 'map',
  view: new View({
    center: [0, 0],
    zoom: 2,
  }),
  controls: controls
});

I'd welcome your thoughts.