Study guide: Structure an Accessible Paper Web Page
Draw a paper practice page with a heading, three-item list, a resource link and a Check answer button. Supply text for its meaningful route image and describe a keyboard test.
Ideas to explain in your own words
- A web page uses different layers. HTML describes structure and meaning, CSS describes presentation, and JavaScript can add behavior. These layers cooperate. A heading should be a heading structurally, not just large text. This paper task classifies page decisions without requiring a development account.
- Semantic elements communicate the purpose of content to browsers and assistive tools. A heading identifies a section, a list groups items, a link navigates to a destination and a button performs an action. Using the appropriate element provides useful built-in behavior as well as meaning.
- An image alternative should convey the image’s relevant information in context. A diagram needs its relationships explained; a decorative image may not need repeated description. The same image can serve different purposes on different pages. Our task supplies the purpose so the needed alternative is clear.
- A usable interaction should not depend only on a mouse or dragging. Native links and buttons support keyboard interaction when used correctly, but the whole task still needs testing. Visible focus shows the current control. The paper test describes intended behavior rather than claiming a finished page is accessible.
Useful vocabulary
- HTML
- A language for web content structure and meaning.
- CSS
- Rules describing presentation.
- semantic
- Communicating the purpose of content.
Watch your reasoning
- Making text large does not itself give the text heading semantics.
- A link and a button can look alike but serve different purposes.
- A filename or the words picture here do not explain a diagram’s content.
- A keyboard shortcut is not enough if the learner cannot discover or complete the task.
A worked review example
Mark a title as a heading. Classify the requested layer. The supported answer is HTML structure. Identify whether the requested change concerns meaning, visual presentation or an interactive response. Making text large does not itself give the text heading semantics. A web page uses different layers. The supplied facts, rather than an assumed real-world detail, determine this paper case. Compare the recorded action or value with the stated rule before choosing an answer. Clickable picture performs an action with no keyboard method. Which improvement addresses the stated barrier? The supported answer is Native action button. Offer an operable control and a visible focus path for the same task. A keyboard shortcut is not enough if the learner cannot discover or complete the task.
Make a practice plan
- Draw or tell one computing idea from each of the four lessons. Give one example of using each idea.
- Use the example to explain one mistake to avoid.
- Try the unit review before opening the explanations.
- Try the new task on paper or say your answer. Then compare your steps with the example answer.