search

Esri / a11y-map

A11y map testing
Apache License 2.0
23 stars 5 forks source link

Accessible legend #16

Closed geospatialem closed 6 years ago

geospatialem commented 6 years ago

Added an accessible dynamic legend to the top right corner of the map.

Screenshot of the legend added to the a11y map in the top right corner of the interface

The legend has a h2 heading indicating "Map legend layers:". The heading is not displayed to a sighted user by using the offscreen class. The ":" character in the heading aims to add a break in speech when a screen reader reads the map layer present in the legend.

Using the title a h3 heading is added to indicate the name of the map layer (Trailheads):

Screenshot showing a close up of the legend with the Trailheads layer displayed

To ensure the page heading structure is met a h1 heading was added to the map, also hidden to sighted users using the offscreen class.

The final heading structure is as follows:

Updates tested on iOS with: VoiceOver, aXe, WAVE, and ChromeVox.

cc #11

P.S. Apologies, typescript was not used in this PR.

kellyhutchins commented 6 years ago

@nwisehart can you take a look at these changes and incorporate them via TypeScript into the app? Also when you add the legend can you make it configurable so when its in the app gallery users can choose the 'corner' of the app where the legend displays.

kellyhutchins commented 6 years ago

@geospatialem we'll get these moved in to an updated version using TS. Thanks for submitting the pull request.

geospatialem commented 6 years ago

Thanks @kellyhutchins! Hoping to get on the TypeScript bandwagon soon to make more well-rounded PR's in the future. Thanks for helping build this great example! 💯

nwisehart commented 6 years ago

created a typescript ready pull request under the branch Esri/a11y-map/tree/legend

Will close this PR and merge from that updated branch