Improve the accessibility of the layout

[jcgueriaud1]

Here are few things I think we could change to improve the accessibility of our layout.

The html page should be structured. The main content in a <main>, the header in a <header>...

The main heading of the page should contain the name of the page not the name of the application.

As a change in the code, this means:

    private void addHeaderContent() {
        DrawerToggle toggle = new DrawerToggle();
        toggle.setAriaLabel("Menu toggle");

        viewTitle = new H1();
        viewTitle.addClassNames(LumoUtility.FontSize.LARGE);

        Header header = new Header(toggle, viewTitle);
        header.addClassNames(LumoUtility.Display.FLEX, LumoUtility.AlignItems.CENTER);
        addToNavbar(true, header);
    }

    private void addDrawerContent() {
        Span appName = new Span("My App");
        appName.addClassNames(LumoUtility.FontSize.LARGE, LumoUtility.Margin.SMALL);

        Scroller scroller = new Scroller(createNavigation());

        addToDrawer(appName, scroller, createFooter());
    }

Also each page should use a Main as the base class (or wrap every child in a <main>).

See the internal discussion here: https://vaadin.slack.com/archives/CSXCXSAMR/p1686903967004549

[anezthes]

LumoUtility.FlexDirection.ROW (header) and LumoUtility.Margin.NONE (viewTitle, appName) are not needed. Row is the default direction, and I think margins were removed from headings in V24.

[jcgueriaud1]

I edited the code (I removed the LumoUtility.FlexDirection.ROW and LumoUtility.Margin.NONE). I also added a margin for the Span (My App) and center the main title and the drawer.

[jouni]

The main heading of the page should contain the name of the page not the name of the application.

Can you cute a source for this as a best practice? Seems reasonable, but I’m interested in reading mote about this.