Open code, practice, and notes →
Download source with English comments · for reading
HTML · 25 Reading Order and Skip Links
Series contents · Technology map
Stage: Accessibility Review and Card Integration · Editable example · Storage ID: html-step-25
Goals and learning outcomes
- The shortcut link is available on the first keyboard interaction.
- Record focus and scroll positions before and after moving to the main content.
Prerequisites
The work and experiment records from Unit 24, “Accessible Names and Descriptions”.
Key concepts and explanations
Source Order
Assistive technology and keyboard navigation are affected by document order. Changing only visual positions does not automatically fix the logical order.
Shortcuts
A skip link bypasses repeated navigation to reach the main content. Check the destination and focus behavior in the browser.
Practice setup
First check the execution scope guidance on the example screen. The following environment is for extending the assignment in a separate project. Implement it yourself in a separate local project and check it with browser developer tools. Prepare HTML and any necessary image/media files in a separate folder and open them through a local HTTP server. Check with the Elements and accessibility panels and actual keyboard operation.
The linked example is a starting point. It does not implement every task below. Complete work beyond its supported scope in a separate project.
Practice tasks
- In reading-order.html, prepare 10 lengthy navigation links and main content.
- Put a skip-to-content link at the top, and create a main destination and a logical card order.
- Run with 10 lengthy navigation links and main content. Results to check: The shortcut link is available on the first keyboard interaction. Record focus and scroll positions before and after moving to the main content. Record expected and actual results separately.
Variables to observe
| Variable | Baseline | Change | Expected change / hypothesis |
|---|---|---|---|
| Navigation Method | Repeated Tab | Skip link | Pre-run hypothesis: Fewer interactions will be needed to reach the main content. Keep other conditions fixed and record the actual result separately after running. |
Predictions in this table are not measured results. Change one condition at a time and record why the actual result differs.
Completion criteria
- The shortcut link is available on the first keyboard interaction.
- Record focus and scroll positions before and after moving to the main content.
Self-check
- What maintenance problems arise from fixing order with positive tabindex values?
- Is the reading order still natural with CSS disabled?
Official references
Linked example and execution scope
Example source · Runtime environments and limits
Compare the editable input with actual browser execution results. Scope document body/html selectors within Shadow DOM. @media responds to the outer preview viewport, while the width slider changes only the container. Network access, form navigation, and iframe execution are restricted.
Source code and records are not overwritten automatically. Resetting an existing example also preserves your notes.
Next learning
Previous: Accessible Names and Descriptions · Next: HTML Errors and Browser Recovery