Auto-Alt & Auto-Title (A11y + SEO) for Sngine

Adds title attributes to ALL links:

• Uses link text if available
• Smart context detection (profile, blog, post, etc.)
• Examples:
  • Profile link: Visit John's profile
  • Blog link: Read: My Blog Title
  • Post link: View post
  • Page link: Visit ScriptsTribe

✅ SEO: H2/H3 to H1 Conversion

Automatically converts page headers for proper SEO:

• Page titles (H2) become h1
• Blog post titles (H3) become h1
• Keeps same styling (with class="h2" or class="mb10 h3")
• Only converts the main page/content title
• Works for:
  • Listing pages: Blogs, Pages, Groups, Events, Forums, Market, Jobs, Courses, Offers, Games, Movies, Contact Us
  • Blog view pages: Individual blog post titles
• Each page should have ONE H1 (Google requirement)

🎨 Customization

To change the fallback text, edit auto-alt.js lines 12-27:

fallbacks: {
      avatar: {
        withName: "{name}'s profile picture",
        default: "User profile picture"
      },
      cover: {
        withName: "{name}'s cover photo",
        default: "Cover photo"
      },
      blog: {
        withTitle: "Image from: {title}",
        default: "Blog post image"
      },
      post: "Shared photo",
      product: "Product image",
      pageAvatar: "{name} logo",
      groupAvatar: "{name} logo",
      eventCover: "Event cover image",
      decorative: "", // Empty for accessibility
      generic: "Image"
    },
    linkFallbacks: {
      profile: "Visit {name}'s profile",
      blog: "Read: {title}",
      post: "View post",
      page: "Visit {name}",
      group: "Visit {name}",
      event: "View event: {name}",
      product: "View product",
      generic: "Click to view"

⚡ Performance

🔧 Troubleshooting

Q: Images still have no alt text?

• Check browser console for errors
• Verify the file path is correct
• Clear browser cache
• Make sure you added the line to _footer.tpl

Q: Background images (in divs) have no accessibility?

• Right-click → Inspect
• Look for role="img" and aria-label="..."
• These are for screen readers, not visible

Q: Links don't have titles?

• Hover over a link to see the tooltip
• Or right-click → Inspect → look for title="..."

Q: Can I disable it temporarily?

Just comment out the line in _footer.tpl:

Q: Does it work with AJAX-loaded content?

Yes! It uses MutationObserver to detect new images/links.

Q: How do I check if it's working?

• Open browser console (F12)
• Type: document.querySelectorAll('img[alt]').length
• Should show number of images with alt text
• Before script: lower number
• After script: higher number

📧 Support

Built for Sngine by ScriptsTribe
Questions? Join our Facebook group or visit scriptstribe.com

📄 License

Free & Open Source

Created by ScriptsTribe for the Sngine community.
Use, modify, and share freely.