UI Accessibility Pro

Accessibility Pro

Accessibility is not a feature; it is a fundamental requirement of the web. This skill ensures your UI is usable by people with varying abilities.

Core Standards

• Semantic HTML: Use <main>, <nav>, <article>, and <button> correctly. Avoid "div-itis".
• Focus States: Never disable :focus without providing a high-visibility alternative.
• Color Contrast: Ensure a minimum contrast ratio of 4.5:1 for text.

ARIA (Accessible Rich Internet Applications)

• Roles: Use role="alert", role="dialog", etc., only when semantic HTML is insufficient.
• Aria-Labels: Provide descriptive labels for icon-only buttons.
• Live Regions: Use aria-live="polite" for dynamic content updates.

Testing Checklist

• Keyboard Only: Can you navigate the entire app using only Tab and Space/Enter?
• Screen Reader: Does the content read in a logical order?
• Zoom: Does the layout remain functional at 200% zoom?