-
-
Notifications
You must be signed in to change notification settings - Fork 3k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
[accessibility] Controls' icons should be explicitly hidden from assistive technology #12041
Comments
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. |
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. |
@Malvoz my understanding is that the The following takes a different approach of instead adding a span with a descriptive 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. |
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 on focus, and on hover.
Similarly, the attribution control is announced as
on focus, and 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.)
The text was updated successfully, but these errors were encountered: