Accessibility

Learn how to build accessible applications with Aviris UI components.

ARIA Attributes

All Aviris UI components are built with proper ARIA attributes for accessibility.

// Example of a button with proper ARIA attributes
<Button
  aria-label="Close dialog"
  aria-expanded={isOpen}
  aria-controls="dialog-content"
>
  Close
</Button>

Keyboard Navigation

Components support full keyboard navigation for better accessibility.

// Example of keyboard navigation in a dropdown
<DropdownMenu>
  <DropdownMenuTrigger asChild>
    <Button>Open Menu</Button>
  </DropdownMenuTrigger>
  <DropdownMenuContent>
    <DropdownMenuItem>Item 1</DropdownMenuItem>
    <DropdownMenuItem>Item 2</DropdownMenuItem>
  </DropdownMenuContent>
</DropdownMenu>

Color Contrast

Our color system ensures sufficient contrast ratios for better readability.

// Example of using semantic color tokens
<div className="bg-background text-foreground">
  <h1 className="text-primary">Accessible Heading</h1>
  <p className="text-muted-foreground">Accessible text</p>
</div>
PreviousBest Practices
NextPerformance