h1 missing from accessibility tree

[kangabell]

There is an h1 on the page, but it is within a container set to display:none for some viewport sizes. This means the screen reader cannot access it, and it is not listed in the VoiceOver rotor in the Headings panel.

Testing Environment

http://159.89.83.1/c/new

WCAG Criteria

2.4.6 Headings and Labels - AA

Testing Method

Manual - VoiceOver, Chrome, MacOS

Screenshot

Relevant Code Snippet

<div class="bg-token-main-surface-primary sticky top-0 z-10 flex min-h-[40px] items-center justify-center bg-white pl-1 dark:bg-gray-800 dark:text-white md:hidden">...<h1 class="flex-1 overflow-hidden text-ellipsis whitespace-nowrap text-center text-sm font-normal">New Chat</h1>...</div>

Recommended Action

Move the h1 outside of the container, and hide it visually using a css utilitiy like the .sr-only class. Alternatively, don't hide the container or the h1 inside of it at all.

[derekjackson-das]

This <div> is hidden because it contains the responsive header/navigation and the related class is part of the media query min-width: 768px. The <h1> will be visible when the screen width is below 768px along with the mobile menu and new chat buttons:

@media (min-width: 768px) {
    .md\:hidden {
        display: none;
    }
}

However, using an <h1> in the application's desktop view is still a useful suggestion. If a dynamic h1 can be provided that matches the current chat in the same way the mobile h1 is created, then it could be a very useful navigation feature in the wider, desktop view also. This could be a .sr-only element so that it is a visually hidden heading, but consider that it may be useful to others as well who do not use a screen reader but benefit from clear, explicit way finding indicators.

Something like this:

That is similar to the mobile view: