a11y: add alt text and aria-labels to images for accessibility#1492
Open
GaneshPatil7517 wants to merge 5 commits intoapache:mainfrom
Open
a11y: add alt text and aria-labels to images for accessibility#1492GaneshPatil7517 wants to merge 5 commits intoapache:mainfrom
GaneshPatil7517 wants to merge 5 commits intoapache:mainfrom
Conversation
Fixes apache#1482 Changes: - Add aria-label and role=img to SVG icons in header (Hugo and Antora) - Add aria-label and role=img to SVG icons in footer (Hugo and Antora) - Improve blog post featured image alt text to be dynamic (uses post title)
There was a problem hiding this comment.
Pull request overview
Improves accessibility of social icon links and blog featured images by adding text alternatives and ARIA attributes across Hugo and Antora templates.
Changes:
- Added
aria-labelandrole="img"to social media SVG icons in header/footer templates (Hugo + Antora). - Updated blog featured image
alttext to be derived from the post title.
Reviewed changes
Copilot reviewed 5 out of 5 changed files in this pull request and generated 4 comments.
Show a summary per file
| File | Description |
|---|---|
| layouts/partials/header.html | Adds ARIA attributes to header social SVG icons. |
| layouts/partials/footer.html | Adds ARIA attributes to footer social SVG icons. |
| layouts/blog/post.html | Makes featured image alt text dynamic using the post title. |
| antora-ui-camel/src/partials/header-content.hbs | Adds ARIA attributes to Antora header social SVG icons. |
| antora-ui-camel/src/partials/footer-content.hbs | Adds ARIA attributes to Antora footer social SVG icons. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
Contributor
|
🚀 Preview is available at https://pr-1492--camel.netlify.app |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Description
Fixes #1482
This PR improves accessibility compliance by adding proper alt text and aria-labels to images and SVG icons across the website.
Changes Made
SVG Icon Accessibility (Header & Footer)
aria-labelattribute to all social media SVG icons (GitHub, Zulip, Twitter, LinkedIn)role="img"to SVGs to ensure screen readers properly identify them as imagesFiles Modified:
layouts/partials/header.html- Hugo header SVG iconslayouts/partials/footer.html- Hugo footer SVG iconsantora-ui-camel/src/partials/header-content.hbs- Antora header SVG iconsantora-ui-camel/src/partials/footer-content.hbs- Antora footer SVG iconsBlog Featured Image Alt Text
File Modified:
layouts/blog/post.htmlType
Accessibility / A11y improvement
Testing
Checklist