112 lines
3.3 KiB
JSON
112 lines
3.3 KiB
JSON
{
|
|
"$schema": "../schemas/rule.schema.json",
|
|
"id": "accessibility",
|
|
"version": "1.0.0",
|
|
"name": "Accessibility Rules",
|
|
"description": "WCAG 2.1 AA compliance rules for accessible design",
|
|
"category": "accessibility",
|
|
"severity": "error",
|
|
"rules": [
|
|
{
|
|
"id": "images-have-alt",
|
|
"name": "Images Must Have Alt Text",
|
|
"description": "All img elements must have meaningful alt text or be marked decorative",
|
|
"severity": "error",
|
|
"wcag": "1.1.1",
|
|
"validation": {
|
|
"type": "attribute-required",
|
|
"element": "img",
|
|
"attribute": "alt",
|
|
"allowEmpty": true,
|
|
"emptyMeansDecorative": true
|
|
}
|
|
},
|
|
{
|
|
"id": "buttons-have-text",
|
|
"name": "Buttons Must Have Accessible Names",
|
|
"description": "Button elements must have visible text or aria-label",
|
|
"severity": "error",
|
|
"wcag": "4.1.2",
|
|
"validation": {
|
|
"type": "accessible-name",
|
|
"elements": ["button", "[role=button]"],
|
|
"sources": ["text content", "aria-label", "aria-labelledby"]
|
|
}
|
|
},
|
|
{
|
|
"id": "form-labels",
|
|
"name": "Form Inputs Must Have Labels",
|
|
"description": "All form inputs must be associated with a label",
|
|
"severity": "error",
|
|
"wcag": "1.3.1",
|
|
"validation": {
|
|
"type": "label-association",
|
|
"elements": ["input", "select", "textarea"],
|
|
"methods": ["for/id", "aria-labelledby", "aria-label", "wrapper"]
|
|
}
|
|
},
|
|
{
|
|
"id": "focus-visible",
|
|
"name": "Focus Must Be Visible",
|
|
"description": "Interactive elements must have visible focus indicators",
|
|
"severity": "error",
|
|
"wcag": "2.4.7",
|
|
"validation": {
|
|
"type": "focus-style",
|
|
"minContrastRatio": 3.0,
|
|
"forbiddenPatterns": ["outline: none", "outline: 0", ":focus { outline: none }"]
|
|
}
|
|
},
|
|
{
|
|
"id": "color-not-only",
|
|
"name": "Color Not Only Indicator",
|
|
"description": "Information must not be conveyed by color alone",
|
|
"severity": "warning",
|
|
"wcag": "1.4.1",
|
|
"guidelines": [
|
|
"Error states need icon + color + text",
|
|
"Links in text need underline or other indicator",
|
|
"Status indicators need icon or pattern"
|
|
]
|
|
},
|
|
{
|
|
"id": "touch-target-size",
|
|
"name": "Minimum Touch Target Size",
|
|
"description": "Interactive elements must be at least 44x44 CSS pixels",
|
|
"severity": "warning",
|
|
"wcag": "2.5.5",
|
|
"validation": {
|
|
"type": "size-check",
|
|
"minWidth": 44,
|
|
"minHeight": 44,
|
|
"elements": ["button", "a", "[role=button]", "input[type=checkbox]", "input[type=radio]"]
|
|
}
|
|
},
|
|
{
|
|
"id": "keyboard-navigation",
|
|
"name": "Keyboard Navigation",
|
|
"description": "All functionality must be accessible via keyboard",
|
|
"severity": "error",
|
|
"wcag": "2.1.1",
|
|
"validation": {
|
|
"type": "keyboard-accessible",
|
|
"requirements": [
|
|
"All interactive elements focusable",
|
|
"No keyboard traps",
|
|
"Logical tab order",
|
|
"Skip links for navigation"
|
|
]
|
|
}
|
|
}
|
|
],
|
|
"compliance": {
|
|
"level": "AA",
|
|
"standards": ["WCAG 2.1"],
|
|
"testingTools": [
|
|
"axe-core",
|
|
"pa11y",
|
|
"lighthouse"
|
|
]
|
|
}
|
|
}
|