Avatar for Username

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

This thread was archived. Please ask a new question if you need help.

The accessibility issue with aria-disabled attribute

  • No replies
  • 0 have this problem
  • 6 views
mohdmuzammil1532002
mohdmuzammil1532002
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