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.
Accessibility: This checklist includes some accessibility best practices but does not cover accessibility requirements in depth. Visit the UC ANR accessibility site for requirements, training, and guidance.
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, followed by H2, H3, and H4 headings in a logical order.
Why it matters: Headings act like an outline and help visitors and screen readers understand the page.
☐ 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.
What not to do
- Click here for more
- Register at this page for more information: ucanr.edu/site/master-gardener-event
☐ 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.
What to do
Add important information, such as event details or announcements, as real text directly on the page.
What not to do
Do not rely on an image or graphic to communicate essential text or information.
☐ 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.
What to do
Use tables for structured data, such as numbers or comparisons arranged in rows and columns.
What not to do
Do not use tables to position text or images side by side or to control the visual layout of a page
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 Sample IWP site.
☐ All images include concise, accurate alt text
Alt text should describe an image’s content or purpose.
Why it matters: Alt text allows people using screen readers to understand what the image conveys. It also helps when images fail to load.
Tip: Alt text is a short sentence that explains what is happening in a picture for people who cannot see it. You do not need to say “This photo has” or “This is a picture of.” Instead, describe what you would say if you were explaining the picture to someone over the phone.
☐ 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.
☐ Official social media accounts are added using the Social Media content type, if applicable
Why it matters: The Social Media content type automatically displays social links as icons below the main navigation, keeping the site consistent and professional.
See the IWP training site for more information about adding these icons to the homepage.
Tip: You can also list social media accounts on the Contact Us page, using text links rather than icons.
Contact Us
☐ A “Contact Us” shortcut is present and links to the site’s main Contact Us page that follows the standard layout
Make sure the “Contact Us” shortcut is present and links to your site’s main Contact Us page. The Contact Us page should include the required contact information and follow the standard layout.
Why it matters: Visitors use the Contact Us page to quickly find out how to reach your program. A consistent structure across sites makes information easy to find, scan, and understand.
How to Reach Us
The page should include a “How to Reach Us” section at the top using an H2 heading.
This section includes, at minimum:
- Email address
- Phone number
- Physical address, if available
This structure is required and standard across the organization.
Meet Our Team
Below the “How to Reach Us” section, include a standard “Meet Our Team” H2 heading.
- For a small number of people, use a simple table with names, titles, and contact details
- If featuring staff profile photos, use a Bootstrap grid layout, not a table
- If a staff photo is not available, use the standard placeholder image or a text-only layout rather than leaving a broken image
See the Sample IWP site for options for displaying staff information.
Social Media Links
The Contact Us page is an appropriate place to list social media accounts in addition to adding them through the Social Media content type.
- Use text links only
- Do not use icons on this page
- See the Sample IWP site for guidance on formatting social media links
Important: Do not use icons, buttons, or other visual elements on the Contact Us page.