search

ramp4-pcar4 / story-ramp

Storytelling with interactive maps using RAMP
MIT License
3 stars 12 forks source link

WCAG issues with Time-slider #441

Open dan-bowerman opened 1 month ago

dan-bowerman commented 1 month ago

Description

The "Play" and "Minimize" buttons are tripping up scanning tools, this needs to be addressed ASAP. It can be difficult to get the WAVE toolbar to trip this error.

Taking the scan at face value, here's the "Minimize" button:

<button class="absolute right-4 minimize-button" content="Minimize">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="6 6 36 36" height="24" width="24" fill="#595959">
<path d="m24 30.75-12-12 2.15-2.15L24 26.5l9.85-9.85L36 18.8Z"></path>
</svg>
</button>

and the "Play" button:

<button class="absolute left-4 play-button" content="Play">
<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#595959">
<path d="M0 0h24v24H0z" fill="none"></path>
<path d="M8 5v14l11-7z"></path>
</svg>

The buttons likely need roles and aria-labels? See below.

Additionally, there are contrast issues with the grey labels (typically "Year") along the slider notches. Make them darker.

Environment

Steps to reproduce

  1. Have the WAVE accessibility scanning toolbar installed in a browser.
  2. Go to a Storylines product with a time-slider
  3. Open the WAVE toolbar. You might need to toggle it on, then off at the start, then scroll to a relevant map and open it up again.
  4. Note the "Empty button" errors. They are specific to the "Play" and "Minimize" buttons on the time-sliders.
  5. Note the multiple contrast errors reported, for each labeled time-slider notch.

Expected behavior

I expect a clean accessibility report and buttons to explain their purpose.

Actual behavior

The use of the time-slider buttons aren't made clear to screen readers and other utilities.

Additional information

https://www.w3.org/TR/WCAG22/#link-purpose-in-context

Possible solution

  1. Add aria-label and roles to the buttons:

    <button class="absolute right-4 minimize-button" aria-label="Minimize" role="button">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="6 6 36 36" height="24" width="24" fill="#595959">
<path d="m24 30.75-12-12 2.15-2.15L24 26.5l9.85-9.85L36 18.8Z"></path>
</svg>
</button>

  2. Improve the contrast of the time slider labels, darker or black than the grey they are currently.