Export (0) Print
Expand All

Walkthrough: Creating an Accessible Windows Application

Visual Studio .NET 2003

Creating an accessible application has important business implications. Many governments have accessibility regulations for software purchase. The "Certified for Windows" logo includes accessibility requirements. An estimated 30 million residents of the U.S. alone, many of them potential customers, are affected by the accessibility of software.

This walkthrough will address the five accessibility requirements for the Certified for Windows logo. According to these requirements, an accessible application will:

  • Support Control Panel size, color, font, and input settings
  • Support High Contrast mode
  • Provide documented keyboard access to all features
  • Expose location of the keyboard focus visually and programmatically
  • Avoid conveying important information by sound alone

For more information, see Designing Accessible Applications, the MSDN Online Certified for Windows Program Web page (http://msdn.microsoft.com/certification/default.asp), and the Designed for Windows XP Application Specification Web page (http://www.microsoft.com/windowsxp/partners/dfwspec.asp).

Planning Ahead for Accessibility

Controls on the standard toolbox for Windows Forms support many of the accessibility guidelines, including exposing the keyboard focus and exposing the screen elements. The controls' properties can be used to support other accessibility guidelines as shown in the following table. Additionally, you should use menus to provide access to program features.

Control PropertyConsiderations for Accessibility
AccessibleDescriptionThe description is reported to accessibility aids such as screen readers. Accessibility aids are specialized programs and devices that help people with disabilities use computers more effectively.
AccessibleNameThe name that will be reported to the accessibility aids.
AccessibleRoleDescribes the use of the element in the user interface.
TabIndexCreates a sensible navigational path through the form. It is important for controls without intrinsic labels, such as text boxes, to have their associated label immediately precede them in the tab order.
TextUse the "&" character to create access keys. Using access keys is part of providing documented keyboard access to features.
Font SizeIf the font size is not adjustable, then it should be set to 10 points or larger. Once the form's font size is set, all the controls added to the form thereafter will have the same size.
ForecolorIf this property is set to the default, then the user's color preferences will be used on the form.
BackcolorIf this property is set to the default, then the user's color preferences will be used on the form.
BackgroundImageLeave this property blank to make text more readable.

For information on supporting varying keyboard layouts, see Planning World-Ready Applications.

Creating the Project

This walkthrough creates the user interface for an application that takes pizza orders. It consists of a TextBox for the customer's name, a RadioButton group to select the pizza size, a CheckedListBox for selecting the toppings, two Button controls labeled Order and Cancel, and a Menu with an Exit command.

The user enters the customer's name, the size of the pizza, and the toppings desired. When the user clicks the Order button, a summary of the order and its cost are displayed in a message box and the controls are cleared and ready for the next order. When the user clicks the Cancel button, the controls are cleared and ready for the next order. When the user clicks the Exit menu item, the program closes.

The emphasis of this walkthrough is not the code for a retail order system, but the accessibility of the user interface. The walkthrough demonstrates the accessibility features of several frequently used controls, including buttons, radio buttons, text boxes, and labels.

To begin making the application

Adding the Controls to the Form

When adding the controls to a form, keep in mind the following guidelines to make an accessible application:

  • Set the AccessibleDescription and AccessibleName properties. In this example, the Default setting for the AccessibleRole is sufficient. For more information on the accessibility properties, see Providing Accessibility Information for Controls on a Windows Form.
  • Set the font size to 10 points or larger.
    Note   If you set the font size of the form to 10 when you start, then all controls subsequently added to the form will have a font size of 10.
  • Make sure any Label control that describes a TextBox control immediately precedes the TextBox control in the tab order.
  • Add an access key, using the "&" character, to the Text property of any control the user may want to navigate to.
  • Add an access key, using the "&" character, to the Text property of the label that precedes a control that the user may want to navigate to. Set the labels' UseMnemonic property to true, so that the focus is set to the next control in the tab order when the user presses the access key.
  • Add access keys to all menu items.

To make your Windows Application accessible

  • Add the controls to the form and set the properties as described below. See the picture at the end of the table for a model of how to arrange the controls on the form. For information on working with the MainMenu control, see Adding Menus and Menu Items to Windows Forms.
    ObjectPropertyValue
    Form1AccessibleDescriptionOrder form
     AccessibleNameOrder form
     Font Size10
     TextPizza Order Form
    PictureBoxNamelogo
     AccessibleDescriptionA slice of pizza.
     AccessibleNameCompany logo
     ImageAny icon or bitmap
    LabelNamecompanyLabel
     TextGood Pizza
     TabIndex1
     AccessibleDescriptionCompany name
     AccessibleNameCompany name
     BackcolorBlue
     ForecolorYellow
     Font size18
    LabelNamecustomerLabel
     Text&Name
     TabIndex2
     AccessibleDescriptionCustomer name label
     AccessibleNameCustomer name label
     UseMnemonicTrue
    TextBoxNamecustomerName
     Text(none)
     TabIndex3
     AccessibleDescriptionCustomer name
     AccessibleNameCustomer name
    GroupBoxNamesizeOptions
     AccessibleDescriptionPizza size options
     AccessibleNamePizza size options
     TextPizza size
     TabIndex4
    RadioButtonNamesmallPizza
     Text&Small $6.00
     CheckedTrue
     TabIndex0
     AccessibleDescriptionSmall pizza
     AccessibleNameSmall pizza
    RadioButtonNamelargePizza
     Text&Large $10.00
     TabIndex1
     AccessibleDescriptionLarge pizza
     AccessibleNameLarge pizza
    LabelNametoppingsLabel
     Text&Toppings ($0.75 each)
     TabIndex5
     AccessibleDescriptionToppings label
     AccessibleNameToppings label
     UseMnemonicTrue
    CheckedListBoxNametoppings
     TabIndex6
     AccessibleDescriptionAvailable toppings
     AccessibleNameAvailable toppings
     ItemsPepperoni, Sausage, Mushrooms
    ButtonNameorder
     Text&Order
     TabIndex7
     AccessibleDescriptionTotal the order
     AccessibleNameTotal order
    ButtonNamecancel
     Text&Cancel
     TabIndex8
     AccessibleDescriptionCancel the order
     AccessibleNameCancel order
    MainMenuNametheMainMenu
    MenuItemNamefileCommands
     Text&File
    MenuItemNameexitApp
     TextE&xit

Your form will look something like the following:

Aa984454.vbpizzaorderform(en-us,VS.71).gif

To add functionality to the form and its controls

  1. Add the following code to the Click event procedure for the Order button to calculate and report the total cost and clear the controls.
    ' Visual Basic
    Sub ResetOrder()
       customerName.Text = ""
       smallPizza.Checked = True
       Dim topping As Integer
       For topping = 0 To toppings.Items.Count - 1
          toppings.SetItemChecked(topping, False)
       Next
    End Sub
    
    Private Sub order_Click(ByVal sender As System.Object, _
    ByVal e As System.EventArgs) Handles order.Click
       Const ToppingCost As Decimal = 0.75D
       Const SmallCost As Decimal = 6D
       Const LargeCost As Decimal = 10D
    
       ' Calculate cost based on size and toppings.
       Dim cost As Decimal
       cost = CType(IIf(smallPizza.Checked, SmallCost, LargeCost), _
          Decimal) + toppings.CheckedIndices.Count * ToppingCost
       Dim orderMessage As String
       orderMessage = _
          String.Format("Total cost of pizza for {0} is {1:C}.", _
          customerName.Text, cost)
       MessageBox.Show(orderMessage)
       ResetOrder()
    End Sub
    
    // C#
    private void ResetOrder()
    {
       customerName.Text = "";
       smallPizza.Checked = true;
       for (int topping = 0; topping < toppings.Items.Count; topping++)
       {
          toppings.SetItemChecked(topping,false);
       }
    }
    
    private void order_Click(object sender, System.EventArgs e)
    {
       const decimal ToppingCost = 0.75M;
       const decimal SmallCost = 6M;
       const decimal LargeCost = 10M;
    
       decimal cost;
       cost = (smallPizza.Checked ? SmallCost : LargeCost) +
          toppings.CheckedIndices.Count * ToppingCost;
       string orderMessage;
       orderMessage = 
          string.Format("Total cost of pizza for {0} is {1:C}.", 
          customerName.Text, cost);
       MessageBox.Show(orderMessage);
       ResetOrder();
    }
    
  2. Add the following code to the Click event procedure for the Cancel button to clear the controls.
    ' Visual Basic
    Private Sub cancel_Click(ByVal sender As System.Object, _
    ByVal e As System.EventArgs) Handles cancel.Click
       ResetOrder()
    End Sub
    
    // C#
    private void cancel_Click(object sender, System.EventArgs e)
    {
       ResetOrder();
    }
    
  3. Click the MainMenu control on the form and then double-click the Exit MenuItem to create its Click event method. Add the following code to the Click event procedure for the Exit menu item to close the application.
    ' Visual Basic
    Private Sub exitApp_Click(ByVal sender As System.Object, _
    ByVal e As System.EventArgs) Handles exitApp.Click
       Me.Dispose()
    End Sub
    
    // C#
    private void exitApp_Click(object sender, System.EventArgs e)
    {
       this.Dispose();
    }
    

Supporting High Contrast Mode

High Contrast mode is a Windows system setting that improves readability by using contrasting colors and font sizes that are beneficial for visually impaired users. The SystemInformation.HighContrast Property property is provided to determine whether the High Contrast mode is set.

If SystemInformation.HighContrast is true, the application should:

  • Display all user interface elements using the system color scheme
  • Convey by visual cues or sound any information that is conveyed through color. For example, if particular list items are highlighted by using a red font, you could also add bold to the font, so that the user has a non-color cue that the items are highlighted.
  • Omit any images or patterns behind text

The application should check the setting of HighContrast when the application starts and respond to the system event UserPreferenceChanged. The UserPreferenceChanged event is raised whenever the value of HighContrast changes.

In our application, the only element that is not using the system settings for color is lblCompanyName. The SystemColors Class class is used to change the color settings of the label to the user-selected system colors.

To enable High Contrast mode in an effective way

  1. Create a method to set the colors of the label to the system colors.
    ' Visual Basic
    Private Sub SetColorScheme()
       If SystemInformation.HighContrast Then
          companyLabel.BackColor = SystemColors.Window
          companyLabel.ForeColor = SystemColors.WindowText
       Else
          companyLabel.BackColor = Color.Blue
          companyLabel.ForeColor = Color.Yellow
       End If
    End Sub
    
    // C#
    private void SetColorScheme()
    {
       if (SystemInformation.HighContrast)
       {
          companyLabel.BackColor = SystemColors.Window;
          companyLabel.ForeColor = SystemColors.WindowText;
       }
       else
       {
          companyLabel.BackColor = Color.Blue;
          companyLabel.ForeColor = Color.Yellow;
       }
    }
    
  2. Call the SetColorScheme procedure in the form constructor (Public Sub New() in Visual Basic, public class Form1 in Visual C#). To access the constructor in Visual Basic, you will need to expand the region labeled Windows Form Designer generated code.
    ' Visual Basic 
    Public Sub New()
       MyBase.New()
       InitializeComponent()
       SetColorScheme()
    End Sub
    
    // C#
    public Form1()
    {
       InitializeComponent();
       SetColorScheme();
    }
    
  3. Create an event procedure, with the appropriate signature, to respond to the UserPreferenceChanged event.
    ' Visual Basic
    Protected Sub UserPreferenceChanged(ByVal sender As Object, _
    ByVal e As Microsoft.Win32.UserPreferenceChangedEventArgs)
       SetColorScheme()
    End Sub
    
    // C#
    public void UserPreferenceChanged(object sender, 
    Microsoft.Win32.UserPreferenceChangedEventArgs e)
    {
       SetColorScheme();
    }
    
  4. Add code to the form constructor, after the call to InitializeComponents, to hook up the event procedure to the system event. This method calls the SetColorScheme procedure.
    ' Visual Basic
    Public Sub New()
       MyBase.New()
       InitializeComponent()
       SetColorScheme()
       AddHandler Microsoft.Win32.SystemEvents.UserPreferenceChanged, _
          AddressOf Me.UserPreferenceChanged
    End Sub
    
    // C#
    public Form1()
    {
       InitializeComponent();
       SetColorScheme();
       Microsoft.Win32.SystemEvents.UserPreferenceChanged 
          += new Microsoft.Win32.UserPreferenceChangedEventHandler(
          this.UserPreferenceChanged);
    }
    
  5. Add code to the form Dispose method, before the call to the Dispose method of the base class, to release the event when the application closes. To access the Dispose method in Visual Basic, you will need to expand the region labeled Windows Form Designer generated code.
    Note   The system event code runs a thread separate from the main application. If you do not release the event, the code that you hook up to the event will run even after the program is closed.
    ' Visual Basic
    Protected Overloads Overrides Sub Dispose(ByVal disposing As Boolean)
       If disposing Then
          If Not (components Is Nothing) Then
             components.Dispose()
          End If
       End If
       RemoveHandler Microsoft.Win32.SystemEvents.UserPreferenceChanged, _
          AddressOf Me.UserPreferenceChanged
       MyBase.Dispose(disposing)
    End Sub
    
    
    // C#
    protected override void Dispose( bool disposing )
    {
       if( disposing )
       {
          if (components != null) 
          {
             components.Dispose();
          }
       }
       Microsoft.Win32.SystemEvents.UserPreferenceChanged 
          -= new Microsoft.Win32.UserPreferenceChangedEventHandler(
          this.UserPreferenceChanged);
       base.Dispose( disposing );
    }
    
  6. Press F5 to run the application.

Supporting Control Panel Size and Font Settings

The menu bar, title bar, borders, and status bar will all resize themselves when the user changes the control panel settings. No additional changes to the controls or code are required in this application.

Conveying Important Information by Means Other Than Sound

In this application, no information is conveyed by sound alone. If you use sound in your application, then you should supply the information by some other means as well. Some suggested methods:

Testing the Application

Before deploying the application, you should test the accessibility features that you have implemented.

To test accessibility features

  1. To test keyboard access, unplug the mouse and navigate the user interface for each feature using only the keyboard. Ensure that all tasks may be performed using the keyboard only.
  2. To test support of High Contrast, choose the Accessibility Options icon in Control Panel. Click the Display tab and select the Use High Contrast check box. Navigate through all user interface elements to ensure that the color and font changes are reflected. Also, ensure that images or patterns drawn behind text are omitted.
    Note   Windows NT 4 does not have an Accessibility Options icon in Control Panel. Thus, this procedure for changing the SystemInformation.HighContrast setting does not work in Windows NT 4.
  3. Other tools are readily available for testing the accessibility of an application.
  4. To test exposing the keyboard focus, run Magnifier. (To open it, click the Start menu, point to Programs, point to Accessories, point to Accessibility, and then click Magnifier). Navigate the user interface using both keyboard tabbing and the mouse. Ensure that all navigation is tracked properly in Magnifier.
  5. To test exposing screen elements, run Inspect, and use both the mouse and the TAB key to reach each element. Ensure that the information presented in the Name, State, Role, Location, and Value fields of the Inspect window is meaningful to the user for each object in the UI. Inspect is installed as part of Microsoft® Active Accessibility® SDK, which is available at http://msdn.microsoft.com/library/default.asp?url=/downloads/list/accessibility.asp. (You can also find the page by searching for "Accessibility Downloads" at http://msdn.microsoft.com).

See Also

Accessibility Design Guidelines for Software

Show:
© 2014 Microsoft