[PR #21703] [CLOSED] fix(a11y): add skip-to-content link, semantic landmarks, and allow viewport zoom #41851

New Issue

GiteaMirror · 2026-04-25T13:57:27-05:00

GiteaMirror commented

2026-04-25 13:57:27 -05:00

📋 Pull Request Information

Original PR: https://github.com/open-webui/open-webui/pull/21703
Author: @Classic298
Created: 2/21/2026
Status: ❌ Closed

Base: dev ← Head: a11y/viewport-skip-link-landmarks

📝 Commits (1)

5c6c175 fix(a11y): add skip-to-content link, semantic landmarks, and allow viewport zoom

📊 Changes

6 files changed (+235 additions, -225 deletions)

View changed files

📝 src/app.html (+191 -197)
📝 src/routes/(app)/+layout.svelte (+17 -13)
📝 src/routes/+error.svelte (+4 -4)
📝 src/routes/+layout.svelte (+8 -4)
📝 src/routes/error/+page.svelte (+11 -7)
📝 src/routes/watch/+page.svelte (+4 -0)

📄 Description

Remove maximum-scale=1 from viewport meta tag to allow users to zoom (WCAG 1.4.4 Resize Text). The previous value prevented pinch-to-zoom and browser zoom on mobile devices.
Add a skip-to-content link in app.html that is visually hidden until focused, allowing keyboard and screen reader users to bypass repetitive navigation and jump directly to the main content area (WCAG 2.4.1 Bypass Blocks).
Wrap AppSidebar in an
landmark and page content in a landmark in the root +layout.svelte, providing proper semantic structure for assistive technologies.
Wrap Sidebar in a
landmark and page content in a landmark in the (app)/+layout.svelte, ensuring the primary app shell has correct landmark roles for screen reader navigation.
Replace generic
wrappers with landmarks and
headings with
elements in +error.svelte and error/+page.svelte for proper heading hierarchy and page structure.
Add rel='noopener noreferrer' to external links on the error page for security best practices.
Add alt text to the splash screen loading image for screen reader users.
Add a visually-hidden loading message on the watch redirect page so screen readers announce the redirect.

Contributor License Agreement

By submitting this pull request, I confirm that I have read and fully agree to the Contributor License Agreement (CLA), and I am providing my contributions under its terms.

Note

Deleting the CLA section will lead to immediate closure of your PR and it will not be merged in.

_{🔄 This issue represents a GitHub Pull Request. It cannot be merged through Gitea due to API limitations.}

## 📋 Pull Request Information **Original PR:** https://github.com/open-webui/open-webui/pull/21703 **Author:** [@Classic298](https://github.com/Classic298) **Created:** 2/21/2026 **Status:** ❌ Closed **Base:** `dev` ← **Head:** `a11y/viewport-skip-link-landmarks` --- ### 📝 Commits (1) - [`5c6c175`](https://github.com/open-webui/open-webui/commit/5c6c1759405945de5afeae6e4e569e5e462a69c1) fix(a11y): add skip-to-content link, semantic landmarks, and allow viewport zoom ### 📊 Changes **6 files changed** (+235 additions, -225 deletions) <details> <summary>View changed files</summary> 📝 `src/app.html` (+191 -197) 📝 `src/routes/(app)/+layout.svelte` (+17 -13) 📝 `src/routes/+error.svelte` (+4 -4) 📝 `src/routes/+layout.svelte` (+8 -4) 📝 `src/routes/error/+page.svelte` (+11 -7) 📝 `src/routes/watch/+page.svelte` (+4 -0) </details> ### 📄 Description - Remove maximum-scale=1 from viewport meta tag to allow users to zoom (WCAG 1.4.4 Resize Text). The previous value prevented pinch-to-zoom and browser zoom on mobile devices. - Add a skip-to-content link in app.html that is visually hidden until focused, allowing keyboard and screen reader users to bypass repetitive navigation and jump directly to the main content area (WCAG 2.4.1 Bypass Blocks). - Wrap AppSidebar in an <aside> landmark and page content in a <main> landmark in the root +layout.svelte, providing proper semantic structure for assistive technologies. - Wrap Sidebar in a <nav> landmark and page content in a <main> landmark in the (app)/+layout.svelte, ensuring the primary app shell has correct landmark roles for screen reader navigation. - Replace generic <div> wrappers with <main> landmarks and <div> headings with <h1> elements in +error.svelte and error/+page.svelte for proper heading hierarchy and page structure. - Add rel='noopener noreferrer' to external links on the error page for security best practices. - Add alt text to the splash screen loading image for screen reader users. - Add a visually-hidden loading message on the watch redirect page so screen readers announce the redirect. ### Contributor License Agreement  By submitting this pull request, I confirm that I have read and fully agree to the [Contributor License Agreement (CLA)](https://github.com/open-webui/open-webui/blob/main/CONTRIBUTOR_LICENSE_AGREEMENT), and I am providing my contributions under its terms. > [!NOTE] > Deleting the CLA section will lead to immediate closure of your PR and it will not be merged in. --- <sub>🔄 This issue represents a GitHub Pull Request. It cannot be merged through Gitea due to API limitations.</sub>

GiteaMirror added the pull-request label 2026-04-25 13:57:27 -05:00

GiteaMirror closed this issue

2026-04-25 13:57:28 -05:00

Sign in to join this conversation.

Branches Tags

1 Participants

Notifications

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: github-starred/open-webui#41851