ARIA stands for **Accessible Rich Internet Applications**. It provides attributes that can add or clarify accessibility information when native [HTML](/courses/html) alone cannot fully describe a custom interface. In [React](/courses/reactjs), ARIA attributes are written directly in [JSX](/courses/reactjs) using their normal hyphenated names. ### Basic Example ```jsx ``` This tells assistive technology whether the related panel is expanded. The panel might be: ```jsx

``` ### ARIA Should Not Replace Native HTML A major accessibility rule is: ```text Use native HTML when possible. Use ARIA when native semantics are not enough. ``` Prefer: ```jsx ``` instead of: ```jsx

Save

``` The native button already provides correct semantics and keyboard behavior. ### Common ARIA Attributes #### aria-label Provides an accessible name when visible text is missing. ```jsx ``` Without the label, a screen reader may only encounter the symbol. #### aria-labelledby Uses another element as the accessible label. ```jsx

Edit Profile

``` #### aria-describedby Connects additional explanatory text. ```jsx

Use at least 8 characters.

``` #### aria-expanded Useful for controls that expand and collapse content: ```jsx ``` #### aria-live Allows dynamic updates to be announced when appropriate. ```jsx

{message}

``` This can be useful for messages such as: ```text Item saved successfully 3 search results found Form submission failed ``` ### ARIA Roles Sometimes custom UI needs a role: ```jsx ``` But adding a role does not automatically implement the expected behavior. For example: ```jsx

``` does not magically become equivalent to a native button. You would still need to implement things such as: ```text Keyboard activation Focusability Disabled behavior Expected interaction semantics ``` ### ARIA Can Make Accessibility Worse If Used Incorrectly Incorrect labels, roles, or state attributes can give assistive technology misleading information. For example: ```jsx