{
  "doc": {
    "id": "accessibility/configuration/ignoring-rules-per-element",
    "title": "Ignoring rules for specific elements | Cypress Accessibility",
    "description": "Elements can avoid failing certain rules using a data-a11y-ignore attribute",
    "section": "accessibility",
    "source_path": "/llm/markdown/accessibility/configuration/ignoring-rules-per-element.md",
    "version": "ce02913654e2655ee63448bdc92bb92c7b46a619",
    "updated_at": "2026-04-22T19:37:51.587Z",
    "headings": [
      {
        "id": "accessibility/configuration/ignoring-rules-per-element#ignore-rules-for-specific-elements",
        "text": "Ignore rules for specific elements",
        "level": 1
      },
      {
        "id": "accessibility/configuration/ignoring-rules-per-element#ignore-multiple-rules",
        "text": "Ignore multiple rules",
        "level": 2
      },
      {
        "id": "accessibility/configuration/ignoring-rules-per-element#where-to-find-rule-ids",
        "text": "Where to find rule IDs",
        "level": 2
      },
      {
        "id": "accessibility/configuration/ignoring-rules-per-element#when-to-use-this",
        "text": "When to use this",
        "level": 2
      },
      {
        "id": "accessibility/configuration/ignoring-rules-per-element#handle-false-positives",
        "text": "Handle false positives",
        "level": 3
      },
      {
        "id": "accessibility/configuration/ignoring-rules-per-element#avoid-blocking-a-code-change",
        "text": "Avoid blocking a code change",
        "level": 3
      }
    ]
  },
  "content": {
    "type": "root",
    "children": [
      {
        "type": "heading",
        "depth": 1,
        "children": [
          {
            "type": "text",
            "value": "Ignore rules for specific elements"
          }
        ]
      },
      {
        "type": "paragraph",
        "children": [
          {
            "type": "text",
            "value": "Cypress Accessibility configuration allows you to exclude "
          },
          {
            "type": "link",
            "title": null,
            "url": "/llm/markdown/accessibility/configuration/elementfilters.md",
            "children": [
              {
                "type": "text",
                "value": "elements"
              }
            ]
          },
          {
            "type": "text",
            "value": " or whole "
          },
          {
            "type": "link",
            "title": null,
            "url": "/llm/markdown/accessibility/configuration/viewfilters.md",
            "children": [
              {
                "type": "text",
                "value": "pages"
              }
            ]
          },
          {
            "type": "text",
            "value": " from the accessibility report, but sometimes there are situations where you may want to keep an element in your accessibility report, but ignore some accessibility rules for that element."
          }
        ]
      },
      {
        "type": "paragraph",
        "children": [
          {
            "type": "text",
            "value": "This can be accomplished in your application code using the `data-a11y-ignore` attribute, like this:"
          }
        ]
      },
      {
        "type": "code",
        "lang": "html",
        "meta": null,
        "value": "<button data-a11y-ignore=\"color-contrast\">Log In</button>"
      },
      {
        "type": "paragraph",
        "children": [
          {
            "type": "text",
            "value": "This would mean that if a color contrast violation was detected on this button, it would be tracked and flagged as an ignored violation in your accessibility report, instead of being listed as a failure. Any other violations detected would be flagged as normal failures."
          }
        ]
      },
      {
        "type": "heading",
        "depth": 2,
        "children": [
          {
            "type": "text",
            "value": "Ignore multiple rules"
          }
        ]
      },
      {
        "type": "paragraph",
        "children": [
          {
            "type": "text",
            "value": "Multiple rules can be ignored by using commas to separate a list of rule IDs:"
          }
        ]
      },
      {
        "type": "code",
        "lang": "html",
        "meta": null,
        "value": "<button data-a11y-ignore=\"color-contrast,button-name\">Log In</button>"
      },
      {
        "type": "heading",
        "depth": 2,
        "children": [
          {
            "type": "text",
            "value": "Where to find rule IDs"
          }
        ]
      },
      {
        "type": "paragraph",
        "children": [
          {
            "type": "text",
            "value": "The \"Learn more\" link in your accessibility reports will display the ID for each rule. They can also be looked up in the "
          },
          {
            "type": "link",
            "title": null,
            "url": "https://github.com/dequelabs/axe-core/blob/develop/doc/rule-descriptions.md",
            "children": [
              {
                "type": "text",
                "value": "Axe-Core® rule documentation"
              }
            ]
          },
          {
            "type": "text",
            "value": " directly."
          }
        ]
      },
      {
        "type": "heading",
        "depth": 2,
        "children": [
          {
            "type": "text",
            "value": "When to use this"
          }
        ]
      },
      {
        "type": "heading",
        "depth": 3,
        "children": [
          {
            "type": "text",
            "value": "Handle false positives"
          }
        ]
      },
      {
        "type": "paragraph",
        "children": [
          {
            "type": "text",
            "value": "This is most useful when there is a known false positive failure for a specific rule and you want to remove it from your report without losing all other insights about an element."
          }
        ]
      },
      {
        "type": "paragraph",
        "children": [
          {
            "type": "text",
            "value": "The `data-a11y-ignore` attribute pattern is used in some libraries like Adobe's React Spectrum, so those UI elements automatically have the defined rules ignored correctly in Cypress Accessibility."
          }
        ]
      },
      {
        "type": "heading",
        "depth": 3,
        "children": [
          {
            "type": "text",
            "value": "Avoid blocking a code change"
          }
        ]
      },
      {
        "type": "paragraph",
        "children": [
          {
            "type": "text",
            "value": "A secondary use case is to avoid certain known issues becoming blocking for a pull request. `data-a11y-ignore` allows for a minimal scope of what to ignore, and creates a paper trail through version control which means these changes are obvious at code review, and comments can be added nearby to explain the reason for ignoring the rule."
          }
        ]
      }
    ]
  },
  "token_estimate": 399
}