Accessible Modal, Menu and Widget Pattern Review
Review custom components against ARIA patterns.
The Open buttons send the prompt text as currently shown below to that site only when you click. Fill in the placeholders first.
Review custom components against established accessibility patterns. Component types and framework: [COMPONENTS_AND_FRAMEWORK]. Markup, scripts, and behavior description for each: [PASTE_COMPONENT_CODE_OR_DESCRIPTION]. For each component, check the items below and mark Pass, Fail, or Unknown with the line of code and the fix. MODAL DIALOG: [ ] role dialog with an accessible name [ ] focus moves in on open and returns to the trigger on close [ ] focus stays inside while open [ ] Escape closes [ ] background is inert or hidden from assistive technology [ ] scrolling the page behind is handled DISCLOSURE (accordion, menu button): [ ] a real button with the expanded state [ ] controlled region identified [ ] keyboard Enter and Space work MENU AND NAVIGATION: [ ] native links where possible [ ] arrow-key behavior only if the pattern requires it [ ] focus visible TABS: [ ] tablist, tab, and tabpanel roles with selected state [ ] arrow keys move between tabs COMBOBOX AND AUTOCOMPLETE: [ ] correct roles and announced result counts [ ] keyboard selection TOOLTIP: [ ] appears on focus and hover, dismissible, hoverable ALL: [ ] touch targets large enough [ ] contrast met [ ] reduced motion respected [ ] works at 200 percent zoom Prefer native elements over ARIA. Output corrected code for the three worst problems and a manual test script with keyboard and one screen reader.
Fill in before use
Optional: type your details and the prompt above updates. Nothing is saved or sent.
Replace each bracketed placeholder with your own details, then paste into Any AI or another assistant.