Creating Accessible Web Applications with TypeScript

# Cursor IDE Rule: Creating Accessible Web Applications with TypeScript

## Title
Creating Accessible Web Applications with TypeScript

## Description
Ensure inclusivity by adhering to best practices for building accessible web applications using TypeScript.

## Category
TypeScript Cursor Rules

## Rules

### 1. Use Semantic HTML Elements
- **Description**: Utilize HTML elements according to their intended purpose to enhance accessibility and SEO.
- **Implementation**:
  - Use `<button>` for clickable actions instead of `<div>` or `<span>`.
  - Employ `<nav>` for navigation links, `<header>` for introductory content, and `<footer>` for closing content.
  - Avoid using `<table>` for layout purposes; reserve it for tabular data. ([rules.sonarsource.com](https://rules.sonarsource.com/typescript/tag/accessibility/rspec-6846/?utm_source=openai))

### 2. Provide Alternative Text for Media
- **Description**: Ensure all media elements have descriptive alternative text to assist users relying on screen readers.
- **Implementation**:
  - Add `alt` attributes to `<img>` tags with concise descriptions.
  - Provide captions or transcripts for audio and video content.
  - Use the `aria-label` attribute for elements where `alt` is not applicable. ([rules.sonarsource.com](https://rules.sonarsource.com/typescript/tag/accessibility/rspec-6811/?utm_source=openai))

### 3. Ensure Keyboard Navigability
- **Description**: Make all interactive elements accessible via keyboard to accommodate users who cannot use a mouse.
- **Implementation**:
  - Ensure all interactive elements are focusable and have a visible focus indicator.
  - Avoid using `tabindex` values greater than 0; use 0 or -1 to manage focus order appropriately. ([rules.sonarsource.com](https://rules.sonarsource.com/typescript/tag/accessibility/rspec-6811/?utm_source=openai))
  - Provide keyboard shortcuts for complex interactions, ensuring they do not conflict with existing browser or assistive technology shortcuts.

### 4. Implement ARIA Roles and Attributes Appropriately
- **Description**: Use Accessible Rich Internet Applications (ARIA) roles and attributes to enhance accessibility without misusing them.
- **Implementation**:
  - Assign appropriate ARIA roles to dynamic content and custom components.
  - Ensure ARIA attributes do not contradict native HTML semantics.
  - Avoid redundant ARIA roles; prefer native HTML elements when possible. ([rules.sonarsource.com](https://rules.sonarsource.com/typescript/tag/accessibility/rspec-6811/?utm_source=openai))

### 5. Manage Focus and Visibility
- **Description**: Control focus and visibility to provide a seamless experience for all users.
- **Implementation**:
  - Use `aria-hidden="true"` to hide non-essential content from assistive technologies.
  - Ensure modal dialogs trap focus within them until dismissed.
  - Avoid removing elements from the DOM without providing alternative navigation cues.

### 6. Validate Forms with Accessible Error Messages
- **Description**: Provide clear and accessible error messages for form validation.
- **Implementation**:
  - Associate error messages with form fields using `aria-describedby`.
  - Ensure error messages are perceivable by screen readers and visually distinguishable.
  - Use `aria-live` regions to announce dynamic validation messages.

### 7. Ensure Sufficient Color Contrast
- **Description**: Maintain adequate color contrast between text and background to enhance readability.
- **Implementation**:
  - Adhere to WCAG guidelines for color contrast ratios.
  - Avoid using color as the sole means of conveying information.
  - Provide alternative indicators (e.g., icons, patterns) alongside color cues.

### 8. Test Accessibility Regularly
- **Description**: Continuously test and improve the accessibility of your application.
- **Implementation**:
  - Use automated tools like Axe or Lighthouse to identify accessibility issues.
  - Conduct manual testing with screen readers and keyboard navigation.
  - Gather feedback from users with disabilities to inform improvements.

## References
- [SonarSource TypeScript Accessibility Rules](https://rules.sonarsource.com/typescript/tag/accessibility/)
- [MDN Web Docs: CSS and JavaScript Accessibility Best Practices](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Accessibility/CSS_and_JavaScript)