#####   ######  #####    ###    #   #  ###  #   #  ######
##  ##  ##      ##  ##  ## ##   #   #   #   #   #  ##
#####   ####    #####   #   #   #   #   #   #   #  ####
##  #   ##      ##      ## ##    # #    #    # #   ##
##   #  ######  ##       ###      #    ###    #    ######

$ curl repovive.com/roadmaps/frontend-system-design-interview-prep/accessibility/aria-attributes

░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░████████████████████████████████████████████████████████████████████████████████████████████████

#####   ######  #####    ###    #   #  ###  #   #  ######
##  ##  ##      ##  ##  ## ##   #   #   #   #   #  ##
#####   ####    #####   #   #   #   #   #   #   #  ####
##  #   ##      ##      ## ##    # #    #    # #   ##
##   #  ######  ##       ###      #    ###    #    ######

$ curl repovive.com/roadmaps/frontend-system-design-interview-prep/accessibility/aria-attributes

Repovive

ARIA Attributes - Accessibility | Frontend System Design Interview Prep | Repovive

Repovive.

Frontend System Design Interview Prep17 sections · 206 units12h total

Open in Course

ARIA Attributes

When HTML isn't enough

ARIA (Accessible Rich Internet Applications) adds accessibility information to custom components.

Common attributes:

aria-label: Text label when visible text unavailable
aria-expanded: Whether expandable element is open
aria-hidden: Hide decorative elements from screen readers
aria-live: Announce dynamic content changes
role: Override element's semantic role

First rule of ARIA: Don't use ARIA if native HTML works. ARIA adds complexity.

<button aria-expanded="true" aria-controls="menu">
  Options
</button>