Web Content Checklist

As you build or update your website, you can refer to this checklist of web standards and best practices. It can help you keep your content clear, consistent, and easy for your audiences to navigate.

On this page:

• Page Structure & Text Style
• Navigation & Menus
• Writing & Content Quality
• Files, Images & Layout
• Page-Specific Guidance

Page Structure & Text Style

☐ Headings are structured hierarchically with only one H1 per page

The H1 is used for the page title. Use H2 headings for main sections of the page, followed by H3 or H4 headings for subsections as needed.

Always use heading levels in a logical, nested order. Do not skip heading levels, such as jumping from an H2 to an H4, and do not choose a heading level based on how it looks.

Why it matters: Headings act like an outline and help visitors and screen readers understand how information on the page is organized.

Remember:

• Use only one H1 per page for the page title
• Use H2 for main sections and H3 or H4 for subsections
• Keep heading levels in a logical order
• Do not skip heading levels

☐ Headings are used to organize page content, not just to make text stand out

Built-in heading styles should not be manually changed.

Why it matters: Headings should be used only when a new section begins and should follow the logical flow of the page. Using a heading just to emphasize something important — or manually changing heading capitalization or appearance — can confuse visitors and accessibility tools.

Tip: If you want to call out an important note, use a brief sentence with bold text.

☐ Navigation labels, buttons, and links avoid ALL CAPS and unnecessary punctuation

Titles and headers use Title Case, while links and buttons use sentence case.

Why it matters: All-caps and heavy punctuation reduce readability. Avoid adding punctuation to navigation labels or link text, such as exclamation points.

Examples: “Garden Workshops” uses Title Case, while “Register for the workshop” uses sentence case.

☐ Link text is clear and descriptive

Avoid vague phrases such as “click here” or “learn more.” Links should be embedded naturally in the text, and full web addresses do not need to be spelled out.

Why it matters: Screen reader users often navigate by links alone, so link text needs to make sense out of context.

☐ Buttons and links use real text, not images with text inside them

Why it matters: Images that contain text and act as buttons or links are difficult for screen readers to interpret and can be harder to use on different devices. Using real text for buttons and links improves accessibility, readability, and consistency across the site.

Navigation & Menus

☐ Top-level navigation is minimal and intuitive

Best practice is to use 5–7 main menu items whenever possible.

Why it matters: Too many items in the main menu can overwhelm visitors and make it harder to find key information, especially on mobile devices. Clear, well-organized navigation helps users quickly understand what your site offers.

Tips:

• The top-level navigation includes no more than 5–7 menu items whenever possible
• Each top-level menu item represents a category, not a long list of individual pages
• Think of a top-level page like a folder: it provides an overview and useful content for the topic, while more detailed pages live underneath it
• Subpages and deeper pages do not count toward the 5–7 item limit

For additional guidance, refer to the navigation and menu best practices.

☐ Menus include only real subpages within your site

If you need to share related ANR pages, PDFs, or outside links, place them in the page content where they have context.

Why it matters: Navigation should reflect your site structure. Putting links to other pages or documents within the page content adds context and improves usability.

Writing & Content Quality

☐ Paragraphs are short and broken up for easier reading

Use bulleted lists when appropriate.

Tip: If a paragraph is longer than 4–5 lines, consider breaking it into two paragraphs or a bulleted list.

☐ Key pages begin with a short introductory paragraph

The introduction should explain what the site or section is and who it serves.

Why it matters: A brief introduction helps users quickly understand where they are, whether the information is relevant to them, and how to navigate the page confidently.

Tip: Add a short introduction of 2–4 sentences explaining the purpose of the page and who it is for.

☐ Pages include brief explanatory text, not just lists of links

Why it matters: Pages that are only lists of links do not explain what the links are for or which ones matter most. Context helps visitors decide what to click and why.

Tip: Introduce groups of links with a short sentence explaining what they relate to or who they are for.

☐ Acronyms and abbreviations are defined or spelled out at first use

Spell out acronyms and abbreviations the first time they appear to provide clarity for visitors.

Files, Images & Layout

☐ File types are properly labeled

PDFs should be labeled in parentheses, in all caps, with the file size.

Example: (PDF, 1.2 MB)

Why it matters: Visitors should know when they are downloading a file and how large it is.

☐ Text is presented as real HTML text, not embedded within images

Why it matters: Text inside images cannot be resized easily, searched, translated, or read by screen readers. Real text is more accessible and consistent.

☐ PDFs and flyers are only uploaded if they are accessible

Why it matters: PDFs and flyers must be accessible to be readable by screen readers and usable by all visitors. Image-only PDFs, such as scanned or designed flyers, create accessibility barriers and should not be uploaded.

If a document’s accessibility cannot be confirmed, the information should be added as regular page text instead of a PDF.

Tip: When in doubt, do not upload the PDF or flyer. Add the information directly to the page using headings and text.

☐ Tables are used only for tabular information

Tables should only be used for information that looks like a spreadsheet, such as lists of numbers or comparisons arranged in rows and columns.

Why it matters: Tables work well for comparisons and structured data, but they can be difficult to read on mobile and confusing for screen readers when used for layout.

Tip: If you are trying to align content visually, use lists or approved layout tools such as the Bootstrap grid rather than tables. You can find layout examples on the CKEditor Bootstrap Gird page. 

☐ Images include appropriate alt text and captions when needed

Alt text provides a text alternative that communicates an image's purpose or meaning. It should be concise, meaningful and reflect the image's role in the surrounding content.

Why it matters: Screen readers announce alt text to people who cannot see the image, making its purpose or meaning available through speech or braille.

Tips for alt text:

• Focus on the information or purpose the image contributes to the page
• Keep alt text concise and avoid unnecessary visual details
• Consider the surrounding content when deciding what information to include
• Avoid repeating information that is already provided in nearby text
• Avoid phrases such as “image of” or “photo of”
• Decorative images that do not add meaningful information generally do not need descriptive alt text

If an image requires a lengthy explanation, provide that information in the surrounding page content rather than trying to include everything in the alt text.

Do I also need a caption? Not always. Add a caption when an image needs visible context, such as who, what, where or when; presents data or complex information; requires attribution or a photo credit; or plays an important role in understanding the surrounding content.

Images that are purely decorative or used only for visual support do not need captions.

☐ Images use a maximum display size of “Medium” unless there is a clear reason to use a larger size

Why it matters: Oversized images can overwhelm the page, compete with the written content, and distract visitors instead of supporting the message.

☐ All headers and body text are left-aligned, not center-aligned

Why it matters: Left-aligned text is easier to read and scan, particularly for longer content and for visitors with reading or visual challenges.

Page-Specific Guidance

Homepage

☐ The homepage uses an appropriate header (hero) image

Why it matters: The header image creates the first impression of the site. A high-quality, decorative image without text helps the page feel welcoming and professional.

Tip: Header images should be high-resolution, not grainy, use the “Narrow” display setting, and appear on the homepage only rather than on all subpages.

☐ Dynamic Related Content (Carousel) is not used; key related content is moved into the homepage body

Why it matters: The carousel was removed due to formatting and usability issues.

Tip: Do not manually recreate the carousel. If you want to highlight a blog post, article or other related content, create a simple on-page promotion or link instead.

☐ Primary social media accounts are added using the Social Media Account content type, if applicable

Why it matters: The Social Media Account content type displays your site's primary social media accounts consistently as icons near the main navigation.

If your site includes multiple programs with their own social media accounts, those additional accounts can be listed on your contact page using descriptive text links.

See Social Media Account for instructions and additional guidance.

Contact Page

☐ Contact Information links to a complete, up-to-date contact page

Your site's Contact Information shortcut should link to your main contact page, where visitors can find general contact information and information about your team.

Why it matters: Visitors should be able to quickly find out how to reach your program and the people who work there.

Tip: See Contact Pages for the recommended structure, staff display options, directory profile links and social media guidance.