Make Focus Visible - GoDaddy

Make Focus Visible in GoDaddy Website Builder

1. Open your site in GoDaddy Website Builder and navigate to the page you want to evaluate, then open the Preview mode.
2. Press the Tab key and observe how focus appears on the first interactive element. Note any elements that lack a visible focus ring, outline, or highlight.
3. Return to the editor and select an element with missing or weak focus visibility (button, link, image link, icon, or form field).
4. For buttons:
   • Select the button → open the Design panel.
   • Choose a button style that includes a high-contrast outline or color shift when focused (GoDaddy applies focus states automatically for built-in buttons).
   • Adjust Button Color and Border settings so the focused state stands out clearly.
5. For text links:
   • Select the text block → highlight the link → click Link Settings.
   • Ensure the link style includes an underline or clear highlight that remains visible when the link receives focus.
6. For form fields:
   • Select the form → click the specific field.
   • GoDaddy’s default form fields include a focus outline, but ensure the border and background colors contrast well so the highlight is visible.
7. For image links:
   • Select the linked image → open Settings.
   • Add a border or shadow in the Design panel so a focus outline is more visible.
8. For icon-only controls (hamburger menu, close icon, arrows):
   • Select the icon → open Design.
   • Increase contrast on hover and focus by adjusting the icon color or adding a background highlight.
   • Add a light border or glow effect for clear keyboard focus visibility.
9. If you used a custom code block:
   • Edit the code and ensure elements include a clear CSS focus style such as outline: 2px solid #000;.
10. Switch to Mobile view:
    • Check the mobile navigation toggle (hamburger icon) and ensure it displays a visible highlight when tabbed to.
    • Adjust icon color or surrounding padding if needed for clarity.
11. Return to Preview and press Tab through every interactive element to verify that:
    • Focus is always visible,
    • The indicator is strong and high-contrast,
    • All states are consistent across the page.