Rullst AcademyRullst Academy/Lesson
CSS and interface design · Lesson 10 / 12

Show where interaction is

Keyboard users need to see focus as clearly as pointer users see their position.

Learning paths12 min

Let's discover together

  1. 1

    Hover describes a pointer over an element; focus-visible indicates when the browser considers a visible focus indicator necessary. Neither replaces the other. Keep native links and buttons in HTML.

  2. 2

    Use an outline with a visible color and thickness and outline-offset to separate it from the border. Do not remove it without an adequate replacement. Check focus against adjacent colors in every used theme.

  3. 3

    CSS can make something look disabled without implementing the restriction. Appearance alone does not turn a link into a button. The model button is for practice and performs no registration operation.

  4. 4

    Use Tab, Shift+Tab and Enter inside the preview document, then check the local file. Focus leaving the screen, hiding behind another layer or relying on a subtle color change needs review.

  5. 5

    Also check the size and spacing of touch targets. WCAG 2.2 includes criterion 2.5.8, with a 24 × 24 CSS pixel reference and defined exceptions, including sufficient spacing. Do not apply it as a required size for every link in a paragraph. Give project buttons a comfortable area and test with people.

Workshop: one interface, different spaces

Edit <style id="lesson-css"> in “My files and GitHub”. The preview applies that CSS to the supplied HTML structure; check HTML edits in the downloaded file. External resources and CSS outside the study subset are not accepted here.

Go to my code

Measurements describe this preview; they do not guarantee every size or complete accessibility. Test long content, zoom, keyboard and assistive technologies in the local project.

Two-color contrast lab

Approximate ratio ·

Calculation only for two opaque sRGB colors selected here; it does not read your page. The threshold uses the unrounded ratio. It does not assess transparency, gradients, images, states or complete conformance.

Official links and next step

✦
YOUR MISSION

Style states while preserving focus, meaning and native operation.

Now it's your turn

Discovery workshop

Predict, change, compare

A link gains a hover background, but CSS removes its focus outline.
Build your answers and check when you are ready.
A moment to understand

Does a gray appearance alone prevent an action?

I need a hint

Check the rule, condition and observed result before concluding.

Loading your journey…

Take it with you

Design visible focus, navigate by keyboard and record the sequence. Check that the indicator is not clipped.

At your own pace

My files and GitHub

Every lesson can become your own record: code, notes or a practice plan. Saving a file to GitHub is optional and does not change your XP.

Student guide

The editor and downloads open when this lesson is available to your account. Check access below or return to the track map.

Checking your access to this lesson…

Rullstpetbot

AI can make mistakes. Check the lesson material.