Note to first-time contributors: Please open a discussion post in Discussions and describe your changes before submitting a pull request.
Before submitting, make sure you've checked the following:
Target branch: Please verify that the pull request targets the dev branch.
Description: Provide a concise description of the changes made in this pull request.
Changelog: Ensure a changelog entry following the format of Keep a Changelog is added at the bottom of the PR description.
Documentation: Have you updated relevant documentation Open WebUI Docs, or other documentation sources?
Dependencies: Are there any new dependencies? Have you updated the dependency versions in the documentation?
Testing: Have you written and run sufficient tests to validate the changes?
Code review: Have you performed a self-review of your code, addressing any coding standard issues and ensuring adherence to the project's coding standards?
Prefix: To clearly categorize this pull request, prefix the pull request title using one of the following:
BREAKING CHANGE: Significant changes that may affect compatibility
build: Changes that affect the build system or external dependencies
ci: Changes to our continuous integration processes or workflows
chore: Refactor, cleanup, or other non-functional code changes
docs: Documentation update or addition
feat: Introduces a new feature or enhancement to the codebase
fix: Bug fix or error correction
i18n: Internationalization or localization changes
perf: Performance improvement
refactor: Code restructuring for better maintainability, readability, or scalability
style: Changes that do not affect the meaning of the code (white space, formatting, missing semi-colons, etc.)
test: Adding missing tests or correcting existing tests
WIP: Work in progress, a temporary label for incomplete or ongoing work
Make alt text in logo an empty text string "", as per SC 1.1.1: Non-text Content (Level A), with the argument that the logo is decorative, not a link and also the text "logo" doesn't matter.
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.
Make alt text in logo an empty text string "", as per SC 1.1.1: Non-text Content (Level A), with the argument that the logo is decorative, not a link and also the text "logo" doesn't matter.
🔄 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/13566
**Author:** [@sinejespersen](https://github.com/sinejespersen)
**Created:** 5/6/2025
**Status:** ✅ Merged
**Merged:** 5/7/2025
**Merged by:** [@tjbck](https://github.com/tjbck)
**Base:** `dev` ← **Head:** `8908-accessibility-enhancements`
---
### 📝 Commits (6)
- [`0889dd3`](https://github.com/open-webui/open-webui/commit/0889dd3a510993b83adf0aaa521e3d29b1151dcd) add close label to close button in changelog modal, only accessible for screen readers
- [`86ce111`](https://github.com/open-webui/open-webui/commit/86ce111edde71e59c59b277b7406f9c9fb4cde46) Add aria-labelledby to icon-button to make assistive tech able to give info on what user can expect from button
- [`8c6f4f6`](https://github.com/open-webui/open-webui/commit/8c6f4f6579bfd148555ce04494eb7fd800cb80c0) change divs to labels, as this is what they semantically are
- [`c4a3a9c`](https://github.com/open-webui/open-webui/commit/c4a3a9c6166813ec646462b2ccd788180d522c09) fix text-contrast from 3.71 to 7.55 on dark mode
- [`9d8d439`](https://github.com/open-webui/open-webui/commit/9d8d4393a6277984d45fe5fed3bd076fdc213674) remove alt text from logo, as this is decorative and provides no value for assistive tech users
- [`263086a`](https://github.com/open-webui/open-webui/commit/263086aa91f51e6a41e72476f4bfedac93a1b154) break and indent divs
### 📊 Changes
**3 files changed** (+23 additions, -10 deletions)
<details>
<summary>View changed files</summary>
📝 `src/lib/components/ChangelogModal.svelte` (+1 -0)
📝 `src/lib/components/OnBoarding.svelte` (+4 -3)
📝 `src/routes/auth/+page.svelte` (+18 -7)
</details>
### 📄 Description
# Pull Request Checklist
### Note to first-time contributors: Please open a discussion post in [Discussions](https://github.com/open-webui/open-webui/discussions) and describe your changes before submitting a pull request.
**Before submitting, make sure you've checked the following:**
- [x] **Target branch:** Please verify that the pull request targets the `dev` branch.
- [x] **Description:** Provide a concise description of the changes made in this pull request.
- [x] **Changelog:** Ensure a changelog entry following the format of [Keep a Changelog](https://keepachangelog.com/) is added at the bottom of the PR description.
- [ ] **Documentation:** Have you updated relevant documentation [Open WebUI Docs](https://github.com/open-webui/docs), or other documentation sources?
- [ ] **Dependencies:** Are there any new dependencies? Have you updated the dependency versions in the documentation?
- [ ] **Testing:** Have you written and run sufficient tests to validate the changes?
- [x] **Code review:** Have you performed a self-review of your code, addressing any coding standard issues and ensuring adherence to the project's coding standards?
- [x] **Prefix:** To clearly categorize this pull request, prefix the pull request title using one of the following:
- **BREAKING CHANGE**: Significant changes that may affect compatibility
- **build**: Changes that affect the build system or external dependencies
- **ci**: Changes to our continuous integration processes or workflows
- **chore**: Refactor, cleanup, or other non-functional code changes
- **docs**: Documentation update or addition
- **feat**: Introduces a new feature or enhancement to the codebase
- **fix**: Bug fix or error correction
- **i18n**: Internationalization or localization changes
- **perf**: Performance improvement
- **refactor**: Code restructuring for better maintainability, readability, or scalability
- **style**: Changes that do not affect the meaning of the code (white space, formatting, missing semi-colons, etc.)
- **test**: Adding missing tests or correcting existing tests
- **WIP**: Work in progress, a temporary label for incomplete or ongoing work
# Changelog Entry
### Description
As per https://github.com/open-webui/open-webui/discussions/8908
- Change `<div` to `<label` as per [Success Criterion 1.3.1: Info and Relationships](https://www.w3.org/WAI/WCAG21/Understanding/info-and-relationships)
- Add `aria-labelledby`to `<button`as per [Success Criterion 1.3.1: Info and Relationships](https://www.w3.org/WAI/WCAG21/Understanding/info-and-relationships)
- Add label to `<button` as per [Success Criterion 1.3.1: Info and Relationships](https://www.w3.org/WAI/WCAG21/Understanding/info-and-relationships) and [2.4.6 – Headings and Labels (Level AA)](https://www.w3.org/WAI/WCAG21/Understanding/headings-and-labels.html) and [4.1.2 – Name, Role, Value (Level A)](https://www.w3.org/WAI/WCAG21/Understanding/name-role-value.html).
- Make `alt` text in logo an empty text string `""`, as per [SC 1.1.1: Non-text Content (Level A)](https://w3.org/TR/WCAG21#non-text-content), with the argument that the logo is decorative, not a link and also the text `"logo"` doesn't matter.
- Improve text contrast from 3.71 to 7.55 in light mode, preserve dark mode look (yay tailwind), as per [1.4.3 – Contrast (Minimum) (Level AA)](https://www.w3.org/WAI/WCAG21/Understanding/contrast-minimum.html) and [1.4.6 – Contrast (Enhanced) (Level AAA)](https://www.w3.org/WAI/WCAG21/Understanding/contrast-enhanced.html)
### Added
N/A
### Changed
- Improved accessibility
### Deprecated
N/A
### Removed
N/A
### Fixed
N/A
### Security
N/A
### Breaking Changes
N/A
### Additional Information
N/A
### Screenshots or Videos
Example of button label in html:
<img width="1680" alt="Screenshot 2025-05-06 at 09 13 04" src="https://github.com/user-attachments/assets/f9e7becf-bcfc-4041-9554-7ff4de44d49c" />
Contrast:
<img width="439" alt="image" src="https://github.com/user-attachments/assets/10923822-23f1-4732-b39d-72c9555df934" />
### Contributor License Agreement
By submitting this pull request, I confirm that I have read and fully agree to the [Contributor License Agreement (CLA)](/CONTRIBUTOR_LICENSE_AGREEMENT), and I am providing my contributions under its terms.
# Changelog entry
## Description
There are a bunch of accessibility issues with the frontend. This solves some of them: labels for inputs, labels for buttons and contrast. It is described better in: https://github.com/open-webui/open-webui/discussions/8908
## Changed
- Change `<div` to `<label` as per [Success Criterion 1.3.1: Info and Relationships](https://www.w3.org/WAI/WCAG21/Understanding/info-and-relationships)
- Add `aria-labelledby`to `<button`as per [Success Criterion 1.3.1: Info and Relationships](https://www.w3.org/WAI/WCAG21/Understanding/info-and-relationships)
- Add label to `<button` as per [Success Criterion 1.3.1: Info and Relationships](https://www.w3.org/WAI/WCAG21/Understanding/info-and-relationships) and [2.4.6 – Headings and Labels (Level AA)](https://www.w3.org/WAI/WCAG21/Understanding/headings-and-labels.html) and [4.1.2 – Name, Role, Value (Level A)](https://www.w3.org/WAI/WCAG21/Understanding/name-role-value.html).
- Make `alt` text in logo an empty text string `""`, as per [SC 1.1.1: Non-text Content (Level A)](https://w3.org/TR/WCAG21#non-text-content), with the argument that the logo is decorative, not a link and also the text `"logo"` doesn't matter.
- Improve text contrast from 3.71 to 7.55 in light mode, preserve dark mode look (yay tailwind), as per [1.4.3 – Contrast (Minimum) (Level AA)](https://www.w3.org/WAI/WCAG21/Understanding/contrast-minimum.html) and [1.4.6 – Contrast (Enhanced) (Level AAA)](https://www.w3.org/WAI/WCAG21/Understanding/contrast-enhanced.html)
## Additional information
N/A
---
<sub>🔄 This issue represents a GitHub Pull Request. It cannot be merged through Gitea due to API limitations.</sub>
Blocking a user prevents them from interacting with repositories, such as opening or commenting on pull requests or issues. Learn more about blocking a user.
📋 Pull Request Information
Original PR: https://github.com/open-webui/open-webui/pull/13566
Author: @sinejespersen
Created: 5/6/2025
Status: ✅ Merged
Merged: 5/7/2025
Merged by: @tjbck
Base:
dev← Head:8908-accessibility-enhancements📝 Commits (6)
0889dd3add close label to close button in changelog modal, only accessible for screen readers86ce111Add aria-labelledby to icon-button to make assistive tech able to give info on what user can expect from button8c6f4f6change divs to labels, as this is what they semantically arec4a3a9cfix text-contrast from 3.71 to 7.55 on dark mode9d8d439remove alt text from logo, as this is decorative and provides no value for assistive tech users263086abreak and indent divs📊 Changes
3 files changed (+23 additions, -10 deletions)
View changed files
📝
src/lib/components/ChangelogModal.svelte(+1 -0)📝
src/lib/components/OnBoarding.svelte(+4 -3)📝
src/routes/auth/+page.svelte(+18 -7)📄 Description
Pull Request Checklist
Note to first-time contributors: Please open a discussion post in Discussions and describe your changes before submitting a pull request.
Before submitting, make sure you've checked the following:
devbranch.Changelog Entry
Description
As per https://github.com/open-webui/open-webui/discussions/8908
<divto<labelas per Success Criterion 1.3.1: Info and Relationshipsaria-labelledbyto<buttonas per Success Criterion 1.3.1: Info and Relationships<buttonas per Success Criterion 1.3.1: Info and Relationships and 2.4.6 – Headings and Labels (Level AA) and 4.1.2 – Name, Role, Value (Level A).alttext in logo an empty text string"", as per SC 1.1.1: Non-text Content (Level A), with the argument that the logo is decorative, not a link and also the text"logo"doesn't matter.Added
N/A
Changed
Deprecated
N/A
Removed
N/A
Fixed
N/A
Security
N/A
Breaking Changes
N/A
Additional Information
N/A
Screenshots or Videos
Example of button label in html:
Contrast:
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.
Changelog entry
Description
There are a bunch of accessibility issues with the frontend. This solves some of them: labels for inputs, labels for buttons and contrast. It is described better in: https://github.com/open-webui/open-webui/discussions/8908
Changed
<divto<labelas per Success Criterion 1.3.1: Info and Relationshipsaria-labelledbyto<buttonas per Success Criterion 1.3.1: Info and Relationships<buttonas per Success Criterion 1.3.1: Info and Relationships and 2.4.6 – Headings and Labels (Level AA) and 4.1.2 – Name, Role, Value (Level A).alttext in logo an empty text string"", as per SC 1.1.1: Non-text Content (Level A), with the argument that the logo is decorative, not a link and also the text"logo"doesn't matter.Additional information
N/A
🔄 This issue represents a GitHub Pull Request. It cannot be merged through Gitea due to API limitations.