wcag-a11y 0.1.0

package/dist/engine/rules/aria.js

@@ -0,0 +1,293 @@
+export const ariaRules = [
+    {
+        id: 'aria-valid-role',
+        wcag: '4.1.2',
+        level: 'A',
+        impact: 'critical',
+        description: 'Elements must use valid ARIA roles',
+        check: () => {
+            const getCssPath = (el) => {
+                if (el.id)
+                    return '#' + el.id;
+                const parts = [];
+                let node = el;
+                while (node && node.tagName !== 'BODY') {
+                    const parent = node.parentElement;
+                    if (!parent)
+                        break;
+                    const tag = node.tagName.toLowerCase();
+                    const sibs = Array.from(parent.children).filter((c) => c.tagName === node.tagName);
+                    parts.unshift(sibs.length === 1 ? tag : tag + ':nth-of-type(' + (sibs.indexOf(node) + 1) + ')');
+                    if (parent.id) {
+                        parts.unshift('#' + parent.id);
+                        break;
+                    }
+                    node = parent;
+                }
+                return parts.join(' > ') || el.tagName.toLowerCase();
+            };
+            const validRoles = new Set([
+                'alert', 'alertdialog', 'application', 'article', 'banner', 'button', 'cell', 'checkbox',
+                'columnheader', 'combobox', 'complementary', 'contentinfo', 'definition', 'dialog',
+                'directory', 'document', 'feed', 'figure', 'form', 'grid', 'gridcell', 'group', 'heading',
+                'img', 'link', 'list', 'listbox', 'listitem', 'log', 'main', 'marquee', 'math', 'menu',
+                'menubar', 'menuitem', 'menuitemcheckbox', 'menuitemradio', 'navigation', 'none',
+                'note', 'option', 'presentation', 'progressbar', 'radio', 'radiogroup', 'region', 'row',
+                'rowgroup', 'rowheader', 'scrollbar', 'search', 'searchbox', 'separator', 'slider',
+                'spinbutton', 'status', 'switch', 'tab', 'table', 'tablist', 'tabpanel', 'term',
+                'textbox', 'timer', 'toolbar', 'tooltip', 'tree', 'treegrid', 'treeitem',
+            ]);
+            const els = Array.from(document.querySelectorAll('[role]'));
+            return els
+                .filter((el) => !validRoles.has(el.getAttribute('role') ?? ''))
+                .map((el) => ({ selector: getCssPath(el), html: el.outerHTML.slice(0, 200) }));
+        },
+    },
+    {
+        id: 'aria-required-attr',
+        wcag: '4.1.2',
+        level: 'A',
+        impact: 'critical',
+        description: 'ARIA roles must include all required attributes',
+        check: () => {
+            const roleRequiredAttrs = {
+                checkbox: ['aria-checked'],
+                combobox: ['aria-expanded'],
+                option: ['aria-selected'],
+                radio: ['aria-checked'],
+                scrollbar: ['aria-controls', 'aria-valuenow'],
+                slider: ['aria-valuenow'],
+                spinbutton: ['aria-valuenow'],
+                switch: ['aria-checked'],
+            };
+            const results = [];
+            for (const [role, required] of Object.entries(roleRequiredAttrs)) {
+                const els = Array.from(document.querySelectorAll(`[role="${role}"]`));
+                for (const el of els) {
+                    const missing = required.filter((attr) => !el.hasAttribute(attr));
+                    if (missing.length > 0) {
+                        results.push({
+                            selector: el.id ? `#${el.id}` : `[role="${role}"]`,
+                            html: el.outerHTML.slice(0, 200),
+                        });
+                    }
+                }
+            }
+            return results;
+        },
+    },
+    {
+        id: 'aria-hidden-focus',
+        wcag: '4.1.2',
+        level: 'A',
+        impact: 'serious',
+        description: 'Elements with aria-hidden="true" must not be keyboard focusable',
+        check: () => {
+            const getCssPath = (el) => {
+                if (el.id)
+                    return '#' + el.id;
+                const parts = [];
+                let node = el;
+                while (node && node.tagName !== 'BODY') {
+                    const parent = node.parentElement;
+                    if (!parent)
+                        break;
+                    const tag = node.tagName.toLowerCase();
+                    const sibs = Array.from(parent.children).filter((c) => c.tagName === node.tagName);
+                    parts.unshift(sibs.length === 1 ? tag : tag + ':nth-of-type(' + (sibs.indexOf(node) + 1) + ')');
+                    if (parent.id) {
+                        parts.unshift('#' + parent.id);
+                        break;
+                    }
+                    node = parent;
+                }
+                return parts.join(' > ') || el.tagName.toLowerCase();
+            };
+            const els = Array.from(document.querySelectorAll('[aria-hidden="true"]'));
+            return els
+                .filter((el) => {
+                const tabindex = el.getAttribute('tabindex');
+                const isFocusableTag = ['a', 'button', 'input', 'select', 'textarea'].includes(el.tagName.toLowerCase());
+                return (tabindex !== null && parseInt(tabindex) >= 0) || (isFocusableTag && tabindex === null);
+            })
+                .map((el) => ({ selector: getCssPath(el), html: el.outerHTML.slice(0, 200) }));
+        },
+    },
+    {
+        id: 'button-name',
+        wcag: '4.1.2',
+        level: 'A',
+        impact: 'critical',
+        description: 'Buttons must have an accessible name',
+        check: () => {
+            const getCssPath = (el) => {
+                if (el.id)
+                    return '#' + el.id;
+                const parts = [];
+                let node = el;
+                while (node && node.tagName !== 'BODY') {
+                    const parent = node.parentElement;
+                    if (!parent)
+                        break;
+                    const tag = node.tagName.toLowerCase();
+                    const sibs = Array.from(parent.children).filter((c) => c.tagName === node.tagName);
+                    parts.unshift(sibs.length === 1 ? tag : tag + ':nth-of-type(' + (sibs.indexOf(node) + 1) + ')');
+                    if (parent.id) {
+                        parts.unshift('#' + parent.id);
+                        break;
+                    }
+                    node = parent;
+                }
+                return parts.join(' > ') || el.tagName.toLowerCase();
+            };
+            const buttons = Array.from(document.querySelectorAll('button, [role="button"]'));
+            return buttons
+                .filter((el) => {
+                const text = el.textContent?.trim() ?? '';
+                const ariaLabel = el.getAttribute('aria-label')?.trim() ?? '';
+                const ariaLabelledby = el.getAttribute('aria-labelledby');
+                const labelledEl = ariaLabelledby ? document.getElementById(ariaLabelledby) : null;
+                return !text && !ariaLabel && !labelledEl?.textContent?.trim();
+            })
+                .map((el) => ({ selector: getCssPath(el), html: el.outerHTML.slice(0, 200) }));
+        },
+    },
+    {
+        id: 'aria-required-children',
+        wcag: '1.3.1',
+        level: 'A',
+        impact: 'critical',
+        description: 'Elements with ARIA owner roles must contain the required child roles',
+        check: () => {
+            const getCssPath = (el) => {
+                if (el.id)
+                    return '#' + el.id;
+                const parts = [];
+                let node = el;
+                while (node && node.tagName !== 'BODY') {
+                    const parent = node.parentElement;
+                    if (!parent)
+                        break;
+                    const tag = node.tagName.toLowerCase();
+                    const sibs = Array.from(parent.children).filter((c) => c.tagName === node.tagName);
+                    parts.unshift(sibs.length === 1 ? tag : tag + ':nth-of-type(' + (sibs.indexOf(node) + 1) + ')');
+                    if (parent.id) {
+                        parts.unshift('#' + parent.id);
+                        break;
+                    }
+                    node = parent;
+                }
+                return parts.join(' > ') || el.tagName.toLowerCase();
+            };
+            const required = {
+                listbox: ['option'],
+                radiogroup: ['radio'],
+                grid: ['row', 'rowgroup'],
+                menu: ['menuitem', 'menuitemcheckbox', 'menuitemradio'],
+                menubar: ['menuitem', 'menuitemcheckbox', 'menuitemradio'],
+                tablist: ['tab'],
+                tree: ['treeitem'],
+                treegrid: ['row'],
+            };
+            const results = [];
+            for (const [role, children] of Object.entries(required)) {
+                const els = Array.from(document.querySelectorAll(`[role="${role}"]`));
+                for (const el of els) {
+                    if (el.getAttribute('aria-busy') === 'true')
+                        continue;
+                    const hasChild = children.some((childRole) => el.querySelector(`[role="${childRole}"]`) !== null);
+                    if (!hasChild) {
+                        results.push({ selector: getCssPath(el), html: el.outerHTML.slice(0, 200) });
+                    }
+                }
+            }
+            return results;
+        },
+    },
+    {
+        id: 'aria-required-parent',
+        wcag: '1.3.1',
+        level: 'A',
+        impact: 'critical',
+        description: 'ARIA child roles must be contained in a required parent role',
+        check: () => {
+            const getCssPath = (el) => {
+                if (el.id)
+                    return '#' + el.id;
+                const parts = [];
+                let node = el;
+                while (node && node.tagName !== 'BODY') {
+                    const parent = node.parentElement;
+                    if (!parent)
+                        break;
+                    const tag = node.tagName.toLowerCase();
+                    const sibs = Array.from(parent.children).filter((c) => c.tagName === node.tagName);
+                    parts.unshift(sibs.length === 1 ? tag : tag + ':nth-of-type(' + (sibs.indexOf(node) + 1) + ')');
+                    if (parent.id) {
+                        parts.unshift('#' + parent.id);
+                        break;
+                    }
+                    node = parent;
+                }
+                return parts.join(' > ') || el.tagName.toLowerCase();
+            };
+            const parentMap = {
+                option: ['listbox', 'combobox'],
+                tab: ['tablist'],
+                treeitem: ['tree', 'group'],
+                menuitem: ['menu', 'menubar'],
+                menuitemcheckbox: ['menu', 'menubar'],
+                menuitemradio: ['menu', 'menubar'],
+                gridcell: ['row'],
+                row: ['grid', 'rowgroup', 'treegrid'],
+                columnheader: ['row'],
+                rowheader: ['row'],
+            };
+            const results = [];
+            for (const [role, parents] of Object.entries(parentMap)) {
+                const els = Array.from(document.querySelectorAll(`[role="${role}"]`));
+                for (const el of els) {
+                    const hasParent = parents.some((parentRole) => el.closest(`[role="${parentRole}"]`) !== null);
+                    if (!hasParent) {
+                        results.push({ selector: getCssPath(el), html: el.outerHTML.slice(0, 200) });
+                    }
+                }
+            }
+            return results;
+        },
+    },
+    {
+        id: 'aria-prohibited-attr',
+        wcag: '4.1.2',
+        level: 'A',
+        impact: 'moderate',
+        description: 'Elements with role="presentation" or role="none" must not carry ARIA semantics',
+        check: () => {
+            const getCssPath = (el) => {
+                if (el.id)
+                    return '#' + el.id;
+                const parts = [];
+                let node = el;
+                while (node && node.tagName !== 'BODY') {
+                    const parent = node.parentElement;
+                    if (!parent)
+                        break;
+                    const tag = node.tagName.toLowerCase();
+                    const sibs = Array.from(parent.children).filter((c) => c.tagName === node.tagName);
+                    parts.unshift(sibs.length === 1 ? tag : tag + ':nth-of-type(' + (sibs.indexOf(node) + 1) + ')');
+                    if (parent.id) {
+                        parts.unshift('#' + parent.id);
+                        break;
+                    }
+                    node = parent;
+                }
+                return parts.join(' > ') || el.tagName.toLowerCase();
+            };
+            const prohibited = ['aria-label', 'aria-labelledby', 'aria-describedby', 'aria-checked', 'aria-selected', 'aria-expanded', 'aria-required'];
+            const els = Array.from(document.querySelectorAll('[role="presentation"],[role="none"]'));
+            return els
+                .filter((el) => prohibited.some((attr) => el.hasAttribute(attr)))
+                .map((el) => ({ selector: getCssPath(el), html: el.outerHTML.slice(0, 200) }));
+        },
+    },
+];

package/dist/engine/rules/color-contrast.js

@@ -0,0 +1,114 @@
+export const colorContrastRules = [
+    {
+        id: 'color-contrast-text',
+        wcag: '1.4.3',
+        level: 'AA',
+        impact: 'serious',
+        description: 'Text must have a contrast ratio of at least 4.5:1 against its background',
+        check: () => {
+            const getCssPath = (el) => {
+                if (el.id)
+                    return '#' + el.id;
+                const parts = [];
+                let node = el;
+                while (node && node.tagName !== 'BODY') {
+                    const parent = node.parentElement;
+                    if (!parent)
+                        break;
+                    const tag = node.tagName.toLowerCase();
+                    const sibs = Array.from(parent.children).filter((c) => c.tagName === node.tagName);
+                    parts.unshift(sibs.length === 1 ? tag : tag + ':nth-of-type(' + (sibs.indexOf(node) + 1) + ')');
+                    if (parent.id) {
+                        parts.unshift('#' + parent.id);
+                        break;
+                    }
+                    node = parent;
+                }
+                return parts.join(' > ') || el.tagName.toLowerCase();
+            };
+            const elements = Array.from(document.querySelectorAll('p, span, li, td, th, h1, h2, h3, h4, h5, h6, a, label'));
+            const violations = [];
+            for (const el of elements) {
+                if (!el.textContent?.trim())
+                    continue;
+                const style = window.getComputedStyle(el);
+                const fontSize = parseFloat(style.fontSize);
+                const fontWeight = style.fontWeight;
+                const isLargeText = fontSize >= 24 || (fontSize >= 18.67 && (fontWeight === 'bold' || parseInt(fontWeight) >= 700));
+                if (isLargeText)
+                    continue;
+                const fgRaw = style.color;
+                const bgRaw = style.backgroundColor;
+                const fgMatch = fgRaw.match(/rgb\((\d+),\s*(\d+),\s*(\d+)\)/);
+                const bgMatch = bgRaw.match(/rgb\((\d+),\s*(\d+),\s*(\d+)\)/);
+                if (!fgMatch || !bgMatch)
+                    continue;
+                const toLinear = (c) => { const s = c / 255; return s <= 0.03928 ? s / 12.92 : Math.pow((s + 0.055) / 1.055, 2.4); };
+                const lum = (r, g, b) => 0.2126 * toLinear(r) + 0.7152 * toLinear(g) + 0.0722 * toLinear(b);
+                const l1 = lum(+fgMatch[1], +fgMatch[2], +fgMatch[3]);
+                const l2 = lum(+bgMatch[1], +bgMatch[2], +bgMatch[3]);
+                const ratio = (Math.max(l1, l2) + 0.05) / (Math.min(l1, l2) + 0.05);
+                if (ratio < 4.5) {
+                    violations.push({ selector: getCssPath(el), html: el.outerHTML.slice(0, 200) });
+                }
+            }
+            return violations;
+        },
+    },
+    {
+        id: 'color-contrast-large-text',
+        wcag: '1.4.3',
+        level: 'AA',
+        impact: 'serious',
+        description: 'Large text (18pt or 14pt bold) must have a contrast ratio of at least 3:1',
+        check: () => {
+            const getCssPath = (el) => {
+                if (el.id)
+                    return '#' + el.id;
+                const parts = [];
+                let node = el;
+                while (node && node.tagName !== 'BODY') {
+                    const parent = node.parentElement;
+                    if (!parent)
+                        break;
+                    const tag = node.tagName.toLowerCase();
+                    const sibs = Array.from(parent.children).filter((c) => c.tagName === node.tagName);
+                    parts.unshift(sibs.length === 1 ? tag : tag + ':nth-of-type(' + (sibs.indexOf(node) + 1) + ')');
+                    if (parent.id) {
+                        parts.unshift('#' + parent.id);
+                        break;
+                    }
+                    node = parent;
+                }
+                return parts.join(' > ') || el.tagName.toLowerCase();
+            };
+            const elements = Array.from(document.querySelectorAll('p, span, h1, h2, h3, h4, h5, h6'));
+            const violations = [];
+            for (const el of elements) {
+                if (!el.textContent?.trim())
+                    continue;
+                const style = window.getComputedStyle(el);
+                const fontSize = parseFloat(style.fontSize);
+                const fontWeight = style.fontWeight;
+                const isLargeText = fontSize >= 24 || (fontSize >= 18.67 && (fontWeight === 'bold' || parseInt(fontWeight) >= 700));
+                if (!isLargeText)
+                    continue;
+                const fgRaw = style.color;
+                const bgRaw = style.backgroundColor;
+                const fgMatch = fgRaw.match(/rgb\((\d+),\s*(\d+),\s*(\d+)\)/);
+                const bgMatch = bgRaw.match(/rgb\((\d+),\s*(\d+),\s*(\d+)\)/);
+                if (!fgMatch || !bgMatch)
+                    continue;
+                const toLinear = (c) => { const s = c / 255; return s <= 0.03928 ? s / 12.92 : Math.pow((s + 0.055) / 1.055, 2.4); };
+                const lum = (r, g, b) => 0.2126 * toLinear(r) + 0.7152 * toLinear(g) + 0.0722 * toLinear(b);
+                const l1 = lum(+fgMatch[1], +fgMatch[2], +fgMatch[3]);
+                const l2 = lum(+bgMatch[1], +bgMatch[2], +bgMatch[3]);
+                const ratio = (Math.max(l1, l2) + 0.05) / (Math.min(l1, l2) + 0.05);
+                if (ratio < 3) {
+                    violations.push({ selector: getCssPath(el), html: el.outerHTML.slice(0, 200) });
+                }
+            }
+            return violations;
+        },
+    },
+];

package/dist/engine/rules/forms.js

@@ -0,0 +1,255 @@
+export const formRules = [
+    {
+        id: 'label-missing',
+        wcag: '1.3.1',
+        level: 'A',
+        impact: 'critical',
+        description: 'Form inputs must have an associated label',
+        check: () => {
+            const getCssPath = (el) => {
+                if (el.id)
+                    return '#' + el.id;
+                const parts = [];
+                let node = el;
+                while (node && node.tagName !== 'BODY') {
+                    const parent = node.parentElement;
+                    if (!parent)
+                        break;
+                    const tag = node.tagName.toLowerCase();
+                    const sibs = Array.from(parent.children).filter((c) => c.tagName === node.tagName);
+                    parts.unshift(sibs.length === 1 ? tag : tag + ':nth-of-type(' + (sibs.indexOf(node) + 1) + ')');
+                    if (parent.id) {
+                        parts.unshift('#' + parent.id);
+                        break;
+                    }
+                    node = parent;
+                }
+                return parts.join(' > ') || el.tagName.toLowerCase();
+            };
+            const inputs = Array.from(document.querySelectorAll('input:not([type="hidden"]):not([type="button"]):not([type="submit"]):not([type="reset"]), textarea, select'));
+            return inputs
+                .filter((el) => {
+                const id = el.getAttribute('id');
+                const hasLabel = id && document.querySelector(`label[for="${id}"]`);
+                const hasAriaLabel = el.hasAttribute('aria-label') || el.hasAttribute('aria-labelledby');
+                const isWrapped = el.closest('label') !== null;
+                return !hasLabel && !hasAriaLabel && !isWrapped;
+            })
+                .map((el) => ({ selector: getCssPath(el), html: el.outerHTML.slice(0, 200) }));
+        },
+    },
+    {
+        id: 'label-empty',
+        wcag: '1.3.1',
+        level: 'A',
+        impact: 'serious',
+        description: '<label> elements must have text content',
+        check: () => {
+            const getCssPath = (el) => {
+                if (el.id)
+                    return '#' + el.id;
+                const parts = [];
+                let node = el;
+                while (node && node.tagName !== 'BODY') {
+                    const parent = node.parentElement;
+                    if (!parent)
+                        break;
+                    const tag = node.tagName.toLowerCase();
+                    const sibs = Array.from(parent.children).filter((c) => c.tagName === node.tagName);
+                    parts.unshift(sibs.length === 1 ? tag : tag + ':nth-of-type(' + (sibs.indexOf(node) + 1) + ')');
+                    if (parent.id) {
+                        parts.unshift('#' + parent.id);
+                        break;
+                    }
+                    node = parent;
+                }
+                return parts.join(' > ') || el.tagName.toLowerCase();
+            };
+            const labels = Array.from(document.querySelectorAll('label'));
+            return labels
+                .filter((l) => !l.textContent?.trim())
+                .map((l) => ({ selector: getCssPath(l), html: l.outerHTML.slice(0, 200) }));
+        },
+    },
+    {
+        id: 'error-identification',
+        wcag: '3.3.1',
+        level: 'A',
+        impact: 'serious',
+        description: 'Inputs marked as invalid must have an error message linked via aria-describedby',
+        check: () => {
+            const getCssPath = (el) => {
+                if (el.id)
+                    return '#' + el.id;
+                const parts = [];
+                let node = el;
+                while (node && node.tagName !== 'BODY') {
+                    const parent = node.parentElement;
+                    if (!parent)
+                        break;
+                    const tag = node.tagName.toLowerCase();
+                    const sibs = Array.from(parent.children).filter((c) => c.tagName === node.tagName);
+                    parts.unshift(sibs.length === 1 ? tag : tag + ':nth-of-type(' + (sibs.indexOf(node) + 1) + ')');
+                    if (parent.id) {
+                        parts.unshift('#' + parent.id);
+                        break;
+                    }
+                    node = parent;
+                }
+                return parts.join(' > ') || el.tagName.toLowerCase();
+            };
+            const invalid = Array.from(document.querySelectorAll('[aria-invalid="true"]'));
+            return invalid
+                .filter((el) => {
+                const describedBy = el.getAttribute('aria-describedby');
+                if (!describedBy)
+                    return true;
+                const errorEl = document.getElementById(describedBy);
+                return !errorEl || !errorEl.textContent?.trim();
+            })
+                .map((el) => ({ selector: getCssPath(el), html: el.outerHTML.slice(0, 200) }));
+        },
+    },
+    {
+        id: 'autocomplete',
+        wcag: '1.3.5',
+        level: 'AA',
+        impact: 'moderate',
+        description: 'Common form fields (name, email, phone) should have an autocomplete attribute',
+        check: () => {
+            const getCssPath = (el) => {
+                if (el.id)
+                    return '#' + el.id;
+                const parts = [];
+                let node = el;
+                while (node && node.tagName !== 'BODY') {
+                    const parent = node.parentElement;
+                    if (!parent)
+                        break;
+                    const tag = node.tagName.toLowerCase();
+                    const sibs = Array.from(parent.children).filter((c) => c.tagName === node.tagName);
+                    parts.unshift(sibs.length === 1 ? tag : tag + ':nth-of-type(' + (sibs.indexOf(node) + 1) + ')');
+                    if (parent.id) {
+                        parts.unshift('#' + parent.id);
+                        break;
+                    }
+                    node = parent;
+                }
+                return parts.join(' > ') || el.tagName.toLowerCase();
+            };
+            const nameFields = Array.from(document.querySelectorAll('input[type="text"][id*="name"], input[type="text"][name*="name"], input[type="email"], input[type="tel"]'));
+            return nameFields
+                .filter((el) => !el.hasAttribute('autocomplete'))
+                .map((el) => ({ selector: getCssPath(el), html: el.outerHTML.slice(0, 200) }));
+        },
+    },
+    {
+        id: 'input-button-name',
+        wcag: '4.1.2',
+        level: 'A',
+        impact: 'critical',
+        description: 'Input buttons must have discernible text via value or aria-label',
+        check: () => {
+            const getCssPath = (el) => {
+                if (el.id)
+                    return '#' + el.id;
+                const parts = [];
+                let node = el;
+                while (node && node.tagName !== 'BODY') {
+                    const parent = node.parentElement;
+                    if (!parent)
+                        break;
+                    const tag = node.tagName.toLowerCase();
+                    const sibs = Array.from(parent.children).filter((c) => c.tagName === node.tagName);
+                    parts.unshift(sibs.length === 1 ? tag : tag + ':nth-of-type(' + (sibs.indexOf(node) + 1) + ')');
+                    if (parent.id) {
+                        parts.unshift('#' + parent.id);
+                        break;
+                    }
+                    node = parent;
+                }
+                return parts.join(' > ') || el.tagName.toLowerCase();
+            };
+            const inputs = Array.from(document.querySelectorAll('input[type="button"], input[type="submit"], input[type="reset"]'));
+            return inputs
+                .filter((el) => {
+                const value = el.getAttribute('value')?.trim() ?? '';
+                const ariaLabel = el.getAttribute('aria-label')?.trim() ?? '';
+                const ariaLabelledby = el.getAttribute('aria-labelledby');
+                return !value && !ariaLabel && !ariaLabelledby;
+            })
+                .map((el) => ({ selector: getCssPath(el), html: el.outerHTML.slice(0, 200) }));
+        },
+    },
+    {
+        id: 'fieldset-legend',
+        wcag: '1.3.1',
+        level: 'A',
+        impact: 'moderate',
+        description: '<fieldset> elements must have a <legend> with non-empty text',
+        check: () => {
+            const getCssPath = (el) => {
+                if (el.id)
+                    return '#' + el.id;
+                const parts = [];
+                let node = el;
+                while (node && node.tagName !== 'BODY') {
+                    const parent = node.parentElement;
+                    if (!parent)
+                        break;
+                    const tag = node.tagName.toLowerCase();
+                    const sibs = Array.from(parent.children).filter((c) => c.tagName === node.tagName);
+                    parts.unshift(sibs.length === 1 ? tag : tag + ':nth-of-type(' + (sibs.indexOf(node) + 1) + ')');
+                    if (parent.id) {
+                        parts.unshift('#' + parent.id);
+                        break;
+                    }
+                    node = parent;
+                }
+                return parts.join(' > ') || el.tagName.toLowerCase();
+            };
+            const fieldsets = Array.from(document.querySelectorAll('fieldset'));
+            return fieldsets
+                .filter((fs) => {
+                const legend = fs.querySelector('legend');
+                const ariaLabel = fs.getAttribute('aria-label')?.trim() ?? '';
+                const ariaLabelledby = fs.getAttribute('aria-labelledby');
+                return !ariaLabel && !ariaLabelledby && (!legend || !legend.textContent?.trim());
+            })
+                .map((fs) => ({ selector: getCssPath(fs), html: fs.outerHTML.slice(0, 200) }));
+        },
+    },
+    {
+        id: 'form-field-required-label',
+        wcag: '3.3.2',
+        level: 'A',
+        impact: 'moderate',
+        description: 'Required form fields should expose their required state via aria-required',
+        check: () => {
+            const getCssPath = (el) => {
+                if (el.id)
+                    return '#' + el.id;
+                const parts = [];
+                let node = el;
+                while (node && node.tagName !== 'BODY') {
+                    const parent = node.parentElement;
+                    if (!parent)
+                        break;
+                    const tag = node.tagName.toLowerCase();
+                    const sibs = Array.from(parent.children).filter((c) => c.tagName === node.tagName);
+                    parts.unshift(sibs.length === 1 ? tag : tag + ':nth-of-type(' + (sibs.indexOf(node) + 1) + ')');
+                    if (parent.id) {
+                        parts.unshift('#' + parent.id);
+                        break;
+                    }
+                    node = parent;
+                }
+                return parts.join(' > ') || el.tagName.toLowerCase();
+            };
+            const requiredInputs = Array.from(document.querySelectorAll('input[required], textarea[required], select[required]'));
+            return requiredInputs
+                .filter((el) => !el.hasAttribute('aria-required'))
+                .map((el) => ({ selector: getCssPath(el), html: el.outerHTML.slice(0, 200) }));
+        },
+    },
+];