I’m working on a React application where I’m using the Label component from @fluentui/react. I need the NVDA screen reader to announce different text than the one displayed on the screen.

For example, I have a label that displays “Username”, but I want NVDA to announce “Enter your username”.

How can I achieve this? Is there a way to set an accessible name or use aria-label to override the displayed text for screen readers like NVDA?

Here’s a sample of my code:

import React from 'react';
import { Label } from '@fluentui/react';

const MyComponent = () => {
  return (
    <div>
      <Label aria-label="Enter your username">Username</Label>
      <input type="text" id="username" />
    </div>
  );
};

export default MyComponent;

Any help or guidance would be greatly appreciated!

I already tried the aria-label, aria-labelledby and many aria tags but no one is working. I also tried to hide the text but hidden text is not not readable by NVDA