Skip to main content
🚀 re:Imagine QA - See how AI reshapes your SDLC @ AWS re:Invent. Visit BrowserStack Booth!
No Result Found
Connect & Get help from fellow developers on our Discord community. Ask the CommunityAsk the Community

Interactive elements with unsupported type

The rule ensures that custom interactive elements provide a supported class name (or the platform equivalent) to accessibility services. This ensures that assistive technologies correctly identify and announce the element’s role or type.

Assistive technologies, such as screen readers, rely on standard class names to understand the purpose and behavior of UI elements. If custom elements do not provide this information, assistive technologies may:

  • Fail to announce the role of the element.
  • Misrepresent interactive elements.
  • Break the navigation flow.
  • Rule Category : Accessible Elements
  • WCAG 2.1 & 2.2 SC : 1.3.1 (A), 4.1.2 (A)
  • Rule Severity : Serious
  • Supported Platforms and Frameworks: Android, iOS, React Native, Flutter

Success criteria

The specific criteria for success are:

  • Each custom component must expose a supported role or widget type to accessibility services.
  • Information and relationships conveyed by the element must be programmatically determinable.

How to fix

To prevent interactive elements with unsupported types violations, follow these steps:

  • Set standard class names: Set the className to a standard Android widget class, such as android.widget.Button, android.widget.Switch. This ensures custom views or components expose a recognized accessibility role appropriate to the platform.
  • Avoid ambiguous or undefined roles: Ensure custom interactive components do not present a generic or unsupported type like View to accessibility services.
  • Set standard class names: Set the accessibilityTraits property, for example, .button, .switch, to indicate the element’s role. This ensures custom views or components expose a recognized accessibility role appropriate to the platform.
  • Avoid ambiguous or undefined roles: Ensure custom interactive components do not present a generic or unsupported type like View to accessibility services.
  • Set standard class names: Use the accessibilityRole prop to specify the role, such as button, switch, or link. This ensures custom views or components expose a recognized accessibility role appropriate to the platform.
  • Avoid ambiguous or undefined roles
    Ensure custom interactive components do not present a generic or unsupported type like View to accessibility services.
  • Set standard class names: Use the Semantics widget to define the role, such as button, checkbox, or slider. This ensures custom views or components expose a recognized accessibility role appropriate to the platform.
  • Avoid ambiguous or undefined roles
    Ensure custom interactive components do not present a generic or unsupported type like View to accessibility services.

Example

The following Android example report highlights a custom interactive element, MyCustomButton, that is exposed as an unknown widget type.

The App Accessibility issue details window with an "Interactive elements with unsupported type" violation.

Fix

To correct this violation:

  • Update the custom element to expose a supported widget type.
    In this example, set the element’s accessibility class name to android.widget.Button.

The following example scan report highlights an interactive element of type Button that does not expose a supported UIKit control class.

The App Accessibility issue details window with an "Interactive elements with unsupported type" violation.

Fix

To correct this violation:

  • Update the element to expose a supported accessibility traits using the accessibilityTraits attribute.
    In this example, set the trait to .button.

References

We're sorry to hear that. Please share your feedback so we can do better

Contact our Support team for immediate help while we work on improving our docs.

We're continuously improving our docs. We'd love to know what you liked





Thank you for your valuable feedback

Is this page helping you?

Yes
No

We're sorry to hear that. Please share your feedback so we can do better

Contact our Support team for immediate help while we work on improving our docs.

We're continuously improving our docs. We'd love to know what you liked





Thank you for your valuable feedback!

Talk to an Expert
Download Copy Check Circle