#Accessibility

#Overview

To better support visually impaired users, mini apps support configuring accessibility attributes. Accessibility features are available in screen reader mode. You can enable screen readers as follows:

• iOS: Settings → General → Accessibility → VoiceOver
• Android: Settings → Accessibility → TalkBack

Take the View component as an example. You can add role and aria-label attributes to it. The role attribute defines the semantic role of the component — for instance, setting it to 'img' causes the screen reader to announce "image" when focused, and setting it to 'button' causes it to announce "button". The aria-label attribute provides additional descriptive text that the screen reader will announce when the element is focused.

#Accessibility Styles

The base library automatically manages the accessibility style switch. When accessibility styles are enabled, it adds data-a11y="true" to the HTML root node; when disabled, it removes the attribute. You do not need to set this attribute manually. Instead, use it in selectors to provide higher contrast, clearer focus states, or larger touch targets in accessibility mode.

[data-a11y='true'] .action-btn {
  min-height: 96rpx;
  outline: 4rpx solid #1677ff;
}

The following ARIA attributes can be passed as props to any component to define custom accessibility semantics.

#Accessibility Properties

#Built-in ARIA Properties

The following components have built-in ARIA attributes that are set automatically — no manual configuration required:

#Examples

#Add role and aria-label to a View

import React from 'react';
import { View, Text } from '@ray-js/ray';

export default function AccessibilityDemo() {
  return (
    <View
      role="button"
      aria-label="Close dialog"
      tabindex="0"
      style={{ padding: '20rpx', background: '#f0f0f0', display: 'inline-block' }}
    >
      <Text>x</Text>
    </View>
  );
}

#Frequently Asked Questions

I passed a role to Button, but it doesn't seem to work. Why?

Button has a built-in role="button". Any custom role passed to it will be overridden by the built-in value. To use a custom semantic role, use View or another element without a built-in role.

Which takes precedence when both aria-label and inner text are present?

Assistive technology generally prioritizes aria-label over inner text. If the component's inner text already conveys the meaning clearly, there is no need to set aria-label. For elements like icon-only buttons that lack descriptive text, always set aria-label.

How should I choose a value for tabindex?

Use only 0 or -1. A value of 0 adds the element to the natural Tab order; -1 makes it programmatically focusable but excludes it from Tab navigation. Avoid positive integers, as they disrupt the natural Tab order.