[PR #16481] [CLOSED] Feature/more accessible chat #39777

Closed
opened 2026-04-25 12:13:48 -05:00 by GiteaMirror · 0 comments
Owner

📋 Pull Request Information

Original PR: https://github.com/open-webui/open-webui/pull/16481
Author: @sinejespersen
Created: 8/11/2025
Status: Closed

Base: devHead: feature/more-accessible-chat


📝 Commits (10+)

  • 219f35c wrap chat in section tag to define a section in a document
  • dbdf1c5 make messages an unordered list for accessibility
  • 85cf60a make "loading" string translatable
  • d04ad72 make messages articles and role=group them for accessibility
  • 0f4fed1 add h2 to chats with message sender and hide image
  • 8f327f8 add message timestamp to aria-labelledby for accessibility
  • f2b3cfb make timestamp visible all the time and have higher contrast (highContrastMode)
  • eb0ce79 make buttons visible all the time on high contrast mode
  • bd8c803 add aria labels and aria hiddens
  • 049005b remove extra message for screen readers

📊 Changes

6 files changed (+119 additions, -65 deletions)

View changed files

backend/open_webui/static/user.png (+0 -0)
📝 src/lib/components/chat/Messages.svelte (+34 -31)
📝 src/lib/components/chat/Messages/Message.svelte (+2 -2)
📝 src/lib/components/chat/Messages/ProfileImage.svelte (+1 -0)
📝 src/lib/components/chat/Messages/ResponseMessage.svelte (+29 -22)
📝 src/lib/components/chat/Messages/UserMessage.svelte (+53 -10)

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

Trying to solve some of these: https://github.com/open-webui/open-webui/issues/16361#issuecomment-3166024905

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

Changelog Entry

Description

  • Use semantic html in a bunch of places to increase accessibility (<section />, <article />, <ul />, <li />)
  • Make a string translatable
  • Add aria-label's and aria-hidden's
  • Make elements visible on highContrastMode
  • Increase contrast between elements on highContrastMode

Added

N/A

Changed

N/A

Deprecated

N/A

Removed

N/A

Fixed

N/A

Security

N/A

Breaking Changes

N/A


Additional Information

N/A

Screenshots or Videos

High contrast mode

Screenshot 2025-08-11 at 12 48 45

Not high contrast mode

Screenshot 2025-08-11 at 12 48 26

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.


🔄 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/16481 **Author:** [@sinejespersen](https://github.com/sinejespersen) **Created:** 8/11/2025 **Status:** ❌ Closed **Base:** `dev` ← **Head:** `feature/more-accessible-chat` --- ### 📝 Commits (10+) - [`219f35c`](https://github.com/open-webui/open-webui/commit/219f35c4a9fc80eecd410671783277c10d479e0b) wrap chat in section tag to define a section in a document - [`dbdf1c5`](https://github.com/open-webui/open-webui/commit/dbdf1c570d0237208d56c8fca503137bd0c3b74b) make messages an unordered list for accessibility - [`85cf60a`](https://github.com/open-webui/open-webui/commit/85cf60a22d504cc292dffa7550d2ff98b2f0851c) make "loading" string translatable - [`d04ad72`](https://github.com/open-webui/open-webui/commit/d04ad725b5cc9d7b13feaadb1ee12e79272d663d) make messages articles and role=group them for accessibility - [`0f4fed1`](https://github.com/open-webui/open-webui/commit/0f4fed11d9b64a057440f66dc43f5aad7748c20d) add h2 to chats with message sender and hide image - [`8f327f8`](https://github.com/open-webui/open-webui/commit/8f327f83008504aba2302664800aa9dce1c663f2) add message timestamp to aria-labelledby for accessibility - [`f2b3cfb`](https://github.com/open-webui/open-webui/commit/f2b3cfbcbb088b8b50659c3ca6d7f171ca0c5ae1) make timestamp visible all the time and have higher contrast (highContrastMode) - [`eb0ce79`](https://github.com/open-webui/open-webui/commit/eb0ce79a52f39c032ab83e252a6e7dd9d7bafaf4) make buttons visible all the time on high contrast mode - [`bd8c803`](https://github.com/open-webui/open-webui/commit/bd8c8034495313672543d4beac90cb4e3b862aeb) add aria labels and aria hiddens - [`049005b`](https://github.com/open-webui/open-webui/commit/049005bafa3a9dc1c98bf9a5810df4cbdc481d22) remove extra message for screen readers ### 📊 Changes **6 files changed** (+119 additions, -65 deletions) <details> <summary>View changed files</summary> ➖ `backend/open_webui/static/user.png` (+0 -0) 📝 `src/lib/components/chat/Messages.svelte` (+34 -31) 📝 `src/lib/components/chat/Messages/Message.svelte` (+2 -2) 📝 `src/lib/components/chat/Messages/ProfileImage.svelte` (+1 -0) 📝 `src/lib/components/chat/Messages/ResponseMessage.svelte` (+29 -22) 📝 `src/lib/components/chat/Messages/UserMessage.svelte` (+53 -10) </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. Trying to solve some of these: https://github.com/open-webui/open-webui/issues/16361#issuecomment-3166024905 **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? - [ ] **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 - Use semantic html in a bunch of places to increase accessibility (`<section />`, `<article />`, `<ul />`, `<li />`) - Make a string translatable - Add `aria-label`'s and `aria-hidden`'s - Make elements visible on `highContrastMode` - Increase contrast between elements on `highContrastMode` ### Added N/A ### Changed N/A ### Deprecated N/A ### Removed N/A ### Fixed N/A ### Security N/A ### Breaking Changes N/A --- ### Additional Information N/A ### Screenshots or Videos **High contrast mode** <img width="1105" height="512" alt="Screenshot 2025-08-11 at 12 48 45" src="https://github.com/user-attachments/assets/3775981e-bc81-436b-8819-ca882c70f344" /> **Not high contrast mode** <img width="1104" height="658" alt="Screenshot 2025-08-11 at 12 48 26" src="https://github.com/user-attachments/assets/b548c146-7688-4cf6-b364-3d8903b949ae" /> ### 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. --- <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 12:13:48 -05:00
Sign in to join this conversation.
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: github-starred/open-webui#39777