Various focus indicator examples

The button doesn't have a traditional focus indicator, but its accessible name "close" appears on hover/focus.

Note: while this revealed content does not have a means to dismiss it, it does not fail 1.4.13 Content on Hover or Focus.

All focusable elements of the tab widget (the tabs, tabpanel and hyperlink within the tab panel) have visible focus indicators (outline, custom outline, box-shadow, or a combination).

NOTE: if one were hitting shift + tab to return to the tablist from content within a tabpanel, or after a tabpanel that contains no focusable elements, focus purposefully skips the tabpanel container so as to reduce the effort for a user to return to the tablist to select a new tab.

The hyperlink is visually hidden by default, but appears when receiving keyboard focus.

While the UA outline has been overridden and set to none for the video element, when focused it still has a background color change. The controls of the video also retain their outline focus indicators, regardless of the outline: none set to the video element itself.

Even though a class is set to the object to attempt to override the default UA outline style, the video rendered within the object does not respect the author style, and the UA focus indicator style is still displayed.

While the UA outline of the content editable element has been set to none, the text cursor is still available and counts as a (poor) focus indicator, allowing for a technical pass of Focus Visible.

This is generally not considered a good user experience.

While the UA outline of the text input element has been set to none, the text cursor is still available and counts as a (poor) focus indicator, allowing for a technical pass of Focus Visible.

This is generally not considered a good user experience.

While the UA outline of the textarea element has been set to none, the text cursor is still available and counts as a (poor) focus indicator, allowing for a technical pass of Focus Visible.

This is generally not considered a good user experience.

The default UA outline for the button is present when focused.

While the deafult UA focus outline has been removed, a replacement focus style (changing the border of the button) has been specified. The border of #000 against the #008000 (dark green) background has a contrast ratio of 4.08:1, also passing non-text contrast requirements for the focus indicator.

This example is a table element that has been given a role of grid, and the cells have each been given a role of gridcell.

The grid cells are non-interactive and do not receive keyboard focus. The links and buttons inside each cell are individually focusable and have focus indicators. This exapmle fully passes 2.4.7 Focus Visible, as all focusable elements produce visible focus indicators.

There is the possibility some might claim this to fail Name, Role, Value or Info and Relationships because this table was given the role of grid, but none of the expected keyboard behaviors for an elemetn with role=grid were implemented.

Note some screen readers, such as NVDA (tested April 2026 with latest release), will ignore the grid role. Windows Narrator, however, will announce the grid role, but someone will noticeably not be able to use expected arrow key navigation, since it has not been implemented.

Only the element with role=grid is being called out as a failure here. There is effectively no difference between role=gridcell and role=cell. A td element will expose either role depending on the parent table element's computed role. If the role=grid were removed, the gridcell would almost universally be treated no differently than role=cell.