Skip to content

Accessibility: Add missing descriptive title for GitHub button iframe #211

@babblebey

Description

@babblebey

Problem

The GitHub star button iframe on the homepage has a generic "GitHub" title attribute. This doesn't provide enough context for screen readers and assistive technologies to understand what the iframe contains.

Current Behavior

The iframe has a basic title: title="GitHub"

Expected Behavior

The iframe should have a more descriptive title that clearly explains its purpose.

Location

File: src/pages/index.astro
Line: 27

Proposed Solution

Replace the generic title with a more descriptive one.

Current code:

<iframe
  src="https://ghbtns.com/github-btn.html?user=jargonsdev&repo=jargons.dev&type=watch&count=true&size=large"
  frameborder="0"
  scrolling="0"
  width="120"
  height="30"
  title="GitHub"
>
</iframe>

Should become:

<iframe
  src="https://ghbtns.com/github-btn.html?user=jargonsdev&repo=jargons.dev&type=watch&count=true&size=large"
  frameborder="0"
  scrolling="0"
  width="120"
  height="30"
  title="Star jargons.dev on GitHub"
>
</iframe>

Alternative titles to consider:

  • "Star jargons.dev on GitHub"
  • "GitHub star button for jargons.dev"
  • "Star this project on GitHub"

Steps to Test

  1. Update the title attribute
  2. Test with a screen reader or accessibility tool
  3. Verify the page still displays correctly
  4. Ensure the iframe functionality remains intact

Additional Context

This is a good first issue because:

  • ✅ Simple one-line change
  • ✅ Improves accessibility
  • ✅ Clear improvement for assistive technologies
  • ✅ No complex logic required

Accessibility Benefits

  • Screen readers will announce a meaningful description
  • Users with assistive technologies will better understand the iframe's purpose
  • Improves overall accessibility score of the application

Definition of Done

  • Update iframe title to be more descriptive
  • Verify accessibility improvement
  • Test that iframe functionality remains intact
  • Ensure no visual changes to the page

Metadata

Metadata

Assignees

Labels

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions