Skip to content

Latest commit

 

History

History
35 lines (22 loc) · 1.3 KB

role.md

File metadata and controls

35 lines (22 loc) · 1.3 KB
Raw

Let's discuss the role attribute in conjunction with ARIA (Accessible Rich Internet Applications).

role

The role attribute is used to define the purpose or type of a user interface element, especially when the native HTML semantics are not sufficient. It helps assistive technologies understand the intended meaning of an element.

Example:

<button role="link" onclick="window.location.href='/home'">
  Go to Home
</button>

In this example, the role="link" is used to indicate that the button functions like a link, even though it's implemented as a button.

Best Practices:

  1. Use native HTML elements with appropriate semantics whenever possible. Only use role when necessary.

  2. Choose the most suitable role value for the element's purpose.

  3. Avoid using role to change the inherent meaning of standard HTML elements.

Use Case:

Consider a custom-designed interactive element:

<div role="slider" aria-valuemin="0" aria-valuemax="100" aria-valuenow="50">
  <!-- Slider content goes here -->
</div>

In this case, the role="slider" is used to convey to assistive technologies that the div element represents a slider, and the aria-valuemin, aria-valuemax, and aria-valuenow attributes provide information about the slider's value range and current value.