Accessibility Resources

Fonts Best Practices

Choose Simple, Readable Fonts

• Stick to clean, sans-serif fonts like Monteserrat (your sites's standard font), Arial, Roboto, or Open Sans, etc.

• Avoid overly decorative or script fonts for body text, as they can be hard to read.

Use Headings to Organize Content

• Title (Largest) – Use for the main page title.

• Heading (Smaller than Title) – Use for major sections.

• Subheading (Medium Size) – Use for subsections.

• Normal Text (Default Size) – Best for body text.

• Small Text – Only use for captions or footnotes.

💡 Tip: Keep headings consistent throughout your site for a professional look.

Use Proper Text Spacing

• Line spacing: Avoid squeezing too much text together.

• Paragraph breaks: Use short paragraphs to improve readability.

• Whitespace: Leave space around text to make it easier to scan.

Color Best Practices

Use High Contrast for Readability

• Best Choice: Dark text (black, dark gray) on a light background (white, pale colors).

• Avoid: Light text on a light background or dark text on a dark background.

• Example:
  ✅ Black text on a white background (easy to read)
  ❌ Yellow text on a white background (difficult to see)

Limit the Number of Colors

• Stick to 1-2 primary colors for headings and accents.

• Use a single color for body text (usually black or dark gray).

• Too many colors can be distracting and inconsistent.

Use Color for Emphasis, Not Decoration

• Bold text is better than using color alone for important points.

• Avoid neon or overly bright colors for text, as they can strain the eyes.

Check for Accessibility

• Make sure your color choices work for users with color blindness or visual impairments.

• Use free contrast checkers like the WebAIM Contrast Checker to test your site’s readability.

Examples of Good Font & Color Combinations

✅ Best Practices:

• Black or dark gray text on a white or light background

• Navy blue or dark green headings with black body text

• Limited accent colors (for links or buttons)

❌ Avoid:

• Yellow or light gray text on a white background

• Overuse of bright red or neon colors

• Too many font styles on the same page

Adding an Image in Google Sites

1. Open your Google Site and go to the page where you want to add an image.

2. Click the Insert tab on the right-hand menu.

3. Select Images, then choose one of the following options:

   • Upload: Select an image from your computer.

   • Select Image: Choose from Google Drive or Google Photos.

4. Click Open to insert the image onto the page.

Making the Image Accessible

Add alt text (alternative text) so screen readers can describe the image for visually impaired users.

Adding Alt Text in Google Sites

1. Click on the image to select it.

2. In the small menu that appears above or below the image, click the three dots (More options).

3. Select Add alt text.

4. In the "Alt text" box, enter a brief but meaningful description of the image.

   • Example: Instead of “dog,” use “Golden Retriever sitting in a grassy field with a blue sky.”

5. Click Apply to save the alt text.

Additional Tips for Accessibility

✔️ Use meaningful images: Ensure the image adds value to the content and isn’t just decorative.
✔️ Avoid text in images: If necessary, provide the same information in text form elsewhere on the page.
✔️ Check contrast: Ensure the image has good contrast if it includes essential details.
✔️ Gemini and other Alt Text Creators: There are several Alt Text creators that are free: Gemini, Arizona State Image Accessibility Creator, Canva and more.

Using Headers in Google Sites for Accessibility

1. Add and Format Headers

Proper headings help screen readers navigate the page and improve readability. Follow these steps to add and label headings correctly:

• Open your Google Site and go to the page you want to edit.

• Click inside a Text Box or add a new one by clicking Insert → Text Box.

• Highlight the text you want to format as a heading.

• Click the dropdown menu in the text formatting toolbar (it may say “Normal text” by default).

• Choose the appropriate heading level:

  • Title: Use for the main page title (only one per page).

  • Heading: Use for main section headings (H1 equivalent).

  • Subheading: Use for subsections (H2 equivalent).

  • Normal text: Use for body text.

2. Best Practices for Headers

✅ Follow a logical heading structure:

• Use Heading (H1) for the main sections.

• Use Subheading (H2) for subsections.

• Avoid skipping levels (e.g., don’t jump from H1 to H3).

✅ Keep headers descriptive:

• Instead of “Introduction,” use “Introduction to Oklahoma Archives” to provide more context.

✅ Do not use bold text instead of a heading:

• Always use the heading styles instead of just making text bold or larger.

The WAVE (Web Accessibility Evaluation Tool) is a free online tool developed by WebAIM to help users identify accessibility issues on web pages. It provides visual feedback and highlights potential barriers for people with disabilities, making it an excellent resource for improving accessibility.

1. Accessing the WAVE Tool

• Go to the WAVE website.

• You can:

  • Enter a URL to test a live website.

  • Use the WAVE browser extension (available for Chrome and Firefox) 

2. Key Features of WAVE

WAVE identifies and highlights key accessibility issues using a visual overlay. It categorizes findings into different sections:

• Errors (Red Icons): Accessibility problems that must be fixed.

  • Examples: Missing alt text for images, empty links, or missing form labels.

• Alerts (Yellow Icons): Potential issues that may require manual review.

  • Examples: Redundant text, suspicious headings, or low-contrast text.

• Features (Green Icons): Elements that improve accessibility.

  • Examples: Correct use of ARIA landmarks or alt text on images.

• Structural Elements (Blue Icons): Basic HTML structural elements like headings and lists.

  • Examples: Proper heading levels (<h1>, <h2>).

• Contrast Errors: Highlights text that lacks sufficient color contrast against the background.

3. Running a WAVE Analysis

• Step 1: Visit WAVE or open the WAVE browser extension.

• Step 2: Enter the URL or analyze the page you’re viewing.

• Step 3: Review the overlay with icons and accompanying sidebar report.

4. Interpreting Results

The sidebar on the left will provide a summary of findings:

• Summary Tab: Overview of errors, alerts, and features.

• Details Tab: A list of all identified issues with explanations and links to more information.

• Structure Tab: Highlights the page’s structure, showing landmarks, headings, and lists.

• Contrast Tab: Checks color contrast and highlights areas that need adjustment.

5. Tips for Fixing Issues

• Errors: Always prioritize fixing these as they are likely to impact accessibility.

  • Add missing alt text for images (alt="").

  • Use proper labels for form fields.

  • Ensure all links are descriptive and not empty.

• Contrast Issues: Ensure your text meets WCAG standards:

  • Minimum ratio of 4.5:1 for normal text amd 3:1 for large text (18px or 14px bold).

  • Results show up under the contrast tab where you can also test lighter/darker colors until they pass.

• Alerts: Review manually to ensure there are no hidden issues.

  • Example: A heading that appears suspicious might just need restructuring.

Additional WAVE Resources

• WebAIM’s Tutorials: https://webaim.org provides detailed articles on accessibility best practices.