WCAG - Problems with multiple anchors in URLs

[dan-bowerman]

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.