[BITV] 9.1.3.1a/7.1 - The page only has one "h1" heading. Neither the left-side navigation nor the main content is structured by the headings. (1)

[AndyScherzinger]

It is suggested to mark the two headings "Personal" and "Administration" as "h2" and to use a visually hidden "h2" heading for the main content, for example, "Logging data." It is recommended to replace the current "h1" heading "Nextcloud's homepage" with a heading that better describes the content of the page, such as "Logging".

Details

https://report.bitvtest.de/default-en/d63601ac-cb34-4645-8256-66bec78964a0.html#checkpoint-be75bbae42-v7-n1

[JuliaKirschenheuter]

Related (same) issue is here: #35626

[JuliaKirschenheuter]

Hi @michaelnissenbaum,

i have one question / clarification about this ticket. I've implemented <h1> headings for pages which are relies on sidebar. From example above that would be only for screen readers accessible <h1> heading named "Logging". "Nextcloud's homepage" doesn't exist anymore.

But it would be lots of work to create <h2> headings with "Personal" and "Administration", because a main content (right side) have lots of such headings. example:

"Appearance and accessibility", "Keyboard shortcuts", "Background" ..and so on are are already <h2>. If i would create "Personal" and "Administration" as <h2> headings then i have to replace existing <h2> with <h3>.

Because of this i have a following question: is it important to have headings like "Personal" and "Administration" as <h2>? Or could i follow another approach to mark them? Or could i use in that case <h1> like: "Personal Settings - Logging"?

[michaelnissenbaum]

Hi @JuliaKirschenheuter I think I have a solution. Currently, both the "Personal" and "Administration" sections are located within one navigation landmark that does not have a name. The solution would be to divide this one navigation into two separate navigations and connect them with visual labels. The code in this case would look like:

<div id="123">Persönlich</div>
<nav aria-labelledby="123">
  <ul>
    <li>
      <a href="/settings/user">
        <img alt="" src="/core/img/actions/user.svg">
        <span>Persönliche Informationen</span>
      </a>
    </li>
    ...
  </ul>
<nav>

<div id="456">Verwaltung</div>
<nav aria-labelledby="456">
  <ul>
    <li>
      <a href="/settings/admin/overview">
        <img alt="" src="/apps/settings/img/admin.svg">
        <span>Übersicht</span>
      </a>
    </li>
    ...
  </ul>
<nav>

[JuliaKirschenheuter]

Thanks a lot @michaelnissenbaum!

[JuliaKirschenheuter]

https://www.w3.org/WAI/ARIA/apg/patterns/landmarks/examples/navigation.html

[JuliaKirschenheuter]

Hi @michaelnissenbaum,

After several trying to implement 2 different navs i came to conclusion that this approach would be a breaking change for some apps which are relies on structure of nc25. Well in this point i can't go this risk which would create some regressions.

My last idea about implementation would be: set "Personal" and "Administration" as a part of existing <h1> like: "Personal - Appearance and accessibility" like we have it already in a page title.

Could this approach take place? Thank you!

[michaelnissenbaum]

Hi @JuliaKirschenheuter,

I don't believe your proposed solution addresses the issue you described in your comment. The goal is to allow users who rely on assistive technologies, such as screen readers, to easily navigate to the section heading. Your solution does not meet this requirement. Perhaps we should discuss this matter further during a call.