> ## Documentation Index
> Fetch the complete documentation index at: https://docs.metabind.ai/llms.txt
> Use this file to discover all available pages before exploring further.

# Accessibility refinements

> Modifiers for adding traits, hints, and alternative representations for assistive technologies

export const PlatformStatuses = ({statuses}) => {
  const StatusBadge = ({status, label}) => {
    const styles = {
      green: {
        backgroundColor: '#dcfce7',
        color: '#166534'
      },
      orange: {
        backgroundColor: '#fed7aa',
        color: '#9a3412'
      },
      red: {
        backgroundColor: '#fecaca',
        color: '#991b1b'
      },
      gray: {
        backgroundColor: '#f3f4f6',
        color: '#4b5563'
      }
    };
    const baseStyle = {
      display: 'inline-flex',
      alignItems: 'center',
      padding: '0.125rem 0.625rem',
      borderRadius: '9999px',
      fontSize: '0.875rem',
      fontWeight: '500'
    };
    const colorStyle = styles[status] || styles.green;
    return <span style={{
      ...baseStyle,
      ...colorStyle
    }}>
        {label || status}
      </span>;
  };
  const STATUS_CONFIG = {
    supported: {
      label: "Supported",
      color: "green"
    },
    partial: {
      label: "Partial",
      color: "orange"
    },
    "not-implemented": {
      label: "Not Implemented",
      color: "gray"
    }
  };
  const renderCard = (platform, value) => {
    if (!value) return null;
    const {status, note} = typeof value === "string" ? {
      status: value
    } : value;
    const config = STATUS_CONFIG[status];
    if (!config) return null;
    const titleMap = {
      ios: "SwiftUI",
      android: "Jetpack Compose",
      web: "Web"
    };
    return <Card key={platform} title={titleMap[platform] || platform}>
          <StatusBadge status={config.color} label={config.label} />
          {note && <div style={{
      marginTop: '0.5rem',
      fontSize: '0.875rem',
      color: '#6b7280'
    }}>
              {note}
            </div>}
      </Card>;
  };
  if (statuses == null) {
    return null;
  }
  return <Columns cols="3">
      {Object.entries(statuses).map(([platform, value]) => renderCard(platform, value))}
    </Columns>;
};

export const ComposeJS = ({code, name, height}) => {
  const encodedCode = useMemo(() => {
    if (!code) return "";
    try {
      return btoa(code);
    } catch (e) {
      console.error("Failed to encode code", e);
      return "";
    }
  }, [code]);
  if (!encodedCode) {
    return null;
  }
  return <iframe src={`https://www.metabind.ai/embed?code=${encodedCode}&name=${name ?? 'Example'}`} loading="lazy" style={{
    width: "100%",
    height: height || '350px',
    border: "1px solid #e5e7eb",
    borderRadius: "var(--rounded-2xl,1rem)",
    overflow: "hidden"
  }} title="ComposeJS Preview" />;
};

These iOS-only modifiers refine how a component is exposed to assistive technologies like VoiceOver. `accessibilityHint` adds a description of what activating the component will do; `accessibilityAddTraits` marks a component with semantic traits like header or button; `accessibilityRepresentation` swaps in an alternative tree for assistive technologies to traverse.

Pair these with the cross-platform [accessibilityLabel](/bindjs/modifiers/accessibilityLabel) and [accessibilityValue](/bindjs/modifiers/accessibilityValue) modifiers.

## accessibilityHint

Sets a VoiceOver hint that describes the result of interacting with a component.

```typescript theme={null}
.accessibilityHint(hint: string)
```

<ParamField path="hint" type="string" required>
  A description of what happens when the user activates the component. VoiceOver reads this after a short pause following the label.
</ParamField>

<PlatformStatuses
  statuses={{
ios: { status: "supported" },
android: "not-implemented",
web: "not-implemented",
}}
/>

**Describe the result of a tap**

```typescript theme={null}
Button("Delete", () => removeItem())
    .accessibilityHint("Removes the item from your list")
```

**Combined with a label**

```typescript theme={null}
Image({ systemName: "heart.fill" })
    .onTapGesture(() => toggleFavorite())
    .accessibilityLabel("Favorite")
    .accessibilityHint("Adds this item to your favorites")
```

## accessibilityRepresentation

Provides an alternative accessibility representation of a component for assistive technologies.

```typescript theme={null}
.accessibilityRepresentation(content: Component)
```

<ParamField path="content" type="Component" required>
  A component that replaces this component's accessibility tree. Assistive technologies interact with this representation instead of the original component.
</ParamField>

<PlatformStatuses
  statuses={{
ios: { status: "supported" },
android: "not-implemented",
web: "not-implemented",
}}
/>

**Provide a simpler accessibility view for a complex visual**

```typescript theme={null}
ZStack([
    Circle().foregroundStyle(Color("blue")),
    Text("75%").font("caption")
])
    .accessibilityRepresentation(
        Text("Progress: 75 percent")
    )
```

**Replace a custom layout with a descriptive label**

```typescript theme={null}
HStack([
    Image({ systemName: "star.fill" }),
    Image({ systemName: "star.fill" }),
    Image({ systemName: "star.fill" }),
    Image({ systemName: "star" }),
    Image({ systemName: "star" })
])
    .accessibilityRepresentation(
        Text("Rating: 3 out of 5 stars")
    )
```

## accessibilityAddTraits

Adds accessibility traits to a component for assistive technologies like VoiceOver.

```typescript theme={null}
.accessibilityAddTraits(traits: AccessibilityTraits | AccessibilityTraits[])
```

<ParamField path="traits" type="AccessibilityTraits | AccessibilityTraits[]" required>
  One or more accessibility traits to add to the component. See [AccessibilityTraits](/bindjs/types/AccessibilityTraits).
</ParamField>

<PlatformStatuses
  statuses={{
ios: { status: "supported" },
android: "not-implemented",
web: "not-implemented",
}}
/>

**Mark a view as a button**

```typescript theme={null}
Text("Tap me")
    .onTapGesture(() => doSomething())
    .accessibilityAddTraits("isButton")
```

**Mark a view as a header**

```typescript theme={null}
Text("Section Title")
    .font("headline")
    .accessibilityAddTraits("isHeader")
```

**Add multiple traits**

```typescript theme={null}
Image({ url: "banner.jpg" })
    .resizable()
    .accessibilityAddTraits(["isImage", "isHeader"])
```

## See also

* [accessibilityLabel](/bindjs/modifiers/accessibilityLabel) — sets the spoken label for assistive technologies
* [accessibilityValue](/bindjs/modifiers/accessibilityValue) — sets the spoken value
* [accessibilityRemoveTraits](/bindjs/modifiers/accessibilityRemoveTraits) — removes accessibility traits
* [AccessibilityTraits](/bindjs/types/AccessibilityTraits) — available trait values