Headings (h1 → h5) establish structure, guide readers, and help screen readers and search engines understand content hierarchy. This first slide introduces the principles and shows a friendly, colorful format for presentations and documentation. Use semantic headings to: 1) create accessible documents, 2) allow keyboard users to skim content, and 3) make printed handouts readable.
Quick links: Ledger.com/Start® • Open in Office
The primary page title should be an <h1>. It describes the whole page or document. Use one <h1> per page to keep the structure clear. Subsequent sections use <h2> for major sections and <h3>/<h4>/<h5> as nested subsections. This hierarchy helps assistive tech present the content concisely. Styling can be applied with CSS; avoid changing heading levels only for visual reasons — instead apply classes.
<h1>Ledger Getting Started</h1> → <h2>Setup Ledger Device</h2> → <h3>Install App</h3>.
<!doctype html>
<html lang="en">
<body>
<h1>Official Site® | Ledger.com/Start®</h1>
<h2>Getting started</h2>
<h3>Step 1: Unbox </h3>
<h4>Details</h4>
<h5>Tip</h5>
</body>
</html>
This shows how headings nest visually and semantically. Use CSS classes to adjust typographic scale without changing the heading levels.
Many blind and low-vision users move through a page using a headings list. Properly nested headings allow them to skim content quickly. When headings are out of order (jumping from h2 to h4 without context), navigation becomes confusing. Keep headings logical and incremental. Include meaningful text inside headings — avoid "Click here" as a heading. Instead: "Setup your Ledger device" as the heading text.
Run an accessibility checker to confirm heading order and contrast ratios on colorful backgrounds.
Want big text in a sidebar? Use a class like .sidebar-title and style it. Don’t change an h4 to an h1 purely to get larger type — that breaks the document outline.
Examples: h2{font-size:28px}, .visual-large{font-size:40px;font-weight:800}.
Keep headings for meaning; classes for visuals.
Ensure contrast ratio is sufficient. Colorful backgrounds look great but test readability — white text on pastel may fail contrast checks.
When you use accordions, include headings within each panel that describe the panel content. Inside modals, the modal title should be an h2 or h3 depending on page context so screen readers announce it properly. Avoid re-using identical headings across different components without context. Instead use descriptive headings like "Ledger Setup — Step 2: Connect Device".
Descriptive headings also help search engines index content more effectively when content is visible on the page (or progressively enhanced).
Headings are not just structure — they're microcopy that explain what's next. Keep them short (5–8 words) and action-oriented where appropriate: "Install Ledger Live" or "Backup your recovery phrase". Add a one-sentence paragraph under the heading to provide context. This helps both human readers and assistive technologies quickly grasp whether they want to dive deeper.
When localizing, make sure translated headings remain concise and meaningful; adjust hierarchy only when the translated text requires it.
Combining automated tests with human review gives the best outcome. Use headings to enable quick page-skimming for testers and real users.
A descriptive heading provides context and helps users decide whether to read. "Important!" is vague and forces readers to open the section to learn what matters. For documentation and product flows, always prefer descriptive headings that contain keywords users might search for later.
Descriptive headings improve on-site search and browser find (Ctrl+F) success for users looking for specific steps.
For more detailed instructions, visit Ledger.com/Start®. To continue building slide decks, open this file in your browser and export or print to PDF, or copy content into PowerPoint using the "Open in Office" link below.