Rullst AcademyRullst Academy/Lesson
Semantic HTML and accessibility · Lesson 09 / 10

Review beyond appearance

Now explore the page as someone who needs predictable paths.

Learning paths14 min

Let's discover together

  1. 1

    Tab and Shift+Tab move through controls and links; Enter activates links, and native buttons support keyboard operation. Not every text needs a tab stop. Preserve document order; do not add positive tabindex to force a visual sequence.

  2. 2

    Focus must be visible. An initial “Skip to content” link reduces repeated navigation; it points to main with an id. In this project tabindex="-1" lets that target receive focus without adding it to normal tab order.

  3. 3

    Also check headings, link names, alternatives and labels. Open details with summary by keyboard. The workshop’s automatic review performs simple checks only: it is neither a complete HTML validator nor a WCAG audit.

  4. 4

    On a computer, check the local file with zoom and a narrow window; enlarge text and look for clipping. A screen reader and testing with people provide evidence visual inspection cannot. Record environment, observation, correction and untested areas.

  5. 5

    When reviewing forms, do not block pasting or password managers. Avoid unnecessarily asking again for information already provided. These considerations relate to WCAG 2.2 redundant entry and accessible authentication; alone they do not establish conformance.

HTML workshop: write, observe, review

Edit HTML in “My files and GitHub” and update the preview. It uses study elements and reading styles: scripts, custom CSS and external navigation are disabled. Only the kit’s route.svg is shown as an image.

Go to my HTML

These simple checks are neither complete HTML validation nor a WCAG audit. Review content, keyboard, zoom and assistive technologies; record what you have not tested.

Official links and next step

✦
YOUR MISSION

Perform an initial review of keyboard access, focus, structure and content.

Now it's your turn

Discovery workshop

Read, predict, try

A page looks good with a mouse, but a div used as a button is not reached with Tab.
Build your answers and check when you are ready.
A moment to understand

Do zero automated hints prove complete conformance?

I need a hint

Compare the intent with the meaning of the elements; appearance alone does not demonstrate accessibility.

Loading your journey…

Take it with you

Perform three manual checks and record a real limitation. If you did not use a screen reader, record that test as pending.

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.