Implementing Accessibility Best Practices in Vue

{
  "title": "Implementing Accessibility Best Practices in Vue",
  "description": "Discover strategies for ensuring your Vue applications are accessible to all users, enhancing inclusivity.",
  "category": "Vue Cursor Rules",
  "rules": [
    {
      "id": "vue-accessibility-semantic-html",
      "description": "Ensure the use of semantic HTML elements to improve accessibility and assistive technology support.",
      "severity": "error",
      "check": "template",
      "pattern": [
        {
          "type": "element",
          "name": "div",
          "attributes": [
            {
              "name": "role",
              "value": "button"
            }
          ]
        }
      ],
      "message": "Avoid using <div> with role='button'. Use the <button> element instead for better accessibility."
    },
    {
      "id": "vue-accessibility-aria-attributes",
      "description": "Ensure ARIA attributes are used appropriately to enhance accessibility.",
      "severity": "warning",
      "check": "template",
      "pattern": [
        {
          "type": "element",
          "name": "button",
          "attributes": [
            {
              "name": "aria-label",
              "value": ""
            }
          ]
        }
      ],
      "message": "ARIA attributes should have meaningful values to provide context for assistive technologies."
    },
    {
      "id": "vue-accessibility-keyboard-navigation",
      "description": "Ensure interactive elements are focusable and support keyboard navigation.",
      "severity": "error",
      "check": "template",
      "pattern": [
        {
          "type": "element",
          "name": "div",
          "attributes": [
            {
              "name": "role",
              "value": "button"
            },
            {
              "name": "tabindex",
              "value": ""
            }
          ]
        }
      ],
      "message": "Interactive elements should have a tabindex attribute to ensure they are focusable and accessible via keyboard."
    },
    {
      "id": "vue-accessibility-color-contrast",
      "description": "Ensure sufficient color contrast between text and background for readability.",
      "severity": "warning",
      "check": "style",
      "pattern": [
        {
          "type": "rule",
          "selectors": [
            {
              "type": "class",
              "name": "low-contrast"
            }
          ],
          "declarations": [
            {
              "property": "color",
              "value": "#ccc"
            },
            {
              "property": "background-color",
              "value": "#fff"
            }
          ]
        }
      ],
      "message": "Text and background colors should have a contrast ratio of at least 4.5:1 to ensure readability."
    },
    {
      "id": "vue-accessibility-form-labels",
      "description": "Ensure form inputs have associated labels for accessibility.",
      "severity": "error",
      "check": "template",
      "pattern": [
        {
          "type": "element",
          "name": "input",
          "attributes": [
            {
              "name": "id",
              "value": ""
            }
          ],
          "siblings": [
            {
              "type": "element",
              "name": "label",
              "attributes": [
                {
                  "name": "for",
                  "value": ""
                }
              ]
            }
          ]
        }
      ],
      "message": "Form inputs should have associated <label> elements with matching 'for' attributes to ensure accessibility."
    },
    {
      "id": "vue-accessibility-dynamic-content",
      "description": "Ensure dynamic content updates are announced to assistive technologies.",
      "severity": "warning",
      "check": "template",
      "pattern": [
        {
          "type": "element",
          "name": "div",
          "attributes": [
            {
              "name": "role",
              "value": "alert"
            }
          ]
        }
      ],
      "message": "Use role='alert' to ensure dynamic content updates are announced to users of assistive technologies."
    },
    {
      "id": "vue-accessibility-auto-play-media",
      "description": "Avoid auto-playing media to prevent disruption for users.",
      "severity": "error",
      "check": "template",
      "pattern": [
        {
          "type": "element",
          "name": "video",
          "attributes": [
            {
              "name": "autoplay",
              "value": "true"
            }
          ]
        }
      ],
      "message": "Avoid using autoplay on media elements to prevent unexpected playback that can disrupt users."
    }
  ]
}