±«Óãtv

Focus states help all users track where they are within the content. Sighted keyboard and switch device users track progress as they navigate focusable elements, similar to using a remote control with a TV interface. Touch users also receive confirmation that an element is interactive. Do not depend on browser default focus states for hover, focus, or touch, as they are inconsistently implemented across browsers, are not always obvious, and can lack sufficient contrast depending on the design. Instead use the same styled focus state for all three interactions: hover, focus, or touch and a different style for selected states.

Focus states should not be used to convey information, for example via a hover state, unless that information is clearly available elsewhere.

---

iOS

By default, a visible focus outline is provided by VoiceOver when navigating through page content. For elements such as selectable tabs in tab panels, make sure that the currently selected item is clearly identifiable (e.g. through an underline or a different font).

iOS Example (Objective-C)

// The following will adjust the size of the VoiceOver cursor around the object (change values to suit)
[myButton.accessibilityFrame = CGRectMake(50, 50, 100, 100)\];

---

Android

By default, Android provides a light green outline around focusable elements when TalkBack is active. As this can be difficult to perceive, and is not displayed when TalkBack is not active, provide a custom visible indicator around elements when they receive focus. For elements such as selectable tabs in tab panels, make sure that the currently selected item is clearly identifiable (e.g. through an underline or a different font).

Android Pass 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_focused"></item>
    <item android:drawable="@drawable/btn_default_my"></item>
</selector>

---

HTML

By default, standard HTML elements have a visual focus indicator provided by the browser. Therefore all links and focusable elements must not have their outline suppressed via CSS changes with the focus pseudo class or the outline property unless a custom focus is provided. If using a custom focus give elements the same visible focus on :focus as on :hover and provide visible focus for form fields.

HTML Pass Example

<!-- example 1, no CSS property changes will automatically produce desired visual focus in supporting user agents-->
<a href="..."> Next </a>

<!-- example 2, use of the CSS outline property -->
<style>
  a:focus, a:hover, a:active {
    outline: 2px solid black;
 }
</style>
...
<a href="..."> Next </a>

---

Testing

Procedures

1. Navigate through focusable elements.
2. For each active element that takes text input, receives focus or is selected:
   • Verify that the focus location is indicated at all times and follows traversal of the user interface.
   • Verify the focus indicator passes colour contrast.
   • Verify that the focus indicator can be clearly distinguished from other on-screen elements.
3. For each selected element:
   • Verify the selected state is different to the focus state.
   • Verify the selected state passes colour contrast.

Outcome

The following is true:

• The text input location is indicated;
• When switching page tabs, the focused tab is indicated visually and announced by a screen reader;
• The object, element, or control that has focus is indicated in a clear, visually distinguishable manner that meets the .

---