Navigation and input focus must be accurately indicated visually

Developers should ensure that a well-defined (highly visible) visual indication of navigation and input focus is provided for each active element. This position on a screen where an action will take place is referred to as the "focus". Providing a visual indication of the focus allows someone who is viewing the screen to determine what action to take based on which element has focus.

This is particularly necessary for users of assistive technology who do not use the touch screen or mouse in the same way and cannot simply tap or click to place focus where they think it should be. The user must rely on the visual indication of focus to determine where an action will occur or determine what keystrokes to perform to move focus to the desired field.

If the focus is not indicated, the user may be unclear as to where the current execution focus is located and may enter incorrect information, accidentally submit a form without knowledge of what occurred, or spend extra time trying to determine where the keyboard input focus is.

iOS Example

//An input field that does have a caret when focused.
@interface ViewController : UIViewController
@property (weak, nonatomic) IBOutlet UITextField *NoFocusText;

@implementation ViewController
- (void)viewDidLoad {
    [super viewDidLoad];
    // Do any additional setup after loading the view, typically from a
nib.
    //set this to a color that makes it impossible to see the cursor
    _NoFocusText.backgroundColor = [UIColor whiteColor];
}

//A control that correctly allows VoiceOver to display a focus rectangle
around the selected element.
@interface ViewController : UIViewController
@property (weak, nonatomic) IBOutlet UITextField *FocusText;

@implementation ViewController
- (void)viewDidLoad {
    [super viewDidLoad];
    // Do any additional setup after loading the view, typically from a
nib.
    //an example of setting the accessibility frame to specific, selectable
rectangle
    [_FocusText setAccessibilityFrame:CGRectMake(20, 20, 50, 50)];
}

//A button with the backgroundImage and text (title) color that are the
different for each state
@interface ViewController : UIViewController
@property (weak, nonatomic) IBOutlet UIButton *FocusButton;

@implementation ViewController
- (void)viewDidLoad {
    [super viewDidLoad];
    // Do any additional setup after loading the view, typically from a
nib.
    //set the background image to the same image for all states
    [_FocusButton setBackgroundImage:[UIImage
imageNamed:@"button.png"] forState:UIControlStateNormal];
    [_FocusButton setBackgroundImage:[UIImage
imageNamed:@"buttonSelected.png"]
forState:UIControlStateSelected];
    [_FocusButton setBackgroundImage:[UIImage
imageNamed:@"buttonHighlighted.png"]
forState:UIControlStateHighlighted];
    
    //and the corresponding text color
    [_FocusButton setTitleColor:[UIColor whiteColor]
forState:UIControlStateNormal];
    [_FocusButton setTitleColor:[UIColor blackColor]
forState:UIControlStateSelected];
    [_FocusButton setTitleColor:[UIColor blueColor]
forState:UIControlStateHighlighted];
}

iOS Failure

//An input field that does not have a caret when focused.
@interface ViewController : UIViewController
@property (weak, nonatomic) IBOutlet UITextField *NoFocusText;

@implementation ViewController
- (void)viewDidLoad {
    [super viewDidLoad];
    // Do any additional setup after loading the view, typically from a
nib.
    //set this to a color that makes it impossible to see the cursor
    _NoFocusText.backgroundColor = [UIColor blueColor];
}

//A control that does not allow VoiceOver to display a focus rectangle
around the selected element.
@interface ViewController : UIViewController
@property (weak, nonatomic) IBOutlet UITextField *NoFocusText;

@implementation ViewController
- (void)viewDidLoad {
    [super viewDidLoad];
    // Do any additional setup after loading the view, typically from a
nib.
    //an example of setting the accessibility frame to invisible
    [_NoFocusText setAccessibilityFrame:CGRectMake(0, 0, 0, 0)];
}

//A button with the backgroundImage and text (title) color that are the
same for all states
@interface ViewController : UIViewController
@property (weak, nonatomic) IBOutlet UIButton *NoFocusButton;

@implementation ViewController
- (void)viewDidLoad {
    [super viewDidLoad];
    // Do any additional setup after loading the view, typically from a
nib.
    //set the background image to the same image for all states
    [_NoFocusButton setBackgroundImage:[UIImage
imageNamed:@"button.png"] forState:UIControlStateNormal];
    [_NoFocusButton setBackgroundImage:[UIImage
imageNamed:@"button.png"] forState:UIControlStateSelected];
    [_NoFocusButton setBackgroundImage:[UIImage
imageNamed:@"button.png"] forState:UIControlStateHighlighted];
    
    //and the corresponding text color
    [_NoFocusButton setTitleColor:[UIColor whiteColor]
forState:UIControlStateNormal];
    [_NoFocusButton setTitleColor:[UIColor whiteColor]
forState:UIControlStateSelected];
    [_NoFocusButton setTitleColor:[UIColor whiteColor]
forState:UIControlStateHighlighted];
}

Android Example

//A custom element that is drawn differently when it has focus via the
stylesheet
<CustomButton android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:background="@drawable/my_button"></CustomButton>

// the my_button.xml file in res/drawable
<selector
xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_focused="true"    
android:drawable="@android:drawable/btn_default"></item>
    <item
android:drawable="@drawable/btn_default_my"></item>
</selector>

Android Failure

//A custom element that is only drawn one way
<CustomButton android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:background="@drawable/my_button"></CustomButton>

//the my_button.xml file in res/drawable
<selector
xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@drawable/btn_default_my">
    </item>
</selector>

HTML Example

Buttons that have a darker border around the control and a focus rectangle
dotted line inside the control when currently focused.
Implement drawFocusRect api method on the client area of this control.

HTML Failure

Buttons that can be activated but do not display focus visually.

Remediating

Developers must ensure that navigation and input focus is  provided to all elements both on-screen and programmatically. Standard controls handle this automatically and assistive technologies provide a visual focus indicator to inform users of the location of the reading focus. This indicator, while not under the direct control of the application, depends on the bounding rectangle information provided by the application to be accurate and developers must ensure on screen elements do not make the focus rectangle difficult to see visually.

Developers should provide a visible indication when an element has focus. For custom elements that have their own style sheets the focus style must be set in the style sheet when state_focused="true".

iOS: Any controls that implement UIView do have their AccessibilityFrame set correctly, when developers override this, they should set this to a visible rectangle that is distinct from the controls visible frame.

Developers should also ensure that when backgroundImages or text is set, they should be visually distinct for each UIControlState.

HTML: Typically the browser will provide keyboard focus using a dotted rectangle for all standard HTML elements such as input, select, textarea, anchor, and area. When scripting is used to set focus to other elements coupled with the tabIndex attribute, developers must ensure that visual focus is added by using color with border or other visual attributes.

Developers must avoid the use of the "outline:none" CSS property for anchors and other actionable elements. The "outline:none" declaration removes the default focus rectangle from focused elements within the browser. If any custom "outline" CSS properties are used, provide a visual (or highlighted) focus rectangle around the object when it is focused so it can be seen by sighted keyboard-only users or users with low vision. Style properties like "outline-style", "outline-color" and "outline-width" must provide good color contrast, width and styles that can be seen easily when the object has keyboard focus.

For all elements that receive keyboard focus, developers must ensure that the visual keyboard focus also meets the required color contrast requirements between the focus rectangle and the background color of the element. The color contrast checker should be used to verify the level of color contrast is sufficient for the relevant accessibility standards.

One method to provide a visual indication of visual focus is to use the same visual changes on an actionable item when the keyboard is focused on the item as when the mouse hovers over the item. This can be done via CSS and will allow visual focus with a very small amount of effort.

Testing

Recommended tool/method: Manual

Ensure that visual focus is indicated for all components that receive focus

Using the keyboard, are you able to:

• Verify which control keyboard focus is on when you press tab
• Verify which page tab is currently focused when the page tab is tabbed to (when applicable)
• Verify where the text input location is
• Verify where the focus is at all times

Visual focus should be indicated by one of the following:

• A dotted rectangle
• Color highlighting
• Visual change to the icon/image

Focus indicators should be easily visible and distinguishable from other visual states such as active, disabled, selected, etc.

Note to users of Internet Explorer 8.0 and 9.0: IE 8.0 or later handles keyboard focus differently from previous versions of IE. As a result, keyboard focus may not be visible where it would be when using IE 7.0 or earlier. IE 8.0/9.0 users should turn on Compatibility View from the Tools menu to perform this test.