Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[BUG] Accessibility Enhancement: Screen Reader Support for Toggle Buttons in DeepSeek Chat #246

Open
khsbory opened this issue Jan 8, 2025 · 0 comments

Comments

@khsbory
Copy link

khsbory commented Jan 8, 2025

Hello,

I am a visually impaired user who relies on a screen reader to interact with DeepSeek v3. I've identified an accessibility issue with the toggle buttons in the chat interface that needs attention.

Current Issue

On the DeepSeek chat page, there are two toggle buttons for "Search" and "Deep Think" functionalities. While these buttons allow users to enable/disable their respective features, their current state (on/off) is not properly announced by screen readers. This makes it impossible for screen reader users to know whether a feature is currently enabled or disabled.

Proposed Solution

This accessibility issue can be easily resolved by implementing the aria-pressed attribute on the toggle buttons. The attribute should dynamically update between true and false based on the button's state.

Implementation Details

Here's a Next.js implementation example for accessible toggle buttons:

const ToggleButton = ({ isPressed, onPress, label }) => {
  return (
    <button
      aria-pressed={isPressed}
      onClick={onPress}
    >
      {label}
    </button>
  );
};

// Usage example:
const ChatInterface = () => {
  const [isSearchEnabled, setIsSearchEnabled] = useState(false);
  const [isDeepThinkEnabled, setIsDeepThinkEnabled] = useState(false);

  return (
    <div>
      <ToggleButton
        isPressed={isSearchEnabled}
        onPress={() => setIsSearchEnabled(!isSearchEnabled)}
        label="Search"
      />
      <ToggleButton
        isPressed={isDeepThinkEnabled}
        onPress={() => setIsDeepThinkEnabled(!isDeepThinkEnabled)}
        label="Deep Think"
      />
    </div>
  );
};

Expected Behavior

With this implementation:

  1. Screen readers will announce these elements as toggle buttons
  2. The current state (pressed/not pressed) will be properly announced
  3. Users will receive clear feedback about the feature's state when navigating the interface

Benefits

This enhancement will significantly improve the user experience for visually impaired users while maintaining the existing functionality for all users.

Could you please implement this accessibility enhancement in the next update?

Thank you for your attention to this matter.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant