Applications shall permit user preferences from platform settings for color, contrast, font type, font size, and focus cursor.

Rationale

High Contrast

For most people, color is a matter of preference, but it is critical for many users with visual impairments. Many users with low vision need high contrast between text and the background to be able to read information on the screen. They may even need a particular color scheme, such as white text on a black background, to prevent the background from "bleeding" over and obscuring the foreground text. Some people consider the default color scheme legible but find that it causes eyestrain over longer periods of time.

Some operating systems provide a "high contrast" setting. For example, Windows 7 users enable high contrast by going to the Ease of Access Center, selecting Set up High Contrast and choosing a high contrast theme. The purpose of this requirement is to enable users who need a high contrast theme to define their display preferences in one place rather than having to modify the display settings for each application.

System settings for color, font type and font size

Someone with a vision disability who has difficulty reading small text or text that does not have sufficient background contrast can use display settings available through the operating system to make information on the screen more accessible. These settings allow users to modify display settings to make software accessible without purchasing additional hardware and software.

On the Windows platform, users can customize color, font type and font size settings to meet their specific needs. Applications may also provide the capability to customize the color font type and font size for use within an application.

System settings for focus cursor

Someone with low vision may have difficulty following the focus cursor. On the Windows platform, the user can modify the thickness of the focus rectangle and the blinking cursor (caret).

Exception: Applications that are designed to be isolated from their underlying platform software, including Web applications, shall not be required to conform to 503.2.

Development Techniques

Note: Review the General techniques as well as other tabs applicable to your technology.  Prioritize the use of technology-specific techniques, and implement the General techniques as needed. You are always required to find, understand and implement accessible code techniques to meet the checkpoint. The documented techniques and supplements are not exhaustive; they illustrate acceptable ways to achieve the spirit of the checkpoint. If numbered, techniques are in order of preference, with recommended techniques listed first.

General techniques

Each item in this section represents a technique or combination of techniques deemed sufficient for meeting this checkpoint.

Support systems settings for high contrast for all user interface controls and client area content

  • Software must determine if the user has specified high contrast and ensure the use of the color scheme specified by the high contrast setting is supported throughout the software application.
  • If system settings are not automatically inherited, provide an option to use the system settings for high contrast instead of the application settings.

Inherit system settings for color, font type and font size for all elements of the user interface

  • Software must support the user's settings for color, font type and font size.
  • If system settings are not automatically inherited, provide an option to use the system settings instead of the application settings.
  • Scale the window size or provide the ability to scroll the window to ensure that as the font size is changed all of the information fits in the window or can be made visible and interactive through scrolling.

Inherit system settings for the focus cursor(s)

  • Software must support the user’s settings for the focus cursor(s) including the focus rectangle and the blinking cursor also known as the caret.
  • If system settings are not automatically inherited, provide an option to use the system settings instead of the application settings.

Mobile Native (iOS) techniques

Instructions: In addition to the General techniques, the Mobile Native iOS techniques in this section represent a technique or combination of techniques deemed sufficient for meeting this checkpoint.

Provide a mode of operation that allows user preferences for platform settings for color, contrast, font type, font size, and focus

iOS provides these features; make sure they are maintained. Allow the user to set preferences on the OS level and ensure that the settings are not altered.

Eclipse techniques

Instructions: In addition to the General techniques, the Eclipse techniques in this section represent a technique or combination of techniques deemed sufficient for meeting this checkpoint.

Use getHighContrast method

Eclipse applications should use the getHighContrast() method to determine whether the user has enabled a high contrast theme. If high contrast is enabled, query org.eclipse.swt.widgets.Display to getSystemColor to obtain the system colors for the widget including foreground color, background color, border color and colors used to paint shadows and highlights. In high contrast mode the colors used are limiting and query the system ensures the correct colors of the high contrast theme are used. System color constants are defined in org.eclipse.swt.SWT.

All information displayed must support the high contrast setting, including all text and images that convey important information. Images that contain important information and are drawn using multiple colors should be drawn using the high contrast color combinations, only or an alternative form of the information is made available, e.g. text is associated with the image. Also, ensure to remove any background images as these can be distracting to those who depend upon high contrast support.

See the Eclipse article, Designing Accessible Plug-ins in Eclipse, which provides a good overview of obtaining system colors to support high contrast.

 The following example checks for high contrast and uses the system widget background color, otherwise,white is set as the background color if not in a high contrast theme.

Boolean highContrast = Display.getDefault().getHighContrast();


if (highContrast) {

return Display.getCurrent().getSystemColor(
SWT.COLOR_WIDGET_BACKGROUND);

}
else {

return Display.getCurrent().getSystemColor(SWT.COLOR.WHITE);
}

Code for Eclipse example 1: getHighContrast method

 

Notes:

  1. This example is not complete. Colors for foreground, borders, highlights and shadows should also be obtained from the system to ensure the appropriate system colors are used for the high contrast theme.
  2. The high contrast theme must be set before launching the application to properly apply high contrast to the application.

Use org.eclipse.swt.widgets

Eclipse widgets (org.eclipse.swt.widgets) will automatically be created using the correct font and color based on the system settings for the class of user interface component they represent. When the software supports the user's settings for font, size and color, the software must not set the font for any widgets created.

Query system font and system color settings

If the user has requested to use the system settings for fonts and colors, query org.eclipse.swt.widgets.Display to getSystemFont() and getSystemColor to obtain the system font and the system colors for the widget including foreground color, background color, border color and colors used to paint shadows and highlights.

The font and color settings can be queried using org.eclipse.swt.display.Display.getSystemFont() and org.eclipse.swt.display.Display.getSystemColor(), respectively.

See the Eclipse article, Designing Accessible Plug-ins in Eclipse, which provides a good overview of obtaining system fonts and colors.

Implement Scrollable

Implement a subclass of org.eclipse.swt.widgets.Scrollable to provide scroll bars that allow data to be made visible and interactive through scrolling when all of the information does not fit in the window.

Use default focus indicator

To support the user’s system settings for the thickness of the focus rectangle and blinking cursor (caret), use the default focus indicator provided by the Eclipse Standard Widget Toolkit and no additional programming is required.

Use GC.drawFocus

If necessary to draw a focus rectangle, call org.eclipse.swt.graphics.GC.drawFocus to draw a focus rectangle that has the appearance of the platform's focus rectangle.

Windows-based (MSAA+IA2) techniques

Instructions: In addition to the General techniques, the Windows-based (MSAA+IA2) techniques in this section represent a technique or combination of techniques deemed sufficient for meeting this checkpoint.

Use SystemParametersInfo to query high contrast setting

Windows applications should use the SPI_GETHIGHCONTRAST and SPI_SETHIGHCONTRAST flags with the SystemParametersInfo function to get and set the high contrast parameter. The status of the high contrast parameter should be checked during initialization and when processing WM_SYSCOLORCHANGE messages.

The status of the high contrast parameter can be obtained by calling SystemParametersInfo with the SPI_GETHIGHCONTRAST flag. If the dwFlags member of the HIGHCONTRAST structure has the HCF_HIGHCONTRASTON bit set, then the high contrast support is enabled.

Software must then support the high contrast setting by using the colors defined by the user for high contrast, foreground and background pair. This can be obtained by using the GetSysColor function using either the combination of COLOR_WINDOWTEXT and COLOR_WINDOW or a combination of COLOR_BTNTEXT and COLOR_BTNFACE. These combinations will enable software to infer the correct setting.

All information displayed must support the high contrast setting, including all text and images that convey important information. Images that contain important information and are drawn using multiple colors should be drawn using the high contrast color combinations, only or an alternative form of the information is made available, e.g. text is associated with the image. Also, ensure to remove any background images as these can be distracting to those who depend upon high contrast support. The high contrast parameters are discussed in more detail on the Microsoft MSDN site. Microsoft also provides examples for enabling high contrast on their Web site.

The following code sample from the MSAA SDK shows how to check for high contrast:

BOOL fHighContrast = FALSE;
HIGHCONTRAST hc;
hc.cbSize = sizeof( hc );
if( SystemParametersInfo( SPI_GETHIGHCONTRAST, sizeof( hc ), & hc, FALSE ) && ( hc.dwFlags & HCF_HIGHCONTRASTON ) )
fHighContrast = TRUE;
        
Note on High contrast support in Windows 8 and later

Support for high contrast has changed in Windows 8 and later. To support the new high contrast themes provided by Windows 8 and later, applications should provide an application compatibility section defined in their manifest that contains the Windows 8 compatibility GUIDs. See Supporting High Contrast Themes in Windows 8 and later for complete details.

Use font set for system messages

Software can provide options for customizing the display of the program's content. However, there must be a configuration option in the software that tells the program not to use its own setting, but to use the setting the user has set in the display option of the control panel. 

Use the font set for system messages. This font may be obtained by using the GetClientMetrics call.

Process the WM_THEMECHANGED control message to react to the user's system setting changes, and re-draw the software information based on the updated user choice.

The following is a code sample to obtain the logical font definition for the font being used by the system for messages.

Void GetClientMetrics(hDC, hWnd)
{
.
.
.
     
nonClientMetrics.cbSize =sizeof(NONCLIENTMETRICS);

     
// get system metrics information
     
fResult = SystemParametersInfo(SPI_GETNONCLIENTMETRICS,
          
sizeof(NONCLIENTMETRICS),
          
&nonClientMetrics, // holds metric information
          
0);
     
/* Set the logical font to be based on the Message Font */
     
logFont= &nonClientMetrics.lfMessageFont;

     
/* Create the font */
     
hFont = CreateFontIndirect (logFont);

     
/* select the font for the application window DC */
     
SelectObject(hdc, hFont);

     
/* and so on */
     
}

 

Use SetWindowPos      

Use the SetWindowPos() to adjust the window size to accommodate the change in the font size.

Providing scrolling

Refer to the MSDN article About Scroll Bars for information and examples on how to provide scrolling of a window when information extends beyond its borders and requires scrolling so that "hidden" information can be made visible.

Use standard Windows controls

When using standard Windows controls, no additional work is required to provide visual focus that takes on the system settings for focus rectangle and blinking cursor.

Access focus border settings in SystemParametersInfo

SystemParametersInfo function provides two parameters, SPI_GETFOCUSBORDERWIDTH and SPI_GETFOCUSBORDERHEIGHT, which retrieve the width and height, in pixels, of the edges of the focus rectangle drawn with DrawFocusRect.


Most links in this checklist reside outside ibm.com at the Web Content Accessibility Guidelines (WCAG) 2.0. W3C Recommendation 11 December 2008: http://www.w3.org/TR/WCAG20/

Copyright © 1994-2017 World Wide Web Consortium, (Massachusetts Institute of Technology, European Research Consortium for Informatics and Mathematics, Keio University, Beihang University). All Rights Reserved.

Copyright © 2001, 2017 IBM Corporation