[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.

[skjnldsv]

Hi @michaelnissenbaum

The goal is to allow users who rely on assistive technologies, such as screen readers, to easily navigate to the section heading.

No one argue against that, but there is a difference between an optimal solution and what is acceptable to be certified. :)

While I understand splitting the nav would be better (and should ultimately be done), the current navigation is not an issue nor does it mislead users (assuming the heading issue is fixed). Please clarify if this is a blocker for the BITV certifications and, if so, elaborate on the matter.

Otherwise, I would push that as a later fix on the upcoming Nextcloud version (27) without backports.

[michaelnissenbaum]

Hi @skjnldsv , in my opinion, this is not a blocker, and you could postpone the fix until the upcoming Nextcloud version 27.

[skjnldsv]

Thank you very much for the prompt response Michael :)

[AndyScherzinger]

Hi @skjnldsv , in my opinion, this is not a blocker, and you could postpone the fix until the upcoming Nextcloud version 27.

@michaelnissenbaum not to be running into issues then with the certification, for stability issues we are applying all the fixes to v25 at the moment, so we don't change the scope of the software's feature set for the certification. Else this would be a moving target from a project management perspective where timelines would be continuously shifting. Just wanted to put that out for clarity reasons.

[JuliaKirschenheuter]

@skjnldsv what do you mean can this issue be done now without breaking changes for any app in that way: #36915 (comment)?