Reply To: accessibility issue – outline:0

Home Forums Support accessibility issue – outline:0 Reply To: accessibility issue – outline:0


This is a good article about keyboard navigation on WebAIM: Keyboard Navigation

Relevant part here:

keyboard user typically uses the Tab key to navigate through interactive elements on a web page—links, buttons, fields for inputting text, etc. When an item has keyboard “focus”, it can be activated or manipulated with the keyboard. A sighted keyboard user must be provided with a visual indicator of the element that currently has keyboard focus. A basic focus indicator is provided automatically by the web browser and is typically shown as a border (called an outline) around the focused element. However, these outlines can be hidden by applying outline:0 or outline:none CSS to focusable elements.

Avoid outline:0 or similar styles on links and other elements that can receive keyboard focus.

In addition to the default outline, you can use CSS to make the focus indicator more visually apparent and keyboard-friendly by adding a background color or other visual style to links, and other controls that will receive keyboard focus. The outline can be styled to match your site design.