WPF 无障碍设计

简介

WPF 无障碍设计（Accessibility）关注的是让更多用户都能顺利完成操作，而不是只让界面“看起来能用”。在企业桌面系统、工控上位机、医疗终端、政企软件等场景中，键盘操作、读屏支持、高对比度适配、焦点管理和语义化提示都直接影响可用性与合规性。

特点

• 1.键盘可达性 — 不依赖鼠标也能完成核心流程
• 2.读屏友好 — 通过 AutomationProperties 提供语义信息
• 3.焦点管理 — Tab 顺序、默认焦点和错误焦点可控
• 4.视觉无障碍 — 支持高对比度、缩放和颜色替代信息
• 5.表单可理解 — 错误提示、标签说明和状态反馈清晰

实现

为控件补充自动化语义

<Window x:Class="Demo.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="设备参数设置"
        Width="800"
        Height="500">
    <Grid Margin="20">
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>

        <TextBlock Text="设备名称"
                   Margin="0,0,0,6"
                   AutomationProperties.Name="设备名称标签" />

        <TextBox Grid.Row="1"
                 Width="260"
                 Text="{Binding DeviceName}"
                 AutomationProperties.Name="设备名称输入框"
                 AutomationProperties.HelpText="请输入设备名称，最长 50 个字符"
                 AutomationProperties.LabeledBy="{Binding ElementName=DeviceNameLabel}"
                 TabIndex="0" />

        <StackPanel Grid.Row="2"
                    Orientation="Horizontal"
                    Margin="0,16,0,0">
            <Button Content="保存"
                    Width="100"
                    Margin="0,0,12,0"
                    Command="{Binding SaveCommand}"
                    AutomationProperties.Name="保存设备配置"
                    AutomationProperties.HelpText="保存当前输入的设备参数"
                    IsDefault="True"
                    TabIndex="1" />

            <Button Content="取消"
                    Width="100"
                    Command="{Binding CancelCommand}"
                    AutomationProperties.Name="取消修改"
                    AutomationProperties.HelpText="放弃当前修改内容"
                    IsCancel="True"
                    TabIndex="2" />
        </StackPanel>
    </Grid>
</Window>

<!-- 图标按钮不要只有图片，要补语义 -->
<Button Width="36"
        Height="36"
        Command="{Binding RefreshCommand}"
        AutomationProperties.Name="刷新设备状态"
        AutomationProperties.HelpText="重新读取当前设备状态">
    <Path Data="M10,2 A8,8 0 1 1 2,10"
          Stroke="DodgerBlue"
          StrokeThickness="2" />
</Button>

// 后台也可以动态设置自动化属性
using System.Windows.Automation;

public partial class MainWindow : Window
{
    public MainWindow()
    {
        InitializeComponent();

        AutomationProperties.SetName(DeviceStatusTextBlock, "设备在线状态");
        AutomationProperties.SetHelpText(DeviceStatusTextBlock, "显示当前设备是否在线");
    }
}

键盘操作、焦点顺序与默认行为

<Grid KeyboardNavigation.TabNavigation="Cycle"
      KeyboardNavigation.ControlTabNavigation="Continue"
      FocusManager.FocusedElement="{Binding ElementName=DeviceNameInput}">

    <TextBox x:Name="DeviceNameInput"
             Margin="0,0,0,12"
             TabIndex="0"
             Width="240"
             Text="{Binding DeviceName}" />

    <ComboBox Grid.Row="1"
              Width="240"
              ItemsSource="{Binding DeviceTypes}"
              SelectedItem="{Binding SelectedDeviceType}"
              TabIndex="1"
              AutomationProperties.Name="设备类型选择框" />

    <CheckBox Grid.Row="2"
              Content="启用告警通知"
              IsChecked="{Binding EnableAlarm}"
              TabIndex="2"
              AutomationProperties.Name="启用告警通知复选框" />
</Grid>

<!-- 为快捷键与访问键提供支持 -->
<StackPanel Orientation="Horizontal">
    <Button Content="_保存"
            Command="{Binding SaveCommand}"
            AutomationProperties.Name="保存按钮" />
    <Button Content="_导出"
            Margin="12,0,0,0"
            Command="{Binding ExportCommand}"
            AutomationProperties.Name="导出按钮" />
</StackPanel>

// 验证失败时把焦点移动到第一个无效控件
public static class FocusInvalidControlBehavior
{
    public static void FocusFirstInvalid(DependencyObject root)
    {
        foreach (var textBox in FindVisualChildren<TextBox>(root))
        {
            if (Validation.GetHasError(textBox))
            {
                textBox.Focus();
                Keyboard.Focus(textBox);
                break;
            }
        }
    }

    private static IEnumerable<T> FindVisualChildren<T>(DependencyObject parent) where T : DependencyObject
    {
        for (int i = 0; i < VisualTreeHelper.GetChildrenCount(parent); i++)
        {
            var child = VisualTreeHelper.GetChild(parent, i);
            if (child is T match)
                yield return match;

            foreach (var descendant in FindVisualChildren<T>(child))
                yield return descendant;
        }
    }
}

错误提示、高对比度与非颜色表达

<Style TargetType="TextBox" x:Key="AccessibleTextBoxStyle">
    <Setter Property="Margin" Value="0,0,0,10" />
    <Setter Property="Validation.ErrorTemplate">
        <Setter.Value>
            <ControlTemplate>
                <DockPanel>
                    <Border BorderBrush="Red" BorderThickness="2">
                        <AdornedElementPlaceholder />
                    </Border>
                    <TextBlock Margin="8,0,0,0"
                               VerticalAlignment="Center"
                               Foreground="Red"
                               FontWeight="SemiBold"
                               Text="输入有误"
                               AutomationProperties.Name="输入错误提示" />
                </DockPanel>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
    <Style.Triggers>
        <Trigger Property="Validation.HasError" Value="True">
            <Setter Property="ToolTip"
                    Value="{Binding RelativeSource={RelativeSource Self}, Path=(Validation.Errors)[0].ErrorContent}" />
        </Trigger>
    </Style.Triggers>
</Style>

<!-- 不仅靠颜色传递状态，同时给出文字与图标 -->
<StackPanel Orientation="Horizontal">
    <Ellipse Width="12" Height="12" Fill="LimeGreen" Margin="0,0,8,0" />
    <TextBlock Text="设备在线"
               FontWeight="SemiBold"
               AutomationProperties.Name="设备状态在线" />
</StackPanel>

<StackPanel Orientation="Horizontal" Margin="0,8,0,0">
    <Rectangle Width="12" Height="12" Fill="OrangeRed" Margin="0,0,8,0" />
    <TextBlock Text="温度超限"
               FontWeight="SemiBold"
               AutomationProperties.Name="设备报警状态：温度超限" />
</StackPanel>

// 检测系统高对比度模式
using Microsoft.Win32;
using SystemParameters = System.Windows.SystemParameters;

public class ThemeAccessibilityService
{
    public bool IsHighContrastEnabled() => SystemParameters.HighContrast;

    public void WatchHighContrastChanged(Action<bool> callback)
    {
        SystemEvents.UserPreferenceChanged += (_, args) =>
        {
            if (args.Category == UserPreferenceCategory.Accessibility)
            {
                callback(SystemParameters.HighContrast);
            }
        };
    }
}

UI Automation 自动化测试

/// <summary>
/// 基于 UI Automation 的自动化测试辅助类
/// </summary>
using System.Windows.Automation;
using System.Windows.Automation.Peers;
using System.Windows.Automation.Provider;

public static class AccessibilityTestHelper
{
    // 获取窗口中所有支持自动化的控件
    public static List<AutomationElement> FindAllDescendants(Window window)
    {
        var root = AutomationElement.FromHandle(new WindowInteropHelper(window).Handle);
        var condition = Condition.TrueCondition;
        return root.FindAll(TreeScope.Descendants, condition)
            .Cast<AutomationElement>()
            .ToList();
    }

    // 按 Name 查找控件
    public static AutomationElement? FindByName(Window window, string name)
    {
        var root = AutomationElement.FromHandle(new WindowInteropHelper(window).Handle);
        var condition = new NamePropertyCondition(name);
        return root.FindFirst(TreeScope.Descendants, condition);
    }

    // 检查所有可见控件是否设置了 AutomationProperties.Name
    public static List<string> FindMissingNames(Window window)
    {
        var missing = new List<string>();
        var root = AutomationElement.FromHandle(new WindowInteropHelper(window).Handle);
        var controls = root.FindAll(TreeScope.Descendants,
            new PropertyCondition(AutomationElement.IsControlElementProperty, true));

        foreach (AutomationElement element in controls)
        {
            var name = element.Current.Name;
            if (string.IsNullOrWhiteSpace(name))
            {
                var className = element.Current.ClassName;
                var automationId = element.Current.AutomationId;
                missing.Add($"[{className}] AutomationId={automationId}");
            }
        }

        return missing;
    }

    // 模拟键盘操作到指定控件
    public static void InvokeControl(Window window, string automationId)
    {
        var root = AutomationElement.FromHandle(new WindowInteropHelper(window).Handle);
        var condition = new PropertyCondition(
            AutomationElement.AutomationIdProperty, automationId);
        var element = root.FindFirst(TreeScope.Descendants, condition);

        if (element != null)
        {
            var pattern = element.GetCurrentPattern(InvokePattern.Pattern)
                as InvokePattern;
            pattern?.Invoke();
        }
    }
}

无障碍输入控件封装

<!-- 统一封装带标签和错误提示的输入控件 -->
<Style x:Key="AccessibleFieldStyle" TargetType="StackPanel">
    <Setter Property="Margin" Value="0,0,0,16"/>
</Style>

<!-- 使用示例 -->
<StackPanel Style="{StaticResource AccessibleFieldStyle}">
    <Label Content="设备编号" Target="{Binding ElementName=DeviceIdBox}"
           FontWeight="SemiBold" Margin="0,0,0,4"/>
    <TextBox x:Name="DeviceIdBox"
             Text="{Binding DeviceId, UpdateSourceTrigger=PropertyChanged,
                    ValidatesOnDataErrors=True}"
             AutomationProperties.Name="设备编号输入框"
             AutomationProperties.HelpText="请输入设备编号，格式为 DEV-XXXX"
             AutomationProperties.LabeledBy="{Binding ElementName=DeviceIdLabel}"
             MaxLength="20"/>
    <TextBlock x:Name="DeviceIdHint"
               Text="格式：DEV-XXXX"
               Foreground="Gray" FontSize="11" Margin="2,2,0,0"/>
</StackPanel>

/// <summary>
/// 自动为控件生成无障碍属性的 Behavior
/// </summary>
public static class AutoAccessibilityBehavior
{
    // 附加属性：自动将 Label 的 Content 作为关联控件的 LabeledBy
    public static readonly DependencyProperty AutoLabelProperty =
        DependencyProperty.RegisterAttached("AutoLabel", typeof(string),
            typeof(AutoAccessibilityBehavior),
            new PropertyMetadata(null, OnAutoLabelChanged));

    public static void SetAutoLabel(DependencyObject obj, string value)
        => obj.SetValue(AutoLabelProperty, value);

    public static string GetAutoLabel(DependencyObject obj)
        => (string)obj.GetValue(AutoLabelProperty);

    private static void OnAutoLabelChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
    {
        if (d is FrameworkElement element && e.NewValue is string labelId)
        {
            element.Loaded += (_, _) =>
            {
                var parent = VisualTreeHelper.GetParent(element);
                while (parent != null)
                {
                    if (parent is FrameworkElement fe && fe.Name == labelId)
                    {
                        AutomationProperties.SetLabeledBy(element, fe);
                        break;
                    }
                    parent = VisualTreeHelper.GetParent(parent);
                }
            };
        }
    }
}

键盘导航增强

/// <summary>
/// 键盘快捷键管理器
/// </summary>
public class KeyboardShortcutManager
{
    private readonly Window _window;
    private readonly Dictionary<KeyGesture, Action> _shortcuts = new();

    public KeyboardShortcutManager(Window window)
    {
        _window = window;
        _window.PreviewKeyDown += OnPreviewKeyDown;
    }

    public void Register(Key key, ModifierKeys modifiers, Action action)
    {
        _shortcuts[new KeyGesture(key, modifiers)] = action;
    }

    // 常用快捷键注册
    public void RegisterDefaults(
        Action onSave,
        Action onCancel,
        Action onNew,
        Action onDelete)
    {
        Register(Key.S, ModifierKeys.Control, onSave);
        Register(Key.Escape, ModifierKeys.None, onCancel);
        Register(Key.N, ModifierKeys.Control, onNew);
        Register(Key.Delete, ModifierKeys.None, onDelete);
    }

    private void OnPreviewKeyDown(object sender, KeyEventArgs e)
    {
        var gesture = new KeyGesture(e.Key, Keyboard.Modifiers);
        if (_shortcuts.TryGetValue(gesture, out var action))
        {
            action();
            e.Handled = true;
        }
    }
}

<!-- Tab 导航方向控制 -->
<!-- None — 不允许 Tab 导航 -->
<!-- Cycle — 循环导航 -->
<!-- Continue — 继续到下一个控件 -->
<!-- Once — 只导航到直接子元素 -->
<StackPanel KeyboardNavigation.TabNavigation="Cycle"
            KeyboardNavigation.DirectionalNavigation="Contained">
    <TextBox TabIndex="0" Text="第一个输入框"/>
    <TextBox TabIndex="1" Text="第二个输入框"/>
    <TextBox TabIndex="2" Text="第三个输入框"/>
    <!-- Tab 键从第三个框循环回第一个 -->
</StackPanel>

<!-- 焦点可视化样式自定义 -->
<Style TargetType="TextBox">
    <Style.Triggers>
        <Trigger Property="IsKeyboardFocused" Value="True">
            <Setter Property="BorderBrush" Value="#0078D4"/>
            <Setter Property="BorderThickness" Value="2"/>
        </Trigger>
    </Style.Triggers>
</Style>

屏幕阅读器适配

/// <summary>
/// 为动态内容推送 LiveRegion 通知读屏软件
/// </summary>
public static class ScreenReaderHelper
{
    // WPF 使用 AutomationProperties.LiveSetting 实现动态内容通知
    // Off — 不通知（默认）
    // Polite — 空闲时通知
    // Assertive — 立即通知（打断）

    public static void AnnounceToScreenReader(FrameworkElement element, string message)
    {
        element.Dispatcher.Invoke(() =>
        {
            AutomationProperties.SetName(element, message);
            AutomationProperties.SetLiveSetting(element,
                AutomationLiveSetting.Assertive);
        });
    }

    // 使用示例：Toast 通知区域
    // <TextBlock x:Name="LiveRegion"
    //            AutomationProperties.LiveSetting="Assertive"
    //            Visibility="Collapsed"/>
    //
    // 调用：ScreenReaderHelper.AnnounceToScreenReader(LiveRegion, "保存成功");
}

高对比度模式适配样式

<!-- 在 Themes/highcontrast.xaml 中定义高对比度样式 -->
<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">

    <!-- 高对比度模式下使用系统颜色 -->
    <Style TargetType="Button">
        <Setter Property="Background" Value="{DynamicResource SystemColors.ControlBrush}"/>
        <Setter Property="Foreground" Value="{DynamicResource SystemColors.ControlTextBrush}"/>
        <Setter Property="BorderBrush" Value="{DynamicResource SystemColors.ControlDarkBrush}"/>
        <Setter Property="BorderThickness" Value="2"/>
    </Style>

    <Style TargetType="TextBox">
        <Setter Property="Background" Value="{DynamicResource SystemColors.WindowBrush}"/>
        <Setter Property="Foreground" Value="{DynamicResource SystemColors.WindowTextBrush}"/>
        <Setter Property="BorderBrush" Value="{DynamicResource SystemColors.WindowTextBrush}"/>
        <Setter Property="BorderThickness" Value="2"/>
    </Style>

    <Style TargetType="TextBlock">
        <Setter Property="Foreground" Value="{DynamicResource SystemColors.WindowTextBrush}"/>
    </Style>
</ResourceDictionary>

/// <summary>
/// 高对比度主题切换服务
/// </summary>
public class ThemeSwitchService
{
    private readonly ResourceDictionary _normalTheme;
    private readonly ResourceDictionary _highContrastTheme;

    public ThemeSwitchService()
    {
        _normalTheme = new ResourceDictionary
        {
            Source = new Uri("Styles/Colors.xaml", UriKind.Relative)
        };
        _highContrastTheme = new ResourceDictionary
        {
            Source = new Uri("Themes/highcontrast.xaml", UriKind.Relative)
        };

        SystemEvents.UserPreferenceChanged += OnUserPreferenceChanged;
    }

    private void OnUserPreferenceChanged(object sender, UserPreferenceChangedEventArgs e)
    {
        if (e.Category == UserPreferenceCategory.Accessibility ||
            e.Category == UserPreferenceCategory.Color)
        {
            Application.Current.Dispatcher.Invoke(() =>
            {
                if (SystemParameters.HighContrast)
                    ApplyHighContrast();
                else
                    ApplyNormal();
            });
        }
    }

    public void ApplyHighContrast()
    {
        var resources = Application.Current.Resources;
        resources.MergedDictionaries.Remove(_normalTheme);
        if (!resources.MergedDictionaries.Contains(_highContrastTheme))
            resources.MergedDictionaries.Add(_highContrastTheme);
    }

    public void ApplyNormal()
    {
        var resources = Application.Current.Resources;
        resources.MergedDictionaries.Remove(_highContrastTheme);
        if (!resources.MergedDictionaries.Contains(_normalTheme))
            resources.MergedDictionaries.Add(_normalTheme);
    }
}

优点

• 1.覆盖更多用户 — 键盘用户、读屏用户、弱视用户都能更顺畅使用
• 2.降低误操作 — 焦点顺序清晰、错误提示明确，减少输入错误
• 3.提高系统专业度 — 企业/政企/医疗/工业软件更符合交付标准
• 4.利于自动化测试 — 自动化属性完善后更方便 UI 自动化定位控件

缺点

• 1.设计成本增加 — 需要从交互早期就考虑可达性与语义
• 2.页面细节更多 — 焦点、标签、说明文案都需要统一约束
• 3.测试维度扩大 — 需要键盘流、高对比度、缩放、读屏等多维验证
• 4.老项目改造量大 — 历史页面可能大量缺失语义和键盘支持

总结

WPF 无障碍设计不是给界面补几个 AutomationProperties.Name 就结束，而是要把“看得见、读得懂、键盘能走通、错误能恢复”作为完整体验来设计。对于复杂桌面应用，越早把无障碍要求纳入组件规范和验收流程，后期返工成本越低。

关键知识点

• AutomationProperties 负责给读屏和自动化工具提供控件语义。
• 焦点顺序和键盘路径必须能覆盖核心业务流程。
• 颜色不能作为唯一状态表达方式，必须配合文字或图标。
• 错误提示除了视觉展示，还要考虑焦点定位与可读文本。

项目落地视角

• MES/SCADA 上位机可通过键盘完成参数配置和确认操作。
• 医疗或政企系统需兼顾合规性与读屏支持。
• 大型表单页面可统一封装带标签、错误提示的无障碍输入控件。
• UI 自动化测试可直接依赖 AutomationProperties.Name 定位控件。

常见误区

• 认为桌面软件都是内部人员使用，所以不用考虑无障碍。
• 只做鼠标交互，不检查 Tab 顺序和 Enter/Esc 默认行为。
• 图标按钮没有语义文本，读屏软件只能读出“按钮”。
• 错误状态只变红，不给任何文本解释和焦点指引。

进阶路线

• 学习 UI Automation（UIA）模型与 Inspect 工具使用。
• 为通用控件库建立无障碍规范和默认样式。
• 补充高 DPI、缩放、屏幕阅读器的联合测试方案。
• 结合自动化测试平台做可访问性回归测试。

适用场景

• 企业后台、ERP、MES、WMS 等复杂桌面表单系统。
• 医疗、金融、政务等对可用性和合规有要求的软件。
• 工控客户端需要减少误操作和提升键盘效率的场景。
• 希望支持读屏、放大镜、高对比度等辅助工具的应用。

落地建议

• 为关键控件统一补充 AutomationProperties.Name/HelpText。
• 页面设计时就定义 Tab 顺序、默认按钮和取消按钮。
• 状态展示统一采用“颜色 + 文本/图标”双通道表达。
• 把键盘走查、高对比度检查和错误恢复测试加入验收清单。

排错清单

• 用 Tab/Shift+Tab 检查焦点是否能完整走通主流程。
• 用 Inspect 检查控件是否具备 Name、HelpText 等自动化属性。
• 打开高对比度模式检查文本、边框、图标是否仍可辨识。
• 触发表单验证错误，确认焦点是否能自动跳到第一个错误项。

复盘问题

• 当前页面是否完全可以在不使用鼠标的情况下完成核心操作？
• 读屏用户是否能知道每个关键控件的用途和当前状态？
• 界面里是否存在“只靠颜色表达状态”的危险点？
• 如果用户输错，系统是否明确告诉他错在哪里、下一步该怎么修复？

延伸阅读

• WPF 可视树
• 数据验证（ValidationRule + IDataErrorInfo）
• 自定义控件开发
• USB 设备通信（LibUsbDotNet）