Skip to content

Add alt text to images in Spacing page for screen reader accessibility - #1981

Merged
Niels Laute (niels9001) merged 6 commits into
mainfrom
copilot/fix-1967
Jul 30, 2025
Merged

Niels Laute (niels9001) merged 6 commits into
mainfrom
copilot/fix-1967

Conversation

Copilot AI commented Jul 30, 2025 •

Copy link
Copy Markdown
Contributor

This PR addresses an accessibility issue where images in the WinUI 3 Gallery Spacing page lacked alternative text, causing screen readers to announce them as generic "Image" elements without providing meaningful context to users with visual impairments.

Changes Made

Added AutomationProperties.Name attributes to two Image elements in SpacingPage.xaml:

  • Cards layout image: "Example of spacing in a page with cards layout"
  • Form layout image: "Example of spacing in a form layout"

Before

<Image Source="{ThemeResource CardsImage}" />
<Image Source="{ThemeResource DialogImage}" />

After

<Image Source="{ThemeResource CardsImage}" AutomationProperties.Name="Example of spacing in a page with cards layout" />
<Image Source="{ThemeResource DialogImage}" AutomationProperties.Name="Example of spacing in a form layout" />

Impact

  • Accessibility: Screen readers will now announce descriptive context instead of just "Image"
  • Compliance: Meets WCAG 2.1 success criterion 1.1.1 (Non-text Content) and MAS 1.1.1 requirements
  • User Experience: Users with visual impairments can now understand what each layout example demonstrates
  • No functional changes: This is purely an accessibility enhancement with no impact on existing functionality

The alt text is descriptive and contextual, helping users understand that these are visual examples of different spacing patterns used in UI layouts.

Fixes #1967.


💬 Share your feedback on Copilot coding agent for the chance to win a $200 gift card! Click here to start the survey.

Copilot AI and others added 2 commits July 30, 2025 10:13
… images

Co-authored-by: niels9001 <9866362+niels9001@users.noreply.github.com>
Co-authored-by: niels9001 <9866362+niels9001@users.noreply.github.com>
Copilot AI changed the title [WIP] [WinUI 3 Gallery: Design-> Spacing]: Alt text is not defined for the images present under "Page with cards layout" and "Form Layout" headings. Jul 30, 2025
@niels9001
Niels Laute (niels9001) marked this pull request as ready for review July 30, 2025 10:16
Comment thread Standalone.props Outdated
Co-authored-by: niels9001 <9866362+niels9001@users.noreply.github.com>
@niels9001
Niels Laute (niels9001) enabled auto-merge (squash) July 30, 2025 12:25
@niels9001

Copy link
Copy Markdown
Collaborator

/azp run

@marcelwgn

Copy link
Copy Markdown
Contributor

/azp run

@niels9001
Niels Laute (niels9001) merged commit 086a7a0 into main Jul 30, 2025
@niels9001
Niels Laute (niels9001) deleted the copilot/fix-1967 branch July 30, 2025 17:29
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

3 participants