Web Development · Intermediate level

Intermediate level · Module 1: Accessible and Maintainable Front Ends · Lesson 2 of 3

Keyboard Access, Focus and ARIA

Make every control usable with a keyboard, keep focus visible and use ARIA only when HTML is not enough.

In this lesson you will

  • Ensure keyboard operability and a visible focus indicator
  • Apply the first rule of ARIA and use common ARIA attributes correctly

Key concepts

tab order:focus-visibleskip linkfirst rule of ARIA

The lesson

Keyboard users move with Tab, Shift+Tab, Enter and Space. Native elements — links, buttons, form fields — work automatically; custom widgets built from divs do not. Keep the tab order following the visual order.

Never remove the focus outline without replacing it. Style :focus-visible with a clear, high-contrast indicator. A 'Skip to main content' link lets keyboard users bypass long navigation.

The first rule of ARIA is to use native HTML whenever possible. Add ARIA only to fill gaps: aria-expanded on a menu toggle, aria-current="page" on the current navigation link, aria-live for status messages. Wrong ARIA is worse than none.

Step by step

  1. Replace a clickable div with a button.
  2. Add a visible :focus-visible style.
  3. Add a skip link.
  4. Add aria-expanded to a mobile menu toggle and test it.

Practice activity

Fix the keyboard and focus problems from your audit.

Expected result: Every task can be completed with the keyboard and focus is always visible.

Check your understanding

  1. What is the first rule of ARIA?

    Show answer

    Use native HTML elements and attributes instead of ARIA whenever possible.

  2. What does a skip link do?

    Show answer

    Lets keyboard users jump past repeated navigation to the main content.

Taught live by an instructor — online or in person. Free course lessons are for self-study and do not lead to a certificate — see registration options.