diff --git a/accessible/generic/Accessible.cpp b/accessible/generic/Accessible.cpp
index 6121db9435ad..5aea58dc8219 100644
--- a/accessible/generic/Accessible.cpp
+++ b/accessible/generic/Accessible.cpp
@@ -302,6 +302,10 @@ uint64_t Accessible::VisibilityState() const {
     return states::INVISIBLE;
   }
 
+  if (frame->Style()->IsInOpacityZeroSubtree()) {
+    return states::INVISIBLE;
+  }
+
   if (!frame->StyleVisibility()->IsVisible()) return states::INVISIBLE;
 
   // It's invisible if the presshell is hidden by a visibility:hidden element in
diff --git a/accessible/tests/mochitest/states/test_visibility.html b/accessible/tests/mochitest/states/test_visibility.html
index aa3643673a4b..f5546df803b5 100644
--- a/accessible/tests/mochitest/states/test_visibility.html
+++ b/accessible/tests/mochitest/states/test_visibility.html
@@ -23,6 +23,8 @@
       testStates("div_transformed", STATE_OFFSCREEN, 0, STATE_INVISIBLE);
       testStates("div_abschild", 0, 0, STATE_INVISIBLE | STATE_OFFSCREEN);
       testStates("ul", STATE_OFFSCREEN, 0, STATE_INVISIBLE);
+      testStates("transparent", STATE_INVISIBLE, 0, STATE_OFFSCREEN);
+      testStates("transparent_child", STATE_INVISIBLE, 0, STATE_OFFSCREEN);
 
       SimpleTest.finish();
     }
@@ -70,6 +72,10 @@
       <li>Supermarket 1</li>
       <li>Supermarket 2</li>
     </ul>
+
+    <div id="transparent" style="opacity: 0">
+      <p id="transparent_child">hello</p>
+    </div>
   </div>
 </body>
 </html>