To use, set the accessibilityState to an object with a specific definition. Indicates whether an expandable element is currently expanded or collapsed. Indicates whether an element is currently busy or not. This field can either take a boolean or the 'mixed' string to represent mixed checkboxes. Indicates the state of a checkable element. Indicates whether a selectable element is currently selected or not. Indicates whether the element is disabled or not. toolbar Used to represent a tool bar (a container of action buttons or components).ĭescribes the current state of a component to the user of an assistive technology.ĪccessibilityState is an object.Should be used with accessibilityState checked to indicate if the button is toggled on or off. togglebutton Used to represent a toggle button.text Used when the element should be treated as static text that cannot change.tablist Used to represent a list of tabs.switch Used to represent a switch which can be turned on and off.summary Used when an element can be used to provide a quick summary of current conditions in the app when the app first launches.spinbutton Used to represent a button which opens a list of choices.search Used when the text field element should also be treated as a search field.scrollbar Used to represent a scroll bar.radiogroup Used to represent a group of radio buttons.radio Used to represent a radio button.progressbar Used to represent a component which indicates progress of a task.none Used when the element has no role.menuitem Used to represent an item within a menu.menubar Used when a component is a container of multiple menus.menu Used when the component is a menu of choices.link Used when the element should be treated as a link.keyboardkey Used when the element acts as a keyboard key.imagebutton Used when the element should be treated as a button and is also an image.Can be combined with button or link, for example. image Used when the element should be treated as an image.header Used when an element acts as a header for a content section (e.g.combobox Used when an element represents a combo box, which allows the user to select among several choices.checkbox Used when an element represents a checkbox which can be checked, unchecked, or have mixed checked state.button Used when the element should be treated as a button.alert Used when an element contains important text to be presented to the user.adjustable Used when an element can be 'adjusted' (e.g.accessibilityRole ĪccessibilityRole communicates the purpose of a component to the user of an assistive technology.ĪccessibilityRole can be one of the following: As soon as an end user clicks the TouchableWithoutFeedback, TalkBack reads text in the Text view because of its accessibilityLiveRegion='polite' property. Learn more about contrast ratios.In the above example method addOne changes the state variable count. You can also ensure these elements are accessible by using sufficient color contrast between your element’s text and the element or page’s background colors. Learn more about styling the focused state. Visual focus adds a visible indicator on the active elements while navigating and is necessary for people who primarily use the keyboard to navigate, like power users or people with reduced mobility. To make Tab, Dropdown, Slider, and Navbar elements fully keyboard accessible, you’ll need to set a focus style (known as “visual focus”) on the focused state so site visitors can better wayfind when using a keyboard to navigate. The elements marked as Accessible in the table below provide screen reader and keyboard navigation support without the need for custom code, though you will need to add focused state styles for some elements to make them fully keyboard accessible. You can find and add elements to your project (e.g., sections, buttons, images, etc.) from the Add Elements panel of the Designer.

Accessibility screen reader buttons