ARIA (Accessible Rich Internet Applications) roles and attributes are HTML attributes that help enhance the accessibility of web content for users with disabilities

• role="button": This role is used to indicate that an element functions as a button, even if it's not a native <button> element. It helps screen readers and other assistive technologies identify interactive elements that trigger actions.

<div role="button" tabindex="0" onclick="handleButtonClick()">Click me</div>

• role="link": Similar to the button role, this indicates that an element functions as a hyperlink, allowing screen readers to identify and announce it as a clickable link.

<div role="link" tabindex="0" onclick="handleLinkClick()">Learn more</div>

• aria-label: This attribute provides a descriptive label for an element when the visible text alone is not sufficient for users of assistive technologies. It helps convey the purpose or function of the element.

<button aria-label="Close modal" onclick="closeModal()">X</button>

• aria-labelledby: This attribute references the ID of another element that serves as the label for the current element. It is useful for associating an element with its label when the label is located elsewhere on the page.

<div id="modalTitle">Modal Title</div>
<div role="dialog" aria-labelledby="modalTitle">...</div>

• aria-describedby: Similar to aria-labelledby, this attribute references the ID of another element that provides a description or additional information about the current element.

<input type="password" aria-describedby="passwordHelpBlock">
<div id="passwordHelpBlock">Password must be at least 8 characters long</div>

• aria-expanded: This attribute indicates whether a collapsible element, such as an accordion section or dropdown menu, is currently expanded or collapsed.

<button aria-expanded="false" aria-controls="collapseContent" onclick="toggleCollapse()">Toggle content</button>
<div id="collapseContent" hidden>...</div>

• aria-live: This attribute specifies that updates to the content within an element should be announced to screen reader users immediately (live region).

<div aria-live="assertive" id="liveRegion">New message received</div>

These are just a few examples of how ARIA roles and attributes can be used to enhance accessibility by providing additional context and semantics to web content.