Back to guides

How to Customize Your Site’s Focus Indicator

AudioVisual
Hi, everyone! In this tutorial, I’m going to show you how to customize your focus indicator.The main image is of a website called “Presidio of San Francisco”. There is a smaller video in the lower right corner showing the female narrator. The smaller video plays in the corner for the video’s duration showing the narrator.
When you install UserWay’s widget, it overrides the browser’s default focus style with a more visible one.Image does not change.
I’ll show you how it looks. You can see on the screen that the focus style is a solid, blue line. You can customize this focus style inside Widget Settings.A box shows up in the upper-left of the screen that reads “Enable accessibility for the visually impaired.” The box has a thick blue outline around it. The blue line moves across the screen highlighting different high level menu items and opens one submenu. The submenu closes.
So, click on the widget. [Mechanical computer alert]The cursor moves to the accessibility widget in the middle of the right-hand side of the screen. It clicks on the widget and the UserWay menu opens.
Then go to Manage.The cursor scrolls to the bottom of the UserWay widget menu and clicks on the word “Manage”
Search for Remediations.The Settings menu appears and the cursor scrolls to click on the word “Remediation.” Next to that word is written “71 fixed.”
And then click on Focus Style.The Remediation menu opens showing a range of categories and how many fixes happened in each one. The cursor scrolls down to click on “Focus Style.” The Focus Style menu opens.
You can choose a solid, dotted, or dashed line.There are a variety of Focus Style options you can choose from. The cursor hovers over the dotted, dashed, and solid line examples. The dotted line is selected.
Also, the thickness of the line. And finally, the focus color.The cursor moves to show the different line thicknesses. The thickest line weight is selected.
You can choose if you want it red, orange, blue, or if you want to add your own custom color.The cursor moves to hover over the different color options as they are read aloud. The cursor unchecks the blue option and clicks on a rainbow colored bar to select a custom color. A color gradient appears and the cursor clicks on a shade of purple.
I’m going to close the widget and show you how it looks now. [Mechanical computer alert]The widget menu closes
Now the focus indicator is a dotted purple line.The top-level menu items are tabbed through and the blue line has now changed to a dotted purple line as selected.
You can also disable the focus style customization by clicking on this button.The Focus Style menu fades back onto the screen. The cursor toggles “Customize focus style” into the off position.
But, you will get a warning that you will be decreasing the accessibility of your site. And also putting yourself at risk for accessibility-related lawsuits. To comply with WCAG and ADA, you must have a visible focus indicator.A red warning appears warning you that this will decrease your site’s accessibility.
So to make sure that you comply with these guidelines, you can click on ‘Back to Safety.’The cursor hovers over a button that says “Back to Safety.”
But if you understand this risk or your developers have fixed this problem, then you can click on ‘Cancel Anyway.’The cursor clicks on text that reads “I understand the risks, cancel anyway.” The Focus Indicator menu appears again with all of the options removed and text that reads “Using browser’s default focus style.”
To learn how to customize your widget’s look and feel, enable White Label, Agency Mode, and other upgrades, check out the links in the description below.The webpage video fades out and the woman speaking becomes the main image.
Also, don’t forget to subscribe!The video fades to black.

Explore UserWay’s Accessibility Widget