ramp4-pcar4 / story-ramp

Storytelling with interactive maps using RAMP
MIT License
4 stars 14 forks source link

WCAG - Problems with multiple anchors in URLs #407

Open dan-bowerman opened 7 months ago

dan-bowerman commented 7 months ago

For discussion. An accessibility review was performed externally against one of the Storylines products we developed, and an interesting "violation" was identified.

The anchor links we use internally in some products are not being parsed by some screen readers and software correctly, namely because there's an additional "anchor" in URL. For example:

<a data-v-1c86e27a="" href="#/en/priority-species_especes-prioritaires#intro" class="flex py-1 px-3" target="">...</a>

We were provided with some options for how this can be fixed in Angular... that's not something we use, but perhaps the fundamentals will be helpful in resolving this in Vue3.

Web Content Accessibility in Angular Web Applications.docx

The gist of the issue is we need to lose the leading "#" in our application URLs. This would impact all existing bookmarks, so we'll need to tread carefully with this.