How to Create Accessible WinForms Applications

Creating accessible Windows Forms applications for users with disabilities is not just best practice; it's a commitment to inclusivity and user-centric design. Considering accessibility-related requirements early in the application development lifecycle saves time in the long run (as it will dictate design decisions and code implementation).

The benefits of an accessible WinForms app offer a variety of benefits, including:

• Expanded User Base
• Legal Compliance
• Inclusive UX via Keyboard Access
• Automated UI Testing

Tip #1: Consider Keyboard Access

Keyboard compatibility is crucial for accessible applications because assistive tools (such as Narrator and NVDA) rely on keyboard navigation to aid users (especially individuals with motor impairments).

Effective keyboard navigation must meet the following basic requirements:

• Enhanced User Experience

  Users should be able to seamlessly perform all essential tasks using the keyboard. This doesn't mean you need to avoid operations like drag & drop. This means you should consider alternative UX options that are keyboard friendly. For example, copy-paste functionality or buttons that move items up/down can serve as alternatives to drag & drop operations.

• No Keyboard Traps (Proper Focus Management)

  Users should always be able to navigate away from a particular UI element or section using the keyboard. Ensure that keyboard focus is properly managed so that users can navigate freely and intuitively.

• Predictable Tab Order

  Focusable UI elements must receive focus in a logical order that makes sense and works.

• Highlight Focus

  Since screen readers are not used by everyone, it’s important to provide visual feedback, indicating which UI element is currently active/selected.

Use the following Windows Forms APIs to enhance keyboard navigation in your application:

• Control.TabIndex - Use this property to implement focus order (for example, in data forms with data editors, buttons, and other UI elements).
• Control.TabStop– Disable this setting for UI elements that don't require interaction to bypass unnecessary navigation.
• Control.Focus - This method allows you to programmatically focus UI elements to implement custom navigation order (for example, you can implement Up/Down arrow-based navigation).

Please read the following topic for additional information in this regard: How to set the tab order on Windows Forms (Windows Forms .NET).

In December 2023 (v23.2), we introduced keyboard-related enhancements across our WinForms product line. Use the following features to enhance keyboard-related experiences within DevExpress-powered applications:

• Keyboard Shortcuts

  DevExpress WinForms UI controls ship with predefined shortcuts.

  Our comprehensive shortcut-related APIs allow you to specify custom shortcuts for specific UI elements (for example, BarItem.ItemShortcut, EditorButton.Shortcut, Diagram Shortcuts, RichEdit Shortcuts).

• Accelerator Keys

  By adding the ampersand symbol (&) before specific text, you allow users to quickly activate DevExpress controls or execute commands.

• Ribbon Contextual Tabs

  Unlike traditional static toolbars, Contextual Tabs in our WinForms Ribbon Control dynamically adapt to usage context, displaying relevant options based on the task at hand. If a specific action is not available in the main UI using the keyboard, you can add the action to the contextual tab (the user needs to press Alt to access available actions).

  A similar behavior was introduced in Microsoft Office applications (for instance, when you focus a table in a Word document, the Ribbon UI automatically displays a contextual tab with table-related commands).

• Automatic Tab Order

  When it comes to developing accessible data forms, the DevExpress WinForms Layout Control is indispensable. With it, you no longer need to specify the TabIndex property for each UI element displayed within the data form. The Layout Control automatically calculates tab indices based on the layout structure.

  More on Automatic Tab Order in DevExpress Layout control

Tip #2: Provide Relevant Accessible Information for UI Elements

Assistive technologies (such as Accessibility Insights) rely on the accessible tree, structure of UI elements, and related information. Use assistive tools to identify and address accessibility-related issues.

DevExpress WinForms controls auto-generate the accessibility tree. However, some information must be specified manually. For example, when you use a PictureEdit you should give it a clear and user-friendly accessible name.

Use the following properties to customize accessible information for individual controls:

• Control.AccessibleName - Specifies a control’s name used by accessibility client applications (a label that is visible to users). For example, if you have a text box that displays a name, set its TextBox.AccessibleName property to "First Name". The screen reader will pronounce “First Name” when the text box receives focus.
• Control.AccessibleRole - Specifies the accessible role of a control. When it comes to custom controls, setting this property is crucial when informing users about UI element type (for example, a MenuButton, DropList, Table, etc.).
• Control.AccessibleDescription - Describes a control. This description is used by accessibility client applications. The property is handled differently by screen readers. For example, NVDA reads AccessibleDescription when a UI element receives focus, but Narrator ignores this property.

DevExpress WinForms UI controls implement standard API used by accessibility client applications. All UI elements are labeled, property values are exposed, and appropriate events are raised. For example:

• The DevExpress LayoutControl automatically associates the accessible name of layout items with their captions.
• The DevExpress TextEdit control obtains its accessible name from the associated DevExpress LabelControl.
• DevExpress Data Editors displayed within built-in forms expose accessible names.
• Data-aware components such as GridControl auto-generate an accessible tree where UI elements have corresponding names and roles.

In certain situations, accessible information may require modification. Consider a DevExpress Tile Control with a custom template. The parent control cannot determine which information (from the template) should be pronounced by the screen reader when the tile receives focus. In such instances, you can handle the DXAccessible.QueryAccessibleInfo event to specify the accessible name, role, and description as needed:

void DXAccessible_QueryAccessibleInfo(object sender, DXAccessible.QueryAccessibleInfoEventArgs e) {  
   if (e.Role == AccessibleRole.ListItem && e.OwnerControl == tileControl1) {  
       TileItem item = e.Owner as TileItem;
       if (item != null && item.Elements.Count > 1)
           e.Name = item.Elements[0].Text; e.Description = item.Elements[1].Text;
     }
}

Tip #3: Provide Supplementary Information for Data Visualization Controls (Charts and Maps)

When it comes to data visualization, UI components like Charts and Maps play unique roles within enterprise apps. When using Charts/Maps, it is important to present visual information in an alternative form to meet accessibility-related standards.

When incorporating the DevExpress WinForms Chart control in your app, you can:

• Use the AccessibleName property to describe the chart.
• Duplicate chart data in a table. Display the table next to the chart or within a new window.

A similar technique can be applied to the DevExpress Map Control. For instance, if the Map control displays a route, consider presenting it as a list of waypoints.

Tip #4: Use High Contrast Colors

High contrast colors play an important role when addressing accessibility requirements for individuals with impaired vision/color perception. Standard WinForms techniques require manual color adjustments across the entire application:
How to enable High Contrast mode in an effective manner.

DevExpress WinForms UI controls support High Contrast mode (via vector skins). Enable the WindowsFormsSettings.TrackSystemHighContrastMode setting to automatically enable High Contrast mode in your DevExpress-powered application (if the user has activated the Hight Contrast option in Windows settings).

You can also enable High Contrast mode manually by applying the High Contrast White or High Contrast Black color palette in DevExpress skins or use the High Contast skin:

DevExpress WinForms data visualization controls include numerous appearance settings optimized for accessible visualizations. Read the following help topic for additional information: Chart Appearance Customization.

Tip #5: Ensure UI Elements are of Sufficient Size and Spacing

New WCAG 2.2 standards dictate use of appropriately sized UI elements so that pointer input is at least 24x24 pixels in size. This ensures that users with motor impairments can interact with all UI elements using pointing devices.

Business applications often require high information density. Designing large and UI elements is not always possible. DevExpress WinForms UI controls support a compact mode for our newest WXI skin and touch-enabled mode for other skins/themes.

Conclusion

Leverage the following techniques to enhance application accessibility:

1. Support Keyboard Accessibility
2. Provide Relevant Accessible Information for UI Elements
3. Display Supplementary Information for Data Visualizations
4. Use High Contrast Colors
5. Ensure UI Elements are of Sufficient Size and Spacing

DevExpress WinForms components allow you to create accessible Windows applications for a variety of enterprise usage scenarios. By combining both DevExpress and standard WinForms accessibility-related features, developers can create business applications designed to meet compliance standards and deliver an inclusive/user-friendly experience for everyone.