fix(accessibility): fix multiple accessibility issues#1720
Merged
Conversation
Collaborator
|
Which issues were addressed? Do you mind providing a quick summary? |
edward-ly
reviewed
Mar 22, 2026
Collaborator
edward-ly
left a comment
edward-ly
left a comment
There was a problem hiding this comment.
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:
Member
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. |
Signed-off-by: Anna Larch <anna@nextcloud.com>
miaulalala
force-pushed
the
fix/noid/accessibility-fixes
branch
from
919e410 to
4032177
Compare
edward-ly
requested changes
Mar 23, 2026
The text color was not appearing because color: #fff was set on the base rule rather than the :focus rule where the element becomes visible. Signed-off-by: Anna Larch <anna@nextcloud.com> Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
edward-ly
approved these changes
Mar 26, 2026
Collaborator
edward-ly
left a comment
edward-ly
left a comment
There was a problem hiding this comment.
🚀 Failing tests are unrelated and will be resolved separately.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
3 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
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.cssAdded 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:
2.
<main>landmarkFile:
base.htmlReplaced
<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:
<main>elementmainlandmark role3. Heading hierarchy
Files:
detail.html,style.cssSidebar 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:
4. Rating image alt text
File:
detail.htmlThe community rating
<img>hadalt="", 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
altattribute.References:
5. Logo alt text
File:
nav.htmlChanged
alt="Logo"toalt="Nextcloud"and removed the redundanttitleattribute.Why: "Logo" is not descriptive — the
alttext should identify what the image represents, not just that it is a logo.References:
6. Carousel controls
File:
detail.htmlaria-labelfrom the decorative<span aria-hidden="true">to the parent<a>element, so the button has an accessible name.role="listbox"on the carousel container torole="region"with anaria-label.Why: The label was being hidden from assistive technology along with the icon.
listboxis an interactive widget role that did not apply to a static image container.References:
aria-labellistboxroleregionrole7. Sidebar navigation landmark
File:
app/base.htmlWrapped 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:
<nav>element8.
aria-current="page"on active nav linksFile:
app/base.htmlAdded
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:
aria-currentaria-current9. Duplicate
idon comments headingFile:
detail.htmlChanged the duplicate
id="comments"on the "Your comment" sub-heading toid="your-comment".Why: Duplicate IDs break anchor links and cause unpredictable behaviour with assistive technologies, which expect IDs to be unique per page.
References:
idattribute10.
role="search"moved to<form>File:
nav.htmlMoved
role="search"from the<input>element to the parent<form>element.Why: Per the ARIA specification,
searchis a landmark role intended for the containing region, not the input control itself.References:
searchlandmark role11. Removed incorrect
role="presentation"from<li>elementsFiles:
list.html,nav.htmlRemoved
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:
presentationrolenone/presentationrole