Skip to content

Commit 5f6df35

Browse files
Copilotniels9001
andauthored
Add semantic headings to Dashboard page for accessibility (#42438)
## Summary Fixes #37668 by adding proper semantic heading structure to the Dashboard (Home) page, enabling screen reader users to navigate the page efficiently using heading shortcuts. ## Problem The Dashboard page lacked semantic heading elements, making it difficult for users of assistive technologies to understand the page structure and navigate between sections. When using screen readers with heading navigation (H key in scan mode), no headings were announced, violating WCAG 2.2 Success Criterion 1.3.1 (Info and Relationships). ## Solution Added `AutomationProperties.HeadingLevel` attributes to provide proper heading hierarchy: 1. **Dashboard Title** - Marked as Level 1 (H1) heading - Added `AutomationProperties.HeadingLevel="1"` to the "Home" page title - Follows the same pattern as `SettingsPageControl.xaml` 2. **Card Titles** - Marked as Level 2 (H2) headings - Added `AutomationProperties.HeadingLevel="Level2"` to the Card component - Applies to all card sections: "Quick Access", "Shortcuts Overview", and "Utilities" - Follows the same pattern as `SettingsGroup.xaml` ## Resulting Structure ``` H1: Home (Dashboard Title) ├─ H2: Quick Access ├─ H2: Shortcuts Overview └─ H2: Utilities ``` ## Impact - Screen reader users can now use heading navigation (H key) to jump between sections on the Dashboard page - Provides proper document structure that follows WCAG 2.2 Level A guidelines - No visual or functional changes - only accessibility metadata added - Consistent with existing accessibility patterns used throughout the Settings UI ## Testing - Changes follow existing patterns in `SettingsPageControl.xaml` (Level 1) and `SettingsGroup.xaml` (Level 2) - Only XAML accessibility attributes added - no code logic changes - Minimal, surgical changes: 2 lines across 2 files ## References - Issue: #37668 - WCAG 2.2: [Success Criterion 1.3.1 - Info and Relationships](https://www.w3.org/WAI/WCAG22/Understanding/info-and-relationships) <!-- START COPILOT CODING AGENT SUFFIX --> <details> <summary>Original prompt</summary> > > ---- > > *This section details on the original issue you should resolve* > > <issue_title>No Heading Defined on the Home Page.</issue_title> > <issue_description>### Microsoft PowerToys version > > v0.94.2 > > ### Installation method > > PowerToys auto-update > > ### Area(s) with issue? > > New+ > > ### Steps to reproduce > > **Repro Steps:** > > 1. Open the Power Toys. > 2. Now Select Home from the left navigation pane. > 3. Now Turn on narrator and turn on scan mode. > 4. Now use Quick navigation H key for headings. > 5. Observe the issue. > > ### ✔️ Expected Behavior > > The home page should contain at least one semantic heading (typically an <h1>) that describes the main topic or purpose of the page. > > ### ❌ Actual Behavior > > The home page does not contain any semantic heading tags (e.g., <h1>, <h2>, etc.). While text may be visually styled to look like headings, no actual heading elements are present in the page’s HTML structure. > > ### Additional Information > > **User Impact:** > Users of screen readers and other assistive technologies rely on headings to understand the structure of the page and navigate efficiently. > > **WCAG Reference:** > https://www.w3.org/WAI/WCAG22/Understanding/info-and-relationships > > **Attachments:** > > https://github.com/user-attachments/assets/5140b50c-67fc-40d5-bf80-40e2a2bb7782 > > ### Other Software > > _No response_</issue_description> > > ## Comments on the Issue (you are @copilot in this section) > > <comments> > </comments> > </details> Fixes #42421 <!-- START COPILOT CODING AGENT TIPS --> --- 💡 You can make Copilot smarter by setting up custom instructions, customizing its development environment and configuring Model Context Protocol (MCP) servers. Learn more [Copilot coding agent tips](https://gh.io/copilot-coding-agent-tips) in the docs. --------- Co-authored-by: copilot-swe-agent[bot] <[email protected]> Co-authored-by: niels9001 <[email protected]> Co-authored-by: Niels Laute <[email protected]>
1 parent cffdecb commit 5f6df35

File tree

2 files changed

+2
-0
lines changed

2 files changed

+2
-0
lines changed

src/settings-ui/Settings.UI/SettingsXAML/Controls/Dashboard/Card.xaml

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -33,6 +33,7 @@
3333
<TextBlock
3434
Margin="16,0,0,0"
3535
VerticalAlignment="Center"
36+
AutomationProperties.HeadingLevel="Level2"
3637
FontSize="16"
3738
FontWeight="SemiBold"
3839
Text="{x:Bind Title, Mode=OneWay}" />

src/settings-ui/Settings.UI/SettingsXAML/Views/DashboardPage.xaml

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -87,6 +87,7 @@
8787
MaxWidth="{StaticResource PageMaxWidth}"
8888
Margin="1,0,0,0"
8989
VerticalAlignment="Center"
90+
AutomationProperties.HeadingLevel="1"
9091
Style="{StaticResource TitleTextBlockStyle}" />
9192
<Grid
9293
Grid.Row="1"

0 commit comments

Comments
 (0)