dotnet-accessibility

Name: dotnet-accessibility
Author: wshaddix

52installs10forks

How to install dotnet-accessibility?

wshaddix/dotnet-skills/dotnet-accessibility

$npx -y skills add wshaddix/dotnet-skills --skill dotnet-accessibility

Installs into the current project.

Summary

Building accessible .NET UI. SemanticProperties, ARIA, AutomationPeer, testing tools per platform.

Files · 1

View on GitHub

SKILL.md

1	# dotnet-accessibility
2
3	Cross-platform accessibility patterns for .NET UI frameworks: semantic markup, keyboard navigation, focus management, color contrast, and screen reader integration. In-depth coverage for Blazor (HTML ARIA), MAUI (SemanticProperties), and WinUI (AutomationProperties / UI Automation). Brief guidance with cross-references for WPF, Uno Platform, and TUI frameworks.
4
5	Scope boundary: This skill owns cross-cutting accessibility principles and per-framework accessibility APIs. Framework-specific development patterns (project setup, MVVM, routing, deployment) are owned by the respective framework skills.
6
7	Out of scope: Framework project setup -- see individual framework skills. Legal compliance advice -- this skill references WCAG standards but does not provide legal guidance. UI framework selection -- see [skill:dotnet-ui-chooser].
8
9	Cross-references: [skill:dotnet-blazor-patterns] for Blazor hosting and render modes, [skill:dotnet-blazor-components] for Blazor component lifecycle, [skill:dotnet-maui-development] for MAUI patterns, [skill:dotnet-winui] for WinUI 3 patterns, [skill:dotnet-wpf-modern] for WPF on .NET 8+, [skill:dotnet-uno-platform] for Uno Platform patterns, [skill:dotnet-terminal-gui] for Terminal.Gui, [skill:dotnet-spectre-console] for Spectre.Console, [skill:dotnet-ui-chooser] for framework selection.
10
11	---
12
13	## Cross-Platform Principles
14
15	These principles apply across all .NET UI frameworks. Framework-specific implementations follow in subsequent sections.
16
17	### Semantic Markup
18
19	Provide meaningful names and descriptions for all interactive and informational elements. Screen readers rely on semantic metadata -- not visual appearance -- to convey UI structure.
20
21	- Every interactive control must have an accessible name (text label, ARIA label, or automation property)
22	- Images and icons must have text alternatives describing their purpose
23	- Decorative elements should be hidden from the accessibility tree
24	- Group related controls logically so screen readers announce them in context
25
26	### Keyboard Navigation
27
28	All functionality must be operable via keyboard alone. Users who cannot use a mouse, pointer, or touch depend entirely on keyboard interaction.
29
30	- Maintain a logical tab order that follows the visual reading flow
31	- Provide visible focus indicators on all interactive elements
32	- Support standard keyboard patterns: Tab/Shift+Tab for navigation, Enter/Space for activation, Escape to dismiss, arrow keys within composite controls
33	- Avoid keyboard traps -- users must be able to navigate away from every control
34
35	### Focus Management
36
37	Programmatic focus management ensures screen readers announce context changes correctly.
38
39	- Move focus to newly revealed content (dialogs, expanded panels, inline notifications)
40	- Return focus to the triggering element when dismissing overlays
41	- Avoid stealing focus unexpectedly during background updates
42	- Set initial focus on the primary action when a page or dialog loads
43
44	### Color Contrast
45
46	Ensure text and interactive elements meet WCAG contrast ratios.
47
48	\| Element Type \| Minimum Ratio (WCAG AA) \| Enhanced Ratio (WCAG AAA) \|
49	\|---\|---\|---\|
50	\| Normal text (< 18pt) \| 4.5:1 \| 7:1 \|
51	\| Large text (>= 18pt or 14pt bold) \| 3:1 \| 4.5:1 \|
52	\| UI components and graphical objects \| 3:1 \| 3:1 \|
53
54	- Do not rely on color alone to convey information (use icons, patterns, or text labels as supplements)
55	- Support high-contrast themes and system color overrides
56	- Test with color blindness simulation tools
57
58	---
59
60	## Blazor Accessibility (In-Depth)
61
62	Blazor renders HTML, so standard web accessibility patterns apply. Use native HTML semantics and ARIA attributes to build accessible Blazor apps.
63
64	### Semantic HTML and ARIA
65
66	```razor
67	@* Use semantic HTML elements for structure *@
68	<nav aria-label="Main navigation">
69	<ul>
70	<li><a href="/products">Products</a></li>
71	<li><a href="/about">About</a></li>
72	</ul>
73	</nav>
74
75	<main>
76	<h1>Product Catalog</h1>
77
78	@* Image with alt text *@
79	<img src="hero.png" alt="Product showcase displaying three featured items" />
80
81	@* Decorative image hidden from accessibility tree *@
82	<img src="divider.svg" alt="" role="presentation" />
83
84	@* Button with accessible name from content *@
85	<button @onclick="AddToCart">Add to Cart</button>
86
87	@* Icon button requires aria-label *@
88	<button @onclick="ToggleFavorite" aria-label="Add to favorites">
89	<span class="icon-heart" aria-hidden="true"></span>
90	</button>
91	</main>
92	```
93
94	### Keyboard Event Handling
95
96	```razor
97	<div role="listbox"
98	tabindex="0"
99	aria-label="Product list"
100	aria-activedescendant="@_activeId"
101	@onkeydown="HandleKeyDown"
102	@onkeydown:preventDefault>
103	@foreach (var product in Products)
104	{
105	<div id="@($"product-{product.Id}")"
106	role="option"
107	aria-

wshaddixPublisher · 77 listings

Preview

wshaddix/dotnet-skills

# dotnet-accessibility

Cross-platform accessibility patterns for .NET UI frameworks: semantic markup, keyboard navigation, focus management, color contrast, and screen reader integrat

**Scope boundary:** This skill owns cross-cutting accessibility principles and per-framework accessibility APIs. Framework-specific development patterns (projec

**Out of scope:** Framework project setup -- see individual framework skills. Legal compliance advice -- this skill references WCAG standards but does not provi

Repowshaddix/dotnet-skills

License—

TypeSkills

CategoryCoding

UpdatedFeb 2026

Repo stars65

First seenJul 22, 2026

People who liked this also viewed

6 picks

Type

dotnet-accessibility

52installs10forks

View on GitHub

How to install dotnet-accessibility?

wshaddix/dotnet-skills/dotnet-accessibility

$npx -y skills add wshaddix/dotnet-skills --skill dotnet-accessibility

Installs into the current project.

Summary

Building accessible .NET UI. SemanticProperties, ARIA, AutomationPeer, testing tools per platform.

Files · 1

View on GitHub

SKILL.md

1	# dotnet-accessibility
2
3	Cross-platform accessibility patterns for .NET UI frameworks: semantic markup, keyboard navigation, focus management, color contrast, and screen reader integration. In-depth coverage for Blazor (HTML ARIA), MAUI (SemanticProperties), and WinUI (AutomationProperties / UI Automation). Brief guidance with cross-references for WPF, Uno Platform, and TUI frameworks.
4
5	Scope boundary: This skill owns cross-cutting accessibility principles and per-framework accessibility APIs. Framework-specific development patterns (project setup, MVVM, routing, deployment) are owned by the respective framework skills.
6
7	Out of scope: Framework project setup -- see individual framework skills. Legal compliance advice -- this skill references WCAG standards but does not provide legal guidance. UI framework selection -- see [skill:dotnet-ui-chooser].
8
9	Cross-references: [skill:dotnet-blazor-patterns] for Blazor hosting and render modes, [skill:dotnet-blazor-components] for Blazor component lifecycle, [skill:dotnet-maui-development] for MAUI patterns, [skill:dotnet-winui] for WinUI 3 patterns, [skill:dotnet-wpf-modern] for WPF on .NET 8+, [skill:dotnet-uno-platform] for Uno Platform patterns, [skill:dotnet-terminal-gui] for Terminal.Gui, [skill:dotnet-spectre-console] for Spectre.Console, [skill:dotnet-ui-chooser] for framework selection.
10
11	---
12
13	## Cross-Platform Principles
14
15	These principles apply across all .NET UI frameworks. Framework-specific implementations follow in subsequent sections.
16
17	### Semantic Markup
18
19	Provide meaningful names and descriptions for all interactive and informational elements. Screen readers rely on semantic metadata -- not visual appearance -- to convey UI structure.
20
21	- Every interactive control must have an accessible name (text label, ARIA label, or automation property)
22	- Images and icons must have text alternatives describing their purpose
23	- Decorative elements should be hidden from the accessibility tree
24	- Group related controls logically so screen readers announce them in context
25
26	### Keyboard Navigation
27
28	All functionality must be operable via keyboard alone. Users who cannot use a mouse, pointer, or touch depend entirely on keyboard interaction.
29
30	- Maintain a logical tab order that follows the visual reading flow
31	- Provide visible focus indicators on all interactive elements
32	- Support standard keyboard patterns: Tab/Shift+Tab for navigation, Enter/Space for activation, Escape to dismiss, arrow keys within composite controls
33	- Avoid keyboard traps -- users must be able to navigate away from every control
34
35	### Focus Management
36
37	Programmatic focus management ensures screen readers announce context changes correctly.
38
39	- Move focus to newly revealed content (dialogs, expanded panels, inline notifications)
40	- Return focus to the triggering element when dismissing overlays
41	- Avoid stealing focus unexpectedly during background updates
42	- Set initial focus on the primary action when a page or dialog loads
43
44	### Color Contrast
45
46	Ensure text and interactive elements meet WCAG contrast ratios.
47
48	\| Element Type \| Minimum Ratio (WCAG AA) \| Enhanced Ratio (WCAG AAA) \|
49	\|---\|---\|---\|
50	\| Normal text (< 18pt) \| 4.5:1 \| 7:1 \|
51	\| Large text (>= 18pt or 14pt bold) \| 3:1 \| 4.5:1 \|
52	\| UI components and graphical objects \| 3:1 \| 3:1 \|
53
54	- Do not rely on color alone to convey information (use icons, patterns, or text labels as supplements)
55	- Support high-contrast themes and system color overrides
56	- Test with color blindness simulation tools
57
58	---
59
60	## Blazor Accessibility (In-Depth)
61
62	Blazor renders HTML, so standard web accessibility patterns apply. Use native HTML semantics and ARIA attributes to build accessible Blazor apps.
63
64	### Semantic HTML and ARIA
65
66	```razor
67	@* Use semantic HTML elements for structure *@
68	<nav aria-label="Main navigation">
69	<ul>
70	<li><a href="/products">Products</a></li>
71	<li><a href="/about">About</a></li>
72	</ul>
73	</nav>
74
75	<main>
76	<h1>Product Catalog</h1>
77
78	@* Image with alt text *@
79	<img src="hero.png" alt="Product showcase displaying three featured items" />
80
81	@* Decorative image hidden from accessibility tree *@
82	<img src="divider.svg" alt="" role="presentation" />
83
84	@* Button with accessible name from content *@
85	<button @onclick="AddToCart">Add to Cart</button>
86
87	@* Icon button requires aria-label *@
88	<button @onclick="ToggleFavorite" aria-label="Add to favorites">
89	<span class="icon-heart" aria-hidden="true"></span>
90	</button>
91	</main>
92	```
93
94	### Keyboard Event Handling
95
96	```razor
97	<div role="listbox"
98	tabindex="0"
99	aria-label="Product list"
100	aria-activedescendant="@_activeId"
101	@onkeydown="HandleKeyDown"
102	@onkeydown:preventDefault>
103	@foreach (var product in Products)
104	{
105	<div id="@($"product-{product.Id}")"
106	role="option"
107	aria-

wshaddixPublisher · 77 listings

Preview

wshaddix/dotnet-skills

# dotnet-accessibility

Cross-platform accessibility patterns for .NET UI frameworks: semantic markup, keyboard navigation, focus management, color contrast, and screen reader integrat

**Scope boundary:** This skill owns cross-cutting accessibility principles and per-framework accessibility APIs. Framework-specific development patterns (projec

**Out of scope:** Framework project setup -- see individual framework skills. Legal compliance advice -- this skill references WCAG standards but does not provi

Repowshaddix/dotnet-skills

License—

TypeSkills

CategoryCoding

UpdatedFeb 2026

Repo stars65

First seenJul 22, 2026

People who liked this also viewed

6 picks

Type