mirror of
https://github.com/microsoft/PowerToys.git
synced 2025-12-15 03:07:56 +01:00
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 microsoft/PowerToys#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] <198982749+Copilot@users.noreply.github.com> Co-authored-by: niels9001 <9866362+niels9001@users.noreply.github.com> Co-authored-by: Niels Laute <niels.laute@live.nl>
This commit is contained in:
@@ -33,6 +33,7 @@
|
||||
<TextBlock
|
||||
Margin="16,0,0,0"
|
||||
VerticalAlignment="Center"
|
||||
AutomationProperties.HeadingLevel="Level2"
|
||||
FontSize="16"
|
||||
FontWeight="SemiBold"
|
||||
Text="{x:Bind Title, Mode=OneWay}" />
|
||||
|
||||
@@ -87,6 +87,7 @@
|
||||
MaxWidth="{StaticResource PageMaxWidth}"
|
||||
Margin="1,0,0,0"
|
||||
VerticalAlignment="Center"
|
||||
AutomationProperties.HeadingLevel="1"
|
||||
Style="{StaticResource TitleTextBlockStyle}" />
|
||||
<Grid
|
||||
Grid.Row="1"
|
||||
|
||||
Reference in New Issue
Block a user