Making Your Google Site Accessible for All Users

Making Your Google Site Accessible for Everyone

TL;DR:

• Add alt text to images so screen readers can describe them to visually impaired users
• Test keyboard navigation regularly to ensure motor-disabled users can browse your site
• Choose high-contrast colour schemes for better visibility
• Use Google Sites' built-in accessibility tools effectively
• Test your changes with real users when possible

Google Sites gives you several tools to make your website accessible to people with disabilities. Here's how to use them properly.

Adding Alt Text to Images

Alt text helps screen readers describe images to visually impaired visitors. Without it, users just hear "image" with no context.

To add alt text in Google Sites:

Joun Pixelhaze for free and gain access to courses, plugins and discounts.

1. Click on your image
2. Select "Format" from the toolbar
3. Choose "Alt text" from the menu
4. Write a clear description and click "OK"

Write descriptions that capture the purpose of the image, not just what it looks like. For a photo of someone using a laptop, "Person typing on laptop" works better than "Man in blue shirt sitting at desk."

Keep descriptions under 125 characters when possible. Screen readers handle shorter text better.

Setting Up Keyboard Navigation

Some users can't use a mouse and rely entirely on keyboard navigation. Google Sites supports this, but you need to test it works properly.

Here's how to check your keyboard navigation:

1. Use only your Tab key to move between links, buttons and form fields
2. Check the order makes logical sense (left to right, top to bottom)
3. Make sure every clickable element can be reached
4. Test that Enter and Space keys activate buttons and links

Pay attention to any elements that seem impossible to reach with just a keyboard. These need fixing.

The Tab key should create a visible outline around each element as you move through the page. If you can't see where the focus is, users will get lost.

Choosing Better Colour Contrast

Poor colour contrast makes text hard to read, especially for users with visual impairments. Google Sites' default themes usually handle this well, but custom colours can cause problems.

To adjust colours in Google Sites:

1. Click "Themes" in the right panel
2. Select "Colors"
3. Choose combinations that offer strong contrast between text and background
4. Test readability by viewing your site on different devices

Dark text on light backgrounds generally works best. Avoid colour combinations like red text on green backgrounds, which can be invisible to colour-blind users.

If you're unsure about contrast levels, online contrast checkers can tell you if your colours meet accessibility standards.

Using Headers and Structure

Screen readers use your page structure to help users navigate. Google Sites handles most of this automatically, but you can improve it.

Use the text formatting options to create proper headings:

1. Select your text
2. Choose "Normal text" dropdown
3. Pick "Heading 1" for main sections, "Heading 2" for subsections
4. Don't skip heading levels (don't jump from H1 to H3)

This creates a logical structure that screen readers can use to jump between sections.

Testing Your Changes

The best way to know if your accessibility improvements work is to test them. Try these approaches:

• Navigate your entire site using only the keyboard
• Use your browser's built-in screen reader (if available)
• Ask someone with accessibility needs to test your site
• Check your site on mobile devices where accessibility features are commonly used

Small issues become obvious when you actually try to use your site the way disabled users would.

FAQs

How long should alt text be?
Keep it under 125 characters when possible. Focus on the image's purpose rather than detailed descriptions.

Can I test keyboard navigation on mobile?
Yes, but the experience differs from desktop. Many mobile users with disabilities use switch controls or voice commands rather than traditional keyboard navigation.

Does Google Sites automatically handle accessibility?
Google Sites covers the basics like semantic HTML structure, but you still need to add alt text, check colour contrast, and test keyboard navigation yourself.

What if I can't improve the colour contrast enough?
Consider changing your theme entirely. Sometimes the colour scheme simply doesn't work for accessibility, and starting fresh is easier than trying to fix it.

Jargon Buster

Alt text: Short descriptions of images that screen readers speak aloud to visually impaired users

Keyboard navigation: Moving through a website using only keyboard keys like Tab, Enter, and arrow keys

Screen reader: Software that reads website content aloud for users who can't see the screen

Colour contrast: The difference in brightness between text and background colours

Semantic HTML: Code that describes the meaning and structure of content, not just how it looks

Wrap-up

Making your Google Site accessible doesn't require technical expertise, just attention to detail. Focus on adding alt text to images, ensuring keyboard navigation works smoothly, and choosing colours with good contrast. Test your changes regularly and remember that accessibility improvements benefit all users, not just those with disabilities.

The time you spend on accessibility creates a better experience for everyone who visits your site.

Ready to build more inclusive websites? Join Pixelhaze Academy for detailed tutorials and ongoing support.