Skip to main content
.accessibilityAddTraits(traits: AccessibilityTraits | AccessibilityTraits[]): Component;

​
Parameters

​
traits
AccessibilityTraits | AccessibilityTraits[]
The accessibility traits to add to this view. Can be a single trait or an array of traits.

​
Support

​
Usage

​
Custom button

Rectangle()
    .fill(Color("blue"))
    .overlay(Text("Custom Button"))
    .accessibilityLabel("Custom action")
    .accessibilityAddTraits("isButton")
    .onTapGesture(() => {
        performAction()
    })

​
Search field

const [searchText, setSearchText] = useState("")

TextField({ placeholder: "Search products...", text: searchText, setText: setSearchText })
    .accessibilityAddTraits("isSearchField")

​
Selected item

HStack([
    Image("checkmark"),
    Text("Selected item")
]).accessibilityAddTraits(["isSelected", "isButton"])
  .onTapGesture(() => {
      toggleSelection()
  })

​
Media player button

Button("Play", () => {})
    .accessibilityAddTraits(["isButton", "startsMediaSession"])
    .onTapGesture(() => {
        startPlayback()
    })

Text("Learn more")
    .foregroundStyle(Color("blue"))
    .accessibilityAddTraits("isLink")
    .onTapGesture(() => {
        openURL("https://example.com")
    })

​
Multiple traits

VStack([
    Image("notification-icon"),
    Text("Updates available")
]).accessibilityAddTraits(["isButton", "updatesFrequently"])
  .onTapGesture(() => {
      checkForUpdates()
  })

​
Header element

Text("Section Title")
    .font(.headline)
    .accessibilityAddTraits("isHeader")

​
Interactive image

Image("photo.jpg")
    .accessibilityLabel("Profile photo")
    .accessibilityAddTraits(["isImage", "isButton"])
    .onTapGesture(() => {
        showFullScreen()
    })