This site has been retired. For up to date information, see handbook.gnome.org or gitlab.gnome.org.


[Home] [TitleIndex] [WordIndex

IMPORTANT: This article is being preserved for historical purposes. Current information and documentation about GNOME Accessibility can be found at: the GNOME Accessibility Project


Prev Next


User Interface Guidelines for Supporting Accessibility

When designing your application's GUI, there are a number of simple guidelines you should follow to ensure that it can be used by as wide an audience as possible, whether in conjunction with assistive technologies or not. Don't be fooled into thinking that this is just a case of "making your GUI usable by people with disabilities", though, and that you shouldn't bother if you know a disabled person is never going to use your application. Following these guidelines will improve the overall usability of your application for everyone who uses it— including you!

General

We all get frustrated if we can't find a feature in an application, or make a mistake from which it takes a couple of minutes to recover, if it's possible to recover at all. If you have some sort of disability, the chances are the effort and time penalties involved will be several times worse. Following a few basic guidelines can help prevent these sorts of situations for all users.

Keyboard Navigation

A well-designed keyboard user interface plays a key role when you are designing accessible software. Blind users can navigate software more effectively using the keyboard, because using the mouse depends on visual feedback of the mouse pointer location. Also, mobility impairments can prevent a user from successfully navigating using the mouse, because of the fine motor control skills required.

It is therefore important to make all mouse actions available from the keyboard, and include keyboard access to all toolbars, menus, links and buttons. Every function your application provides should be available using the keyboard alone. Hide your mouse while you're testing your application if you have to!

Most functionality should be easy to make accessible by using keyboard mnemonics and accelerators, and the toolkit's built-in navigation features. However, operations that rely on drag-and-drop, for example, may require more thought.

Mouse Interaction

Remember that not everybody can use a mouse with equal dexterity, and that some users may have difficulty seeing or following the mouse pointer.

Mouse Interaction Examples

Figure 2. Example of "no-drop" pointer from CDE/Motif

nodrop.png

Graphical Elements

Provide options to customise the presentation of all the important graphical elements in your application. This will make it easier for people with visual or cognitive impairments to use.

Fonts and Text

Even to a user with normal vision, textual output provides the majority of the information and feedback in most applications. It is therefore critical to choose and position text carefully on the screen, and leave the choice of font and size to the user, to ensure that people with vision impaiments can also use your application effectively.

Fonts and Text Examples

Figure 3. Correct label placement for various GUI elements

label_above.png

label_below.png

label_right.png

label_left.png

List control with label above

Large file manager icon with label underneath

Small toolbar icon with label to its right

Spinbox control with label to its left

Colour and Contrast

Poor choice of colours on the screen can cause problems for users with colour blindness (for whom hue is important) or low-vision (for whom brightness/contrast is important). Generally, you should allow the user to customise the colours in any part of your application that conveys important information.

Users with visual impairments may require a high level of contrast between the background and text colours. Often a black background and white text is used to prevent the background from "bleeding" over. These settings are critical for users with visual impairments.

Colour and Contrast Examples

Example 13. Example illustrating redundant use of colour

colour_only.png

This display could cause problems for a red-green colorblind user (colorblindness affects as many as 1 in 7 males in some parts of the world). The lack of contrast between the red text and black background would also make it hard to read for a user with low vision, even with a screen magnifier.

colour_and_arrows.png

This display reinforces the color coding with arrows to show the stock price movement, and uses darker shades of green and red on a lighter background to provide higher contrast. This needn't be the default colour scheme if testing were to show it to be too distracting for the majority of users, but it should be possible to customize it in this way either by theming or via the application's Preferences dialog.

Magnification

Many users, even those not visually impaired, benefit from magnification of text and graphics. However, without magnification, a visually impaired user may not be able to access and use the program at all.

Audio

People who have difficulty hearing, as well as those who work with the sound on their computers turned off, will be disadvantaged if your application relies on sound to convey information. In general, make sure that the user is able to have any audible information conveyed in other ways.

Animation

Used sparingly, animation can be useful for drawing attention to important information in your application— and it can look cool, too. However, it can be problematic for some users, so make sure they can turn it off.

Keyboard Focus

Showing the keyboard focus position clearly at all times is important for users those with vision impairments, as well as "power-users" who prefer to use the keyboard rather than the mouse. There should never be any confusion as to which control on the desktop has focus at any given time. You ought to be able to leave your computer with the focus on any widget in your application, then go off and phone your girlfriend or walk the dog until you've forgotten which widget you left it on. When you return, you should be able to tell straight away exactly which widget it was.

A visual focus indicator is an audio representation of the cursor position relative to the other objects on the desktop. This allows the user to move among objects interactively as the focus changes. The visual focus must be programatically exposed to assistive technologies. Note that in most cases, this is handled automatically by the ATK, without requiring you to do any additional work. However, you will need to be aware of this requirement when writing your own custom widgets, for example.

Keyboard Focus Examples

Example 14. Example illustrating need to show focus clearly

badfocus1.png

One of the controls in this window has focus, but it's impossible to tell which...

badfocus2.png

...until you scroll the list, which reveals that one of its items is currently selected.

goodfocus.png

If the list control itself is given a "focused" border, it's easy to tell it has focus even when the currently-selected item isn't visible.

Example 15. Example illustrating use of secondary focus

badfocus3.png

In this example, it's impossible to tell just by looking which of the two panes actually has keyboard focus.

goodfocus3.png

By using a secondary selection highlight colour in the inactive pane, it's immediately obvious that the tree control has focus here...

goodfocus2.png

...and that the list control has focus here.

Timing

Interfaces in which things appear, disappear or happen according to some hard-coded time limit are often a hindrance to accessibility. Some users may read, type or react very slowly in comparison to others. If information they require is hidden before they are finished with it, or obscured by other information popping up which they didn't explicitly request, then your application will become very frustrating or even impossible to use.

Documentation

People with disabilities cannot use the application effectively if they do not have access to the required manuals and help files. Of particular importance is keyboard navigation, since this is the only way many users can navigate the application.


Home Prev Next


2024-10-23 10:57