Search Support

Avoid support scams. We will never ask you to call or text a phone number or share personal information. Please report suspicious activity using the “Report Abuse” option.

Learn More

The accessibility issue with aria-disabled attribute

  • No replies
  • 0 have this problem
  • 6 views
more options
I am currently facing issue with the attribute aria-disabled only in firefox browser. Using nvda reader when I move on to buttons using tab key the reader reads the aria-label of button but it also says button unavailable even when the button has aria-disabled="false".The same behaviour with the narrator it reads it as button disabled. The
  • tag that covers these have aria-disabled="true". But I think that should not have effect on these button elements as I have explicitly gave on the button the aria-disabled="false". Kindly please look into this issue and resolve. Code Sample:
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>List with Accessible Buttons</title>
    </head>
    <body>
            <li aria-disabled="true" >
                Item 1
                <button aria-disabled="false" aria-label="Button 1"  onclick="alert('Button 1 clicked')">Button 1</button>
                <button aria-disabled="false" aria-label="Button 2" onclick="alert('Button 2 clicked')">Button 2</button>
            </li>
            <li aria-disabled="true">
                Item 2
                <button aria-disabled="false" aria-label="Button 3" onclick="alert('Button 3 clicked')">Button 3</button>
                <button aria-disabled="false" aria-label="Button 4" onclick="alert('Button 4 clicked')">Button 4</button>
            </li>
            <li aria-disabled="true">
                Item 3
                <button aria-disabled="false" aria-label="Button 5" onclick="alert('Button 5 clicked')">Button 5</button>
                <button aria-disabled="false" aria-label="Button 6" onclick="alert('Button 6 clicked')">Button 6</button>
            </li>
    </body>
    </html>

  • I am currently facing issue with the attribute aria-disabled only in firefox browser. Using nvda reader when I move on to buttons using tab key the reader reads the aria-label of button but it also says button unavailable even when the button has aria-disabled="false".The same behaviour with the narrator it reads it as button disabled. The <li> tag that covers these have aria-disabled="true". But I think that should not have effect on these button elements as I have explicitly gave on the button the aria-disabled="false". Kindly please look into this issue and resolve. Code Sample: <pre><nowiki><!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>List with Accessible Buttons</title> </head> <body> <li aria-disabled="true" > Item 1 <button aria-disabled="false" aria-label="Button 1" onclick="alert('Button 1 clicked')">Button 1</button> <button aria-disabled="false" aria-label="Button 2" onclick="alert('Button 2 clicked')">Button 2</button> </li> <li aria-disabled="true"> Item 2 <button aria-disabled="false" aria-label="Button 3" onclick="alert('Button 3 clicked')">Button 3</button> <button aria-disabled="false" aria-label="Button 4" onclick="alert('Button 4 clicked')">Button 4</button> </li> <li aria-disabled="true"> Item 3 <button aria-disabled="false" aria-label="Button 5" onclick="alert('Button 5 clicked')">Button 5</button> <button aria-disabled="false" aria-label="Button 6" onclick="alert('Button 6 clicked')">Button 6</button> </li> </body> </html></nowiki></pre><br>

    Modified by cor-el