Open code, practice, and notes →
Download source with English comments · for reading
HTML · 28 Accessible Learning Cards
Series contents · Technology map
Stage: Accessibility Review and Card Integration · Editable example · Storage ID: html-03
Goals and learning outcomes
- Identify the topics and navigation purposes of 6 cards without images.
- Use the keyboard to open the table of contents and navigate all cards, and record the order.
Prerequisites
The work and experiment records from Unit 27, “Checking Image Failure and Zoom”.
Key concepts and explanations
Integrating Structure
Arrange card titles, descriptions, and links in reading order. Document meaning must remain intact even when the visual layout differs.
Verifying Controls
Combine native details, buttons, and links according to their purposes. Check image failure and keyboard use as separate scenarios.
Practice setup
Frontory’s existing preview is a limited starting example, not a completed version of the whole assignment. Implement additional files and features yourself in a separate local project. 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 cards.html, prepare successful/failed images and 100%·400% zoom.
- Create 6 learning cards and a details table of contents, and integrate image alt text, a heading hierarchy, and purposeful links.
- Run with successful/failed images and 100%·400% zoom. Results to check: Identify the topics and navigation purposes of 6 cards without images. Use the keyboard to open the table of contents and navigate all cards, and record the order. Record expected and actual results separately.
Variables to observe
| Variable | Baseline | Change | Expected change / hypothesis |
|---|---|---|---|
| Images | Successful loading | All fail | Pre-run hypothesis: The topics and control purposes will remain understandable. 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
- Identify the topics and navigation purposes of 6 cards without images.
- Use the keyboard to open the table of contents and navigate all cards, and record the order.
Self-check
- Does the meaning remain with CSS removed?
- Which aspects of the user experience could automated checks not verify?
Official references
Linked example and execution scope
Example source · Runtime environments and limits
Source code and records are not overwritten automatically. Resetting an existing example also preserves your notes.