fix(accessibility): fix multiple accessibility issues

[miaulalala]

Overview

This branch addresses multiple accessibility issues across the Nextcloud App Store templates and CSS, improving compliance with WCAG 2.1 guidelines and
screen reader compatibility.

---

Changes

1. Skip-to-content link

Files: base.html, style.css

Added a visually-hidden "Skip to main content" link that becomes visible on keyboard focus.

Why: Keyboard and screen reader users need a way to bypass the navigation bar and jump directly to page content.

References:

• WCAG 2.4.1 — Bypass Blocks (Level A)
• WebAIM: Skip Navigation Links

---

2. <main> landmark

File: base.html

Replaced <div class="container" id="body"> with a <main> element.

Why: Screen readers use landmark elements to navigate the page. <main> clearly identifies the primary content region, enabling users to jump directly to it.

References:

• WCAG 1.3.6 — Identify Purpose (Level AAA)
• MDN: <main> element
• ARIA: main landmark role

---

3. Heading hierarchy

Files: detail.html, style.css

Sidebar metadata headings were <h5> and section headings were a mixed <h3>/<h4> with no logical nesting. All rationalised to <h2> for top-level sections, <h3> for sub-sections
(e.g. "Your comment").

Why: Screen readers navigate by heading level. Skipping from <h1> to <h5> is disorienting and breaks the document outline.

References:

• WCAG 1.3.1 — Info and Relationships (Level A)
• WebAIM: Headings

---

4. Rating image alt text

File: detail.html

The community rating <img> had alt="", making it invisible to screen readers. Replaced with a descriptive alt text using the rating value.

Why: The image conveys meaningful information (the app's rating), so it requires a descriptive alt attribute.

References:

• WCAG 1.1.1 — Non-text Content (Level A)
• WebAIM: Alternative Text

---

5. Logo alt text

File: nav.html

Changed alt="Logo" to alt="Nextcloud" and removed the redundant title attribute.

Why: "Logo" is not descriptive — the alt text should identify what the image represents, not just that it is a logo.

References:

• WCAG 1.1.1 — Non-text Content (Level A)
• WebAIM: Alternative Text — Functional Images

---

6. Carousel controls

File: detail.html

• Moved aria-label from the decorative <span aria-hidden="true"> to the parent <a> element, so the button has an accessible name.
• Changed role="listbox" on the carousel container to role="region" with an aria-label.

Why: The label was being hidden from assistive technology along with the icon. listbox is an interactive widget role that did not apply to a static image container.

References:

• WCAG 4.1.2 — Name, Role, Value (Level A)
• ARIA: aria-label
• ARIA: listbox role
• ARIA: region role

---

7. Sidebar navigation landmark

File: app/base.html

Wrapped the category <ul> in <nav aria-label="App categories">.

Why: <nav> is a landmark element that screen readers expose for direct navigation. The label distinguishes it from other navigation regions on the page.

References:

• WCAG 1.3.6 — Identify Purpose (Level AAA)
• MDN: <nav> element
• ARIA: Landmark Regions

---

8. aria-current="page" on active nav links

File: app/base.html

Added aria-current="page" to the currently active category link.

Why: Without this, screen reader users have no programmatic way to identify which link corresponds to the current page.

References:

• WCAG 4.1.2 — Name, Role, Value (Level A)
• MDN: aria-current
• Léonie Watson: Using aria-current

---

9. Duplicate id on comments heading

File: detail.html

Changed the duplicate id="comments" on the "Your comment" sub-heading to id="your-comment".

Why: Duplicate IDs break anchor links and cause unpredictable behaviour with assistive technologies, which expect IDs to be unique per page.

References:

• WCAG 4.1.1 — Parsing (Level A)
• MDN: id attribute

---

10. role="search" moved to <form>

File: nav.html

Moved role="search" from the <input> element to the parent <form> element.

Why: Per the ARIA specification, search is a landmark role intended for the containing region, not the input control itself.

References:

• ARIA: search landmark role
• WebAIM: Landmarks

---

11. Removed incorrect role="presentation" from <li> elements

Files: list.html, nav.html

Removed role="presentation" from <li> elements inside navigation lists.

Why: This role suppresses native list item semantics, causing screen readers to skip the items entirely and breaking keyboard navigation of the lists.

References:

• WCAG 1.3.1 — Info and Relationships (Level A)
• ARIA: presentation role
• MDN: ARIA none/presentation role

[edward-ly]

Which issues were addressed? Do you mind providing a quick summary?

[edward-ly]

Changes look great so far! Just one question about the "Skip to main content" link: should the text color be white for readability as well, or does it not matter as much?

Here's what the link currently looks like:

[AndyScherzinger]

should the text color be white for readability as well, or does it not matter as much?

Should be white as well I'd say.

Nextcloud server has a nice image there by now but that is not needed or could be a follow-up PR.

[edward-ly]

The text color still hasn't changed for me, but I figured out why: it should be specified here in .skip-to-content:focus rather than in .skip-to-content.