Add descriptive alt text to landing page images

[agarwalpranav0711]

What this PR does

• Adds meaningful and descriptive alt text to images on the landing page
• Improves accessibility and screen reader support
• Enhances SEO and overall inclusiveness

Why this change is needed

• Several images had missing or non-descriptive alt attributes
• Improves compliance with accessibility best practices

Related Issue

Closes #112

[vercel]

@agarwalpranav0711 is attempting to deploy a commit to the Sahil's projects Team on Vercel.

A member of the Team first needs to authorize it.

[gemini-code-assist]

Summary of Changes

Hello @agarwalpranav0711, I'm Gemini Code Assist¹! I'm currently reviewing this pull request and will post my feedback shortly. In the meantime, here's a summary to help you and other reviewers quickly get up to speed!

This pull request significantly enhances the accessibility and search engine optimization of the application's landing page. By implementing more descriptive alt attributes for key images, it ensures a more inclusive experience for users relying on screen readers and improves the site's overall discoverability.

Highlights

• Accessibility Improvement: Enhanced screen reader support and overall accessibility by adding descriptive alt text to images on the landing page.
• SEO Enhancement: Improved search engine optimization through more meaningful image descriptions, making content more discoverable.
• Compliance with Best Practices: Addressed missing or non-descriptive alt attributes to comply with web accessibility best practices.

Using Gemini Code Assist

The full guide for Gemini Code Assist can be found on our documentation page, here are some quick tips.

Invoking Gemini

You can request assistance from Gemini at any point by creating a comment using either /gemini <command> or @gemini-code-assist <command>. Below is a summary of the supported commands on the current page.

Feature	Command	Description
Code Review	/gemini review	Performs a code review for the current pull request in its current state.
Pull Request Summary	/gemini summary	Provides a summary of the current pull request in its current state.
Comment	@gemini-code-assist	Responds in comments when explicitly tagged, both in pull request comments and review comments.
Help	/gemini help	Displays a list of available commands.

Customization

To customize Gemini Code Assist for GitHub experience, repository maintainers can create a configuration file and/or provide a custom code review style guide (such as PEP-8 for Python) by creating and adding files to a .gemini/ folder in the base of the repository. Detailed instructions can be found here.

Limitations & Feedback

Gemini Code Assist may make mistakes. Please leave feedback on any instances where its feedback is incorrect or counter productive. You can react with 👍 and 👎 on @gemini-code-assist comments. If you're interested in giving your feedback about your experience with Gemini Code Assist for Github and other Google products, sign up here.

You can also get AI-powered code generation, chat, as well as code reviews directly in the IDE at no cost with the Gemini Code Assist IDE Extension.

Footnotes

1. Review the Privacy Notices, Generative AI Prohibited Use Policy, Terms of Service, and learn how to configure Gemini Code Assist in GitHub here. Gemini can make mistakes, so double check it and use code with caution. ↩

[gemini-code-assist]

Code Review

This pull request improves accessibility by adding more descriptive alt text to images, which is a great initiative. The change to the logo's alt text in Hero.jsx makes it more specific and is a clear improvement. For the TravelStoryCard.jsx component, I've added a suggestion to make the alt text more concise to avoid redundancy for screen reader users, which aligns with accessibility best practices. Overall, these are positive changes for the user experience.

[gemini-code-assist]

While adding more context to alt text is a good goal, prefixes like "Image of" or, in this case, "Travel story image:" are generally discouraged as per accessibility best practices. Screen readers already announce that the element is an image, so this can lead to redundant announcements (e.g., "Image, Travel story image: [title]"). Using just the title is more concise and provides a better user experience, assuming the title itself is descriptive.

Suggested change

	alt={`Travel story image: ${title}`}
	alt={title}