Age Is Just a Data Point: My Heartfelt Journey into Web Accessibility with Alt Text🌱

 When I started my journey as a 50-year-old freshman in the AI Department (Class of '26), I reminded myself that age is merely a number—or rather, just a data point. Returning to school to study HTML and CSS completely shattered and rebuilt my digital worldview.

At first, I thought blogging was simply about uploading pretty photos and writing short captions underneath. However, during a class on Web Accessibility, I had a profound revelation. I learned that for individuals with visual impairments using screen readers—or even when images fail to load due to network errors—Alt Text steps in to describe what is on the screen. It started with a simple, empathetic question: "How do people who cannot see my photos experience my blog?" 

Here is my emotional and technical adventure of mastering image optimization alongside my favorite digital companion, Gemini!

💡1. A Novice Blogger’s Dilemma: From Code Confusion to Compassion 

Initially, I assumed Alt Text was just a technical trick to satisfy search engine robots. But learning that these short descriptions serve as the eyes for visually impaired readers deeply moved me. When I tried applying it to my own blog, however, I stumbled around completely lost. Should I wrap the text in quotes? How do I frame the description so it feels genuinely helpful to everyone?

Naturally, I turned to my trusty AI Tutor, Gemini, showering it with endless questions. From minor syntax nuances like whether adding extra quotes would break the code structure to full step-by-step setups, Gemini answered instantly. I realized that a tiny detail in code carries both technology and human consideration. With every fix, I grew a little more!

2. My Step-by-Step Alt Text & Image Optimization Routine 🚀

Together with Gemini, I established a clear, step-by-step image management routine that anyone can follow.

A screenshot showing how to click the settings icon on an image in the Blogger editor to enter Alt Text.
How to set image Alt Text in Google Blogger editor

  • 🧭Step 1: Strategic File Naming & Organized Storage 

     I broke the bad habit of saving files as "capture1.png" or "image.jpg." To make them easily readable for both computers and humans, I began naming files with clear keywords (e.g., favicon-fluamondo.png) and organizing them systematically in a dedicated Google Drive folder named Blog_Images_Final.

  • 📝Step 2: Crafting Meaningful Descriptions 

    The key is describing the image clearly, as if gently painting the scene for someone who cannot see it.

    • Poor Example: Image of alt text input (A cluster of meaningless words).

    • Good Example: A smiling 50-year-old female blogger entering alt text for visually impaired readers on her laptop screen.

  • 📌Step 3: Layout, Readability, and Tooltips 

    Adjusting photo sizes to "Medium" or "Large" ensures comfortable reading, while center alignment gives the layout a clean, magazine-like feel. Finally, adding a Title Text (Tooltip) that appears when hovering over the image completes the package.

    A screenshot of the Edit Image popup window showing Alt Text and Title Text input fields in Blogger editor.
    Entering Alt Text and Title Text in Google Blogger Image Settings

If you want to dive deeper into proper image management, I strongly recommend visiting the Google Blogger guide to image alt text to learn directly from expert practices!

3. Infusing Technology with Warmth 📌

Moving beyond merely "posting content" to actively "caring for unseen readers" made my blog feel infinitely more meaningful. As I lovingly retrofitted all my images with Alt Text, I started feeling like a true professional. Though, to be completely honest, wiping and re-uploading all my previous blog images from scratch was quite the exhausting manual labor! 😭 Still, this warm yet challenging high-tech survival story continues!

🧠My AI Dictionary 🧠

  • Web Accessibility: A set of standards ensuring that all users, including individuals with disabilities or elderly users, can equally access and understand web content. Think of it as a ramp right next to a set of stairs.

  • Alt Text (Alternative Text): An HTML attribute used to describe images. Screen readers speak this text aloud for visually impaired users, and search engines use it to understand what an image depicts.

✍️ A Message to Fellow Lifelong Learners

What about you? Have you ever looked at a routine task and realized it could be an act of empathy? Just as we streamlined our blogging setup using the Chrome Gemini Side Panel Guide, taking the extra step to optimize images with Alt Text transforms our digital space into an inclusive home for everyone. Technology is at its best when it reflects human warmth—let's keep building a web that welcomes all! 🌟

📌 Explore More in the Wandering AI Explorer Series

Comments

Post a Comment