Give the document a readable structure
Semantic HTML gives browsers and assistive technologies information about the purpose of a document. Use a main region for the primary content, navigation for groups of navigation links, and headings that describe each section. A button triggers an action; a link takes a reader somewhere. Choosing the native element is usually simpler than recreating its behaviour.
For an article page, sketch the outline as plain text first: title, introduction, section headings, references and related reading. If the outline is confusing, decorative spacing will not fix it. Avoid choosing a heading level solely because its default font size looks right.
Make navigation understandable in isolation
Read the links on a page without the surrounding paragraphs. Labels such as “Read more” often lose their meaning. A full article title is usually a better navigation label. When the destination is a downloadable file, say so near the link.
Test the route a returning reader is likely to take: homepage, topic, article, related article. Each step should be possible without a pointer. Keep focus styling visible and ensure a sticky header does not cover the selected link. A short skip link can spare keyboard users from repeating the entire navigation.
Review with the decoration removed
Try a narrow screen, increased text size and keyboard-only navigation. Look for horizontal scrolling, clipped headings, repeated navigation labels and controls with no obvious purpose. A layout that works only with one font size is fragile.
Review the page after inserting a genuinely long title and a reference with a long URL. Real content is a stronger layout test than perfectly sized sample text. Record the issue as a specific reader problem, such as “the article title disappears at 200% zoom”, so the fix can be checked.
Before you finish
- One descriptive main heading
- Meaningful link labels
- Visible keyboard focus
- Logical reading order
Technical reference
MDN: HTML and accessibility