Anchor 'Skip to main' in the same page (accessibility requirement)

Flow
1

Hi all,

I’m trying to add a ‘Skip to main’ link in my Vaadin 24 app, so screen readers and keyboard users can jusmp to the main content.

I tried with SideNavItem, Anchor and Html components, using “#main” as the href or path. They all produce the same result : calling the home URL with this hash (as opposed to calling the actual loaded page).

I tried with some combinations of router-link, router ignore, etc., with no results.

Example :

        Anchor skipToMain = new Anchor("#main", "Skip to main content");
        skipToMain.setRouterIgnore(true);
        skipToMain.getElement().setAttribute("router-link", "");

I found an open issue (<a href="#anchor"> does not link to <a name="anchor> in same page · Issue #1215 · vaadin/flow · GitHub) stating that it’s ‘normal behavior’ right now, but I’m pretty sure that somenone was abled to bypass this and create that kind of link.

Any ideas ?

2

I havee customized my index.html and included my skip to main anchor there with href="javascript:scrollFocus('page-title')" where scrollFocus is a js function I have defined.

1 Like
3

While that issue should of course be solved, screen reader users are able to jump to the main content also just by having it wrapped in a .