Google Sites Basics: Accessibility and Readability

Learning Objectives

• Understand how to adjust text contrast for better readability
• Learn how to add and format alt text to images
• Discover how to customise font size and structure accessible layouts

Introduction

This chapter covers the essential steps to make your Google Sites accessible and readable for everyone. You'll learn practical techniques to ensure visitors with different abilities can use your site effectively. We'll cover text contrast, alt text, font sizing, and layout design that works for all users.

Lessons

Enhancing Text Contrast

Good text contrast makes your content readable for everyone, especially users with visual impairments.

Step 1: Open your Google Site editor and select the text you want to modify.

Step 2: Click on "Themes, Colors, and Fonts" in the toolbar.

Step 3: Choose your text colour first, then select a background colour that creates strong contrast.

Step 4: Preview your changes to ensure the text remains easy to read.

Test different colour combinations until you find one that's both visually appealing and highly readable. Dark text on light backgrounds typically works best, but light text on dark backgrounds can also be effective.

Implementing Alt Text in Images

Alt text helps screen readers describe images to visually impaired users and improves your site's search engine performance.

Step 1: Click on any image in your Google Site.

Step 2: Select "Alt Text" from the options menu that appears.

Step 3: Write a clear, concise description of what the image shows and its purpose on the page.

Step 4: Save your changes and repeat for all images on your site.

Focus on describing the image's content and function rather than just its appearance. If an image is purely decorative, you can mark it as such or leave the alt text blank.

Adjusting Font Size for Better Readability

Proper font sizing ensures your content is comfortable to read across different devices and user needs.

Step 1: Highlight the text you want to resize.

Step 2: Open the "Themes, Colors, and Fonts" panel.

Step 3: Select an appropriate font size from the dropdown menu.

Step 4: Check how your text looks on both desktop and mobile views.

Start with larger sizes for headings and ensure body text is large enough to read comfortably. Consider your audience when choosing sizes.

Designing Accessible Layouts

A well-structured layout helps all users navigate your site more easily.

Step 1: Plan your page structure with clear sections and logical information flow.

Step 2: Use proper heading hierarchy (H1 for main titles, H2 for section headings, etc.).

Step 3: Group related content together and leave adequate white space between sections.

Step 4: Ensure clickable elements are large enough and spaced appropriately.

Think about how users will move through your content. Each section should flow naturally to the next, with clear visual breaks between different topics.

Practice

Create a test page on your Google Site and implement these accessibility features:

1. Choose a high-contrast colour scheme for your text and background
2. Add descriptive alt text to at least three images
3. Adjust font sizes to ensure comfortable reading
4. Structure your content with clear headings and logical sections

Ask someone else to review your page and provide feedback on readability and navigation.

FAQs

How can I check if my colour contrast is good enough?
Use online contrast checkers like WebAIM's tool to test your colour combinations. Enter your text and background colours to get an accessibility rating.

What should I write for decorative images?
For purely decorative images that don't add information, you can leave the alt text empty or write "decorative image" to let screen readers know they can skip it.

Can I make my Google Site work better with screen readers?
Yes, proper headings, alt text, and logical content structure all help screen readers navigate your site effectively.

How do I know if my font size is large enough?
Test your site on different devices and ask others to review it. If people need to zoom in to read comfortably, increase your font size.

Jargon Buster

• Accessibility: Making websites usable by people with disabilities or different abilities
• Alt text: Descriptive text that explains what an image shows, read aloud by screen readers
• Contrast ratio: The difference between text and background colours, measured to ensure readability
• Screen reader: Software that reads website content aloud for visually impaired users

Wrap-up

Making your Google Site accessible benefits everyone who visits it. Good contrast, descriptive alt text, readable fonts, and logical layouts create a better experience for all users. These techniques are straightforward to implement and make a significant difference in how people interact with your content.

Continue applying these principles as you add new content to your site. Regular testing and user feedback will help you maintain high accessibility standards.

https://www.pixelhaze.academy/membership