Styling Zugreifbarer Anwendungen

Styling Zugreifbarer Anwendungen
Zurück	Anhang E. Zugriffsreferenz	Weiter

Microsoft Windows allows users to personalize the look and feel of basic desktop elements, such as icons, title bars, and menus, by choosing fonts, font sizes, and color schemes.

In addition, to increase legibility for the visually impaired user, Windows provides a high-contrast display feature that presents applications in a high-contrast scheme, as shown in the following images.

Tabelle E.1. Windows and the Boxely UI Toolkit in normal, and high-contrast mode

Regular Presentation
High-Contrast Presentation

To take advantage of Windows high-contrast mode, and to permit users to view applications in the color schemes of their choice, Boxely applications should be styled using system colors. With system colors, the user's settings for both regular and high-contrast mode automatically propagate to the application. If, instead of using system colors, a developer chooses to use custom fill colors or images as fills, additional code is required to augment these styles in high contrast mode.

Hohen Kontrastmodus aktivieren

To enable high contrast mode in Microsoft Windows, use the following procedure:

From the Control Panel, double-click Accessibility Options.
From the Display tab, select the Use High Contrast check box to turn on high contrast. To turn off High Contract, deselect the Use High Contrast check box.

Wichtig

Tip: In addition to the procedure above, you can enable and disable high contrast using the keyboard shortcut, left ALT + left SHIFT + PRINT SCREEN, provided the Use Shortcut check box in the Settings for High Contrast dialog box is selected.

Systemfarben benutzen

In a Boxely application, you can choose to paint elements in any color, whether it is a built-in color, a system color, an HEX color, or an image resource. This section described how to use system colors.

To paint an element of your application using a system color, set the fill attribute equal to a Boxely UI Toolkit color constant, as shown in the following code:

<library xmlns="http://www.aol.com/boxely/resource.xsd" >
   <style id="myStyle" fill="sysColorActiveGrdRight" />
</library>

<box id="myBox" s:height="100" s:width="100"   style="myStyle" />

There are two benefits to using system colors:

First, the colors that display will reflect the user's current Windows colors.
Second, when the application runs in high-contrast mode, Windows high-contrast settings will automatically propagate to the application.

For a list of available system colors, click here.

Non-System-Farben benutzen

When you include non-system colors in a Boxely application, such as built-in colors, HEX colors, or image resources, high-contrast color settings do not automatically propagate to the application. As a result, for each non-system color used in your application, you must define an equivalent style for use in high-contrast mode.

You can define accessible styles for high-contrast mode using one of the following two methods.

Defining accessible styles inline with regular styles - In this method, accessible styles for high-contrast mode are defined in the same library where normal styles are defined.
Defining accessible styles in an external library file - In this method, accessible styles for high-contrast mode are defined in a separate, external library file, which is loaded when the Boxely UI Toolkit detects that the user's operating system is running in high contrast. (If the operating system is not running in high contrast, it will not load.)

These methods are described below.

To define accessible styles inline with regular styles:

To define accessible styles inline with regular styles, you must first define regular styles for the elements in your application. Then, in the library node, you can define high-contrast equivalent styles for each regular style.

For example, the following code describes a vertical box with the myBackground style, which uses an HEX color as a fill. If you run an application with this code, the same HEX fill displays in both regular and high-contrast mode.

<library xmlns="http://www.aol.com/boxely/resource.xsd"
  xmlns:s="http://www.aol.com/boxely/style.xsd"  > 
    <style id="myBackground"  fill="#ff80a0ff" stroke="black" strokeWidth="1"/>
</library>

<vbox s:position="fixed" s:top="center" s:left="center"  style="myBackground" >
  <hbox s:vAlign="center">
    <label id="firstName" value="First Name:" s:width="60"/>
    <input value="" s:width="15" />
    <label id="lastName" value="Last Name:"  s:width="60"/>
    <input value="" s:width="15" />
    </hbox>
</vbox>

To define a complementary, accessible style for high-contrast mode, you must add a new style to library node, as shown below. In this new style, the accStyleFor attribute tells the Boxely UI Toolkit to apply this style to any element associated with the myBackground style.

<library xmlns="http://www.aol.com/boxely/resource.xsd"
  xmlns:s="http://www.aol.com/boxely/style.xsd"  > 
    <style id="myBackground"  fill="#ff80a0ff" stroke="black" strokeWidth="1"/>
    <style id="accMyBackground" accStyleFor="myBackground" fill="red"
      stroke="black" strokeWidth="1" />
</library>

<vbox s:position="fixed" s:top="center" s:left="center"  style="myBackground" >
  <hbox s:vAlign="center">
    <label id="firstName" value="First Name:" s:width="60"/>
    <input value="" s:width="15" />
    <label id="lastName" value="Last Name:"  s:width="60"/>
    <input value="" s:width="15" />
    </hbox>
</vbox>

To define accessible styles in an external library file:

To define accessible styles in an external library file, you must first define accessible styles in a separate, stand-alone library file. Then, in the .box file that describes your application, you can use the library element's accStyles attribute to load the external library file.

For example, the following code describes a vertical box styled with the myBackground style, which uses an HEX color as a fill. If you run an application this code, the same HEX fill displays in both regular and high contrast mode.

<library xmlns="http://www.aol.com/boxely/resource.xsd" > 
    <style id="myBackground"  fill="#ff80a0ff" stroke="black" strokeWidth="1"/>
</library>

<vbox s:position="fixed" s:top="center" s:left="center"  style="myBackground" >
  <hbox s:vAlign="center">
    <label id="firstName" value="First Name:" s:width="60"/>
    <input value="" s:width="15" />
    <label id="lastName" value="Last Name:"  s:width="60"/>
    <input value="" s:width="15" />
    </hbox>
</vbox>

To define a complementary style for high-contrast mode in an external library file, you must:

Create a new .box file that defines the complementary style with high-contrast color settings. This style is associated with its "regular-mode" equivalent using the accStyleFor attribute.

<library xmlns="http://www.aol.com/boxely/resource.xsd"
  xmlns:s="http://www.aol.com/boxely/style.xsd" > 
  <style id="accMyBackground" accStyleFor="myBackground" fill="black"
    stroke="black" strokeWidth="1" />
</library>

Import the accessible .box file created in previous step using the accStyles attribute.

<library xmlns="http://www.aol.com/boxely/resource.xsd"
  xmlns:s="http://www.aol.com/boxely/style.xsd"  
  accStyles="accStyle.box" >

Wichtig

When you use an external library file to describe accessible styles, the accessible styles are loaded only if the user's operating system is running in high-contrast mode. When you define accessible styles inline with regular styles, all styles are loaded at the same time. As a result, to improve performance in normal mode, the former method is recommended.

Troubleshooting accessible styles:

For accessible styles to work correctly, you must:

Ensure that all regular styles for which you intend to create an accessible style have a unique id. Without an id attribute, the regular style cannot be referenced in the accStyleFor attribute.
Ensure that all accessible styles do not have a tag attribute. The tag attribute is used to associate a style with an element in the application; if the tag attribute is included in an accessible style, the Boxely UI Toolkit will attempt to use the accessible style in normal mode, as well as in high-contrast mode.

Anwendungsgröße für hohen Kontrast-Modus

When you're developing a Boxely application, bear in mind that the size of the font used in labels and other controls will increase when the application runs in high-contrast mode. As a result, it's imperative that you test your scene to ensure that all labels, instructions, and other text are legible in both modes.

To enable high contrast mode in Microsoft Windows, use the following procedure:

From the Control Panel, double-click Accessibility Options.
From the Display tab, select the Use High Contrast check box to turn on high contrast. To turn off High Contract, deselect the Use High Contrast check box.

Wichtig

In addition to the procedure above, you can enable and disable high contrast using the keyboard shortcut, left ALT + left SHIFT + PRINT SCREEN, provided the Use Shortcut check box in the Settings for High Contrast dialog box is selected.

For more information on how to test applications for accessibility, refer to the Testing Applications for Accessibility section of this appendix.

Zurück	Aufwärts	Weiter
Volle Tastaturavigation aktivieren	Home	Integrieren mit Bildschirmlesertechnik