Make NVDA read button text when click

I'm doing something with NVDA (the screen reader) and with aria too, the thing is that i want to make nvda able to read the content that is in a button as a text. For example, i want it to say "Log in dialogue" instead of "dialogue" in the NVDA speech viwer when click on it.

I tried with many aria roles and do things with aria-describedby, but i can't make it work, can someone help me with this? thanks. Here is the line that i'm trying to modify

<a href="%"<div aria-hidden="true" class="login-icon"></div Login Button</a>

Solution

Try this:

<a href="%" role="button">
   <div aria-hidden="true" class="login-icon"></div> 
   Login Button
</a>

role="button" will make the anchor link work as a button for screen-readers. When you have an anchor tag with text inside it, you need not give aria-describedby or aria-labelledby. If you want the screen-reader to read out something other than the text you put in the anchor tag (in your case 'Login Button'), use aria-label if its a small text, otherwise you can use aria-labelledby if you want to reference any particular div or h2 or h3 with an id.

If you want to use aria-label, you can do this:

<a href="%" role="button" aria-label="Text other than Login Button">
   <div aria-hidden="true" class="login-icon"></div> 
   Login Button
</a>