Training page

How to Structure a Web Page in CKEditor

Use headings and lists to organize information so everyone can find what they need quickly, including people using screen readers and keyboard navigation. This example shows a clean, accessible structure you can copy and adapt.

Page Title and Summary

Start with a clear page title and a short summary that explains what the page is about and who it is for.

Section Headings (Use a Logical Order)

Break your page into sections using headings. Do not use bold text or large font sizes to “fake” headings—use the Heading dropdown in the editor.

• Use one main page title (Heading 2 on most county pages).
• Use Heading 3 for major sections.
• Use Heading 4 for sub-sections under a Heading 3.
• Do not skip heading levels (for example, do not jump from Heading 2 to Heading 4).

Example Page Outline

• Heading 2: Department Name
• Paragraph: Short overview of services
• Heading 3: Services
• Heading 4: Service A
• Heading 4: Service B
• Heading 3: Forms and Documents
• Heading 3: Contact Information

Reading Order (How Screen Readers Read the Page)

Reading order is the order content is read aloud by screen readers and reached by keyboard navigation. In most WYSIWYG editors, the reading order follows the order content appears in the page. If content is placed out of order (for example, a sidebar added before the main heading), users may hear information in a confusing sequence.

• Keep content in a logical top-to-bottom order: title, summary, main sections, then supporting content.
• Avoid using columns or tables to control layout. If your page uses columns, make sure the content still makes sense when read straight down.
• Do not place important information only in a right-side “callout” or box unless it appears in the correct place in the page order.
• After publishing, test by pressing the Tab key to move through links and controls. The focus should move in a sensible order.

Writing Readable Content

• Keep paragraphs short (2–4 sentences).
• Use plain language and define acronyms.
• Use lists for steps, requirements, or grouped items. (ordered list and unordered list)

Links (Make Them Descriptive)

Link text should describe where the link goes. Avoid “click here” or showing a full URL as the link text.

• Good: Download the Building Permit Application (PDF)
• Avoid: Click here

Images (Add Alternative Text)

If an image provides information, add alt text that describes its purpose. If it is decorative, mark it decorative so screen readers skip it.

• Good alt text explains what the image means, not what it looks like.
• Avoid starting alt text with “image of” or “picture of.”

Tables (Use Only for Data)

Use tables only when you need rows and columns to present data. Turn on the header row (and header column if needed). Do not use tables for page layout.

Final Publish Check

• Headings are in order and form a clear outline.
• Lists use the list tools (not typed dashes).
• Links make sense out of context.
• Images have appropriate alt text (or are marked decorative).
• Tables include headers and are kept simple.