{"id":4974,"date":"2024-04-14T11:13:58","date_gmt":"2024-04-14T03:13:58","guid":{"rendered":"https:\/\/webflow.tenten.co\/?p=4974"},"modified":"2024-04-14T11:13:58","modified_gmt":"2024-04-14T03:13:58","slug":"sketches","status":"publish","type":"post","link":"https:\/\/webflow.tenten.co\/en\/sketches\/","title":{"rendered":"Sketches"},"content":{"rendered":"\n
\n

Upon initial observation, sketch, boundaries, and shadow boxes share many similarities. Nevertheless, unlike borders or shadow boxes, a sketch outlines a border-like form around the limits of an element. This implies the sketch does not occupy extra space in your design, will not impact the size of an element, and does not lead to layout movements upon its appearance.<\/p>\n

You have the option to utilize sketches to substitute the default focus ring styling of the browser when a website visitor utilizes a keyboard to navigate to your interactive components (e.g., buttons, hyperlinks, and input fields). When applied appropriately, sketches on interactive components enhance the accessibility of your website for keyboard-reliant visitors (e.g., individuals with low vision, restricted mobility, or attention disorders).<\/p>\n

Remark:<\/strong> To ensure proper tab functionality for Safari users, you need to activate \u201cPress Tab to highlight each item on a webpage\u201d in the Settings > Advanced panel.<\/p><\/blockquote>\n

Throughout this tutorial, you will understand:<\/p>\n

    \n
  1. Instances when to apply a sketch<\/li>\n
  2. How to include a sketch on interactive elements<\/li>\n
  3. How to revert a sketch to use default browser settings<\/li>\n
  4. Best approaches when using sketches<\/li>\n<\/ol>\n

    Instances when to apply a sketch<\/h2>\n

    Various browsers naturally exhibit different sketches on interactive components, leading to inconsistent outcomes.<\/p>\n

    \n
    <\/div>
    Google Chrome, Safari, Firefox, and Microsoft Edge each present distinct default sketches on interactive elements.<\/figcaption><\/figure>\n

    To counter this disparity, you can utilize a sketch to override and standardize the sketch behavior across all browsers, ensuring that keyboard focus on your interactive elements is clear, consistent, and accessible to your website visitors.<\/p>\n

    \n
    <\/div>
    Uniformize the sketch behavior on all browsers by styling your sketches on interactive elements.<\/figcaption><\/figure>\n

    How to insert a sketch to interactive elements<\/h2>\n

    Due to the critical role of properly setting a sketch on an interactive element in enhancing legibility, consistency, and accessibility, let\u2019s review some key points to remember when employing a sketch:<\/p>\n