Frontend developers are expected to have an intermediate understanding of WCAG 2.0 Level AA and apply accessibility best practices in daily development.

Semantic HTML

Use semantic elements like <button>, <nav>, <header>, <main>, <section>, and <label>.

Why it matters:

• Screen readers rely on semantics
• Built-in keyboard & accessibility support
• Reduces ARIA usage

Rule: Prefer semantic HTML over <div> and <span>.

Keyboard Accessibility

Ensure your app works without a mouse.

Checklist:

• All interactive elements are tabbable
• Logical focus order
• Visible focus styles
• No keyboard traps

Tip: Test using only the keyboard.

Color Contrast

WCAG Level AA contrast requirements:

• 4.5:1 – normal text
• 3:1 – large text & UI elements

Tools: DevTools, Lighthouse, contrast checkers Good contrast improves usability for everyone.

ARIA Basics

ARIA enhances accessibility only when HTML isn’t enough.

Golden rule:

Use native HTML first. ARIA second.

Common uses:

• Custom components
• Dynamic state (aria-expanded, aria-disabled)
• Live updates

Alt Text for Images

Alt text explains purpose, not appearance.

Guidelines:

• Meaningful images → descriptive alt text
• Decorative images → alt=""
• Avoid “image of” or “picture of”