[BUG] Accessibility Improvement for Screen Reader Users in DeepSeek v3 Chat Feature**

[khsbory]

Hello, I am Hyongsop Kim, a screen reader user with visual impairment, currently using DeepSeek v3. I initially faced difficulties logging in due to the image CAPTCHA, but I was able to log in after receiving a temporary link provided through a GitHub issue. However, I am encountering a critical accessibility issue when trying to use the chat feature with my screen reader.

DeepSeek is a chat service, and as such, when I send a message and receive a response, the screen reader should immediately read out the response. This is essential for receiving real-time feedback and allowing me to quickly send and receive additional messages. Currently, there is no feedback when a message arrives, forcing me to manually search for new messages each time.

To address this, I am sharing a sample code below that can be implemented to improve accessibility for screen reader users. The provided useA11yAnnouncer hook creates a visually hidden area that only the screen reader can access. When a new response is received, the hook announces the message, ensuring that screen reader users receive real-time feedback.

Here is the sample code (written in React):

import { useRef } from 'react';

export function useA11yAnnouncer() {
  const timer = useRef(null);

  const announce = async (message: string) => {
    const style = `border: 0; padding: 0; margin: 0; position: absolute !important;
      height: 1px; width: 1px; overflow: hidden;
      clip: rect(1px 1px 1px 1px); clip: rect(1px, 1px, 1px, 1px); clip-path: inset(50%); white-space: nowrap;`.replaceAll(
      /\n/g,
      ''
    );
    const appendAndAnnounce = async (element: Element, message: string) => {
      return new Promise(resolve => {
        if (!element.querySelector("[name='p_announceForAccessibility']")) {
          const div = document.createElement('div');
          div.setAttribute('name', 'div_announceForAccessibility');
          div.setAttribute('style', style);
          div.innerHTML = '';
          element.appendChild(div);
        }
        const pElement = element.querySelector("[name='p_announceForAccessibility']");

        if (!pElement) {
          return;
        }

        pElement.innerText = '';
        setTimeout(() => {
          pElement.innerText = message;
          resolve(void 0);
        }, 200);
      });
    };
    const announceMessages = async () => {
      if (typeof window !== 'undefined') {
        const bodyElement = document.body;
        const dialogElements = document.body.querySelectorAll(
          '[role="dialog"][aria-modal="true"], dialog'
        );
        await appendAndAnnounce(bodyElement, message);

        dialogElements.forEach(element => {
          appendAndAnnounce(element, message);
        });
      }
    };

    await announceMessages();

    timer.current = window.setTimeout(removeAnnounce, 1000);
  };

  const removeAnnounce = () => {
    if (typeof window !== 'undefined') {
      const divElements = document.body.querySelectorAll("[name='div_announceForAccessibility']");

      if (!divElements || !timer.current) {
        return;
      }

      divElements.forEach(element => {
        element.parentNode?.removeChild(element);
      });

      clearTimeout(timer.current);
      timer.current = null;
    }
  };
  return [announce, removeAnnounce] as const;
}

How to Use the Hook

1. Import the useA11yAnnouncer hook into your chat component.
2. Call the announce function whenever a new message is received. For example:

   const [announce] = useA11yAnnouncer();
   announce("New message received: " + response);

3. The announce function will ensure that the message is read out by the screen reader in real-time.

Key Features

• The hook creates a visually hidden area that is only accessible to screen readers.
• It dynamically announces new messages, ensuring real-time feedback for screen reader users.
• The removeAnnounce function cleans up the temporary elements after the announcement is complete.

If you have any questions or need further clarification during implementation, please feel free to contact me at [email protected].

Thank you for your attention to this matter, and I look forward to seeing these accessibility improvements in DeepSeek v3.

Best regards,
Hyongsop Kim

[khsbory]

Hello, I was wondering if there is any update on the issue I previously reported.
I understand that you are likely busy with various development schedules, and I am not asking for an immediate fix.
However, I would appreciate it if we could continue the discussion on how to address this issue.
For your reference, I am a visually impaired user of DeepSeek, but I am also a developer. Therefore, I believe I can offer assistance in improving the accessibility of your product. I can also communicate in Chinese if needed. I look forward to your response.