Custom Focus

Description

Users may want to see which fields or buttons they are interacting with in a clearer way than the default, especially when tabbing between elements.

The custom focus method is especially useful for users who use accessibility tools. Custom focus aims to ensure that all users, including those with disabilities, can interact with and navigate through digital interfaces effectively and inclusively.

Titan Web’s custom focus functionality allows you to define unique styles for focused elements such as links, buttons, and form fields. This is crucial for users who navigate primarily through keyboard or assistive technologies, ensuring they can easily identify which element is currently focused.

How to Guide

1. Click the + icon to open the element list.
2. Drag-and-drop an element to the canvas, for instance, a button.
   • Other examples include input elements.
3. Click the Gear icon to open the Project Settings and click the Site Elements option.
4. Use the toggle switch to enable the Custom Focus open.
5. Click the Gear icon. The Customize Styles screen opens.

6. Add a border:
   • Color and weight
   • Radius
   • Advanced: Border types

7. Add outline offset in the field.
   • The outline property creates a visible outline around an element. It is typically used to highlight elements when they receive focus.
   • The outline-offset property allows you to control the space between the outline and the edge of the element.

8. Add a shadow:
   • X, Y
   • Blur
   • Spread
   • Inner or Outer

9. Save and Preview the project.
10. Click the element, for instance, a button, or use the Tab key on the keyboard to tab between elements. The custom border is added to the element that has the focus.

In this example, the button element’s custom border has the following properties: