Skip to content
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
56 changes: 50 additions & 6 deletions winui/Common/accessibility.md
Original file line number Diff line number Diff line change
@@ -1,36 +1,80 @@
---
layout: post
title: Accessibility support for Syncfusion WinUI Controls | Syncfusion
description: Learn about Accessibility in the Syncfusion WinUI controls, including UI automation, Keyboard, and HighContrast theme support.
description: Learn about accessibility in the Syncfusion WinUI controls, including UI Automation, keyboard, and high contrast theme support.
platform: winui
control: Accessibility
documentation: ug
---

# Accessibility for Syncfusion<sup>&reg;</sup> WinUI Controls

Accessibility is about making a windows application usable in a wide range of environments for people who use technology and approach a UI with a wide range of experiences. There are many different types of disabilities in the world including mobility, vision, color perception, hearing, speech, cognition, and literacy. However, these requirements can be met by utilizing the accessibility features of Syncfusion<sup>&reg;</sup> UI WinUI controls. The controls support assistive technologies like screen readers, which take advantage of accessibility frameworks.
Accessibility is about making a Windows application usable in a wide range of environments for people who use technology and approach a UI with a wide range of experiences. There are many different types of disabilities in the world including mobility, vision, color perception, hearing, speech, cognition, and literacy. However, these requirements can be met by using the accessibility features of Syncfusion<sup>&reg;</sup> WinUI controls. The controls support assistive technologies like screen readers, which take advantage of accessibility frameworks.

The following sections explain the accessibility features.

## UI automation
## Prerequisites

The Syncfusion<sup>&reg;</sup> WinUI control provides accessibility for the UI automation framework as well as the support provided by base classes derived from `FrameworkElementAutomationPeer`. The control class makes use of the UI automation concepts such as automation peers and automation patterns to report the controls' role and content to UI automation clients.
To use Syncfusion<sup>&reg;</sup> WinUI controls and their accessibility features, ensure the following prerequisites are met:

A user can use a tool like screen readers to obtain the necessary information about the controls from UI Automation. When a control receives focus, the screen reader reads the text associated with that control.
* Install [Visual Studio 2022](https://visualstudio.microsoft.com/vs/) version 17.8 or later with the **Universal Windows Platform (UWP)** or **WinUI 3** workload.
* Install the [Syncfusion WinUI NuGet package](https://www.nuget.org/packages?q=syncfusion.winui) for the controls you are using.
* Target **Windows 10 version 1809 (build 17763)** or later for UWP projects, or **Windows 10 version 1903 (build 18362)** or later for WinUI 3 projects.

## UI Automation

The Syncfusion<sup>&reg;</sup> WinUI controls provide accessibility for the UI Automation framework, building on the support provided by base classes derived from `FrameworkElementAutomationPeer`. Each control class uses UI Automation concepts such as automation peers and automation patterns to report the control's role and content to UI Automation clients.

### Screen reader support

A user can use a tool such as a screen reader to obtain the necessary information about the controls from UI Automation. When a control receives focus, the screen reader reads the text associated with that control.

## Keyboard support

Syncfusion<sup>&reg;</sup> WinUI controls provide keyboard support including tab navigation, text input, and control-specific support. For example, the [SfTreeView](https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml.TreeView.SfTreeView.html) control supports arrow-key navigation for item selection.

### Common keyboard shortcuts

The following table lists keyboard shortcuts supported across most Syncfusion WinUI controls:

| Key | Action |
|---|---|
| `Tab` | Move focus to the next control. |
| `Shift+Tab` | Move focus to the previous control. |
| `Enter` | Activate the focused control or item. |
| `Space` | Toggle check state for the focused control. |
| `Arrow Up` / `Arrow Down` | Navigate through items in list-based controls. |
| `Arrow Left` / `Arrow Right` | Expand or collapse nodes in tree-based controls. |
| `Home` / `End` | Move to the first or last item. |
| `Ctrl+Home` / `Ctrl+End` | Move to the first or last item without changing selection. |

## High contrast themes

The Windows operating system and application supports all of the high contrast themes that users can enable. These themes make the controls easier to see and are especially useful for people with limited vision.
The Windows operating system and applications support all of the high contrast themes that users can enable. These themes make the controls easier to see and are especially useful for people with limited vision.

### Enable high contrast on Windows

1. Open **Settings** > **Accessibility** > **Contrast themes**.
2. Select a high contrast theme from the drop-down menu.
3. Click **Apply** to enable the selected theme.

Syncfusion WinUI controls automatically respond to high contrast theme changes. When a high contrast theme is enabled, the controls adjust their foreground and background colors accordingly.

![HighContrast theme support in Syncfusion WinUI controls](Common-images/winui-highcontrast-controls.png)

## Limitations and troubleshooting

If accessibility features are not working as expected, check the following:

* **Screen reader does not read the control** — Ensure the control has a valid `AutomationProperties.Name` attached property set in XAML. If the name is not set, the screen reader may not announce the control.
* **Keyboard navigation does not work** — Verify that the control's `IsTabStop` property is set to `True` (the default) and that no parent container is blocking tab navigation (e.g., `TabNavigation` set to `Once` or `None`).
* **High contrast colors are not applied** — Ensure the application is not overriding the default control styles with custom styles that hard-code colors. Use theme resources such as `SystemControlBackgroundBaseHighBrush` instead.

## See also

* [Localization for Syncfusion WinUI Controls](./localization.md)
* [Themes for Syncfusion WinUI Controls](./themes.md)
* [Right-to-left support for Syncfusion WinUI Controls](./right-to-left.md)
* [Compact sizing for Syncfusion WinUI Controls](./compact-sizing.md)
* [Microsoft accessibility documentation](https://learn.microsoft.com/en-us/windows/apps/design/accessibility/accessibility)

51 changes: 44 additions & 7 deletions winui/Common/compact-sizing.md
Original file line number Diff line number Diff line change
@@ -1,44 +1,64 @@
---
layout: post
title: Compact Sizing in WinUI Controls | Syncfusion
description: Learn here about Compact Sizing support in Syncfusion WinUI Project Reunion controls and more details.
description: Learn about Compact Sizing support in Syncfusion WinUI controls, including layout optimization, spacing customization, and responsive UI design.
platform: WinUI
control: Compact Sizing
documentation: ug
---

# Compact Sizing in WinUI Controls

There are two types of spacing support for controls in WinUI.
Compact sizing reduces the spacing and padding of controls to enable dense, information-rich layouts. It is useful for applications that target pointer (mouse) input rather than touch, where more content can fit within the same screen area.

There are two types of spacing support for controls in WinUI:

1. [Standard](https://docs.microsoft.com/en-us/windows/apps/design/style/spacing#fluent-standard-sizing) - to accommodate both touch and pointer input.
2. [Compact](https://docs.microsoft.com/en-us/windows/apps/design/style/spacing#fluent-compact-sizing) - designed primarily to accommodate pointer input.

Compact sizing enables dense, information-rich groups of controls and can help with the following:

* Browsing large amounts of content.
* Maximizing visible content on a page.
* Navigating and interacting with controls and content.

## Prerequisites

To use compact sizing with Syncfusion<sup>&reg;</sup> WinUI controls, ensure the following prerequisites are met:

* Install [Visual Studio 2022](https://visualstudio.microsoft.com/vs/) version 17.8 or later with the **WinUI 3** workload.
* Install the **[Microsoft.UI.Xaml](https://www.nuget.org/packages/Microsoft.UI.Xaml)** NuGet package for base control compact styles.
* Install the **[Syncfusion.Core.WinUI](https://www.nuget.org/packages/Syncfusion.Core.WinUI)** NuGet package for Syncfusion control compact styles.
* Target **Windows 10 version 1903 (build 18362)** or later for WinUI 3 projects.

## Examples of compact sizing

Compact sizing is implemented through a unique resource dictionary that can be specified in your application at either the page level or a specific layout. The resource dictionary is available in the WinUI Nuget package.
Compact sizing is implemented through a unique resource dictionary that can be specified in your application at either the page level or a specific layout. Two resource dictionaries are required:

The following examples show how the Compact style can be applied for the window and an individual Grid control.
* **`Microsoft.UI.Xaml`** - Provides compact styles for the built-in WinUI controls.
* **`Syncfusion.Core.WinUI`** - Provides compact styles for Syncfusion WinUI controls.

The following examples show how the Compact style can be applied at the window level and for an individual Grid control.

### Window level

Applying compact sizing at the window level affects all controls within that window. Add the resource dictionaries to the `Window.Resources` collection.

{% tabs %}
{% highlight xaml %}

<Window.Resources>
<ResourceDictionary Source="ms-appx:///Microsoft.UI.Xaml/DensityStyles/Compact.xaml" />
<ResourceDictionary Source="ms-appx:///Syncfusion.Core.WinUI/Themes/DensityStyles/Compact.xaml" />
<ResourceDictionary Source="ms-appx:///Microsoft.UI.Xaml/DensityStyles/Compact.xaml" />
<ResourceDictionary Source="ms-appx:///Syncfusion.Core.WinUI/Themes/DensityStyles/Compact.xaml" />
</Window.Resources>

{% endhighlight %}
{% endtabs %}

### Grid level

Applying compact sizing at the grid level limits the effect to only the controls within that `Grid`. Add the resource dictionaries to the `Grid.Resources` collection. Controls outside the `Grid` continue to use standard sizing.

{% tabs %}
{% highlight xaml %}

Expand All @@ -50,4 +70,21 @@ The following examples show how the Compact style can be applied for the window
</Grid>

{% endhighlight %}
{% endtabs %}
{% endtabs %}

## Limitations and troubleshooting

If compact sizing is not working as expected, check the following:

* **Controls do not appear compact** — Ensure both the `Microsoft.UI.Xaml` and `Syncfusion.Core.WinUI` compact resource dictionaries are merged in the resource scope (window, page, or layout level).
* **Resource dictionary not found** — Verify that the corresponding NuGet packages (`Microsoft.UI.Xaml` and `Syncfusion.Core.WinUI`) are installed and that the package version matches the resource path.
* **Custom styles ignore compact sizing** — Custom control styles that hard-code `Padding`, `Margin`, `Width`, or `Height` values will not respond to compact resource dictionaries. Use theme resource keys instead.
* **Compact sizing affects only the target scope** — Applying the dictionaries at the `Grid` level does not affect sibling controls outside the `Grid`. To apply compact sizing app-wide, set the dictionaries on the window or in `App.xaml`.

## See also

* [Themes for Syncfusion WinUI Controls](./themes.md)
* [Accessibility for Syncfusion WinUI Controls](./accessibility.md)
* [Right-to-Left (RTL) support for Syncfusion WinUI Controls](./right-to-left.md)
* [Localization for Syncfusion WinUI Controls](./localization.md)
* [Fluent spacing and sizing guidance](https://learn.microsoft.com/en-us/windows/apps/design/style/spacing)
Loading