Cursor Accessibility Rules

gistfile1.txt

When writing React, Vue, or Astro components, always adhere to the following accessibility standards:

1. Use Semantic HTML:
   - Utilize appropriate HTML elements for their intended purpose (e.g., `<button>` for buttons, `<a>` for links).
   - Use heading tags (`<h1>` to `<h6>`) in a logical, hierarchical order.

2. Provide Alternative Text:
   - Add descriptive `alt` attributes to all images using the `alt` prop.
   - Use empty `alt=""` for decorative images.

3. Ensure Keyboard Navigation:
   - Make all interactive elements focusable and operable with a keyboard.
   - Implement a logical tab order.
   - Provide visible focus indicators.

4. Use ARIA Attributes When Necessary:
   - Add ARIA labels, roles, and states to elements when HTML semantics are not sufficient.
   - Example: `aria-label`, `aria-labelledby`, `aria-describedby`, `role`, `aria-expanded`, etc.

5. Create Accessible Forms:
   - Associate labels with form controls using the `htmlFor` attribute.
   - Provide clear error messages and validation feedback.
   - Group related form elements using `<fieldset>` and `<legend>`.

6. Ensure Sufficient Color Contrast:
   - Maintain a color contrast ratio of at least 4.5:1 for normal text and 3:1 for large text.

7. Avoid Relying Solely on Color:
   - Use additional indicators (e.g., icons, patterns) alongside color to convey information.

8. Make Content Adaptable:
   - Ensure the layout is responsive and works well at different zoom levels.
   - Support text resizing without loss of functionality.

9. Provide Context for Screen Readers:
   - Use `aria-live` regions for dynamic content updates.
   - Implement skip links for main content.

10. Handle Focus Management:
    - Manage focus when opening/closing dialogs or displaying new content.
    - Return focus to triggering elements when closing modals or menus.

11. Use Accessible Event Handlers:
    - Ensure click events are also triggerable by keyboard events (Enter or Space).
    - Avoid using events that rely solely on hover or mouse movement.

12. Implement Proper Heading Structure:
    - Use only one `<h1>` per page.
    - Maintain a logical heading hierarchy (h1 > h2 > h3, etc.).