Browsers place focus indicators around interactive elements on a page to aid in accessibility, especially for people with mobility impairments. This provides ease of use for the wide array of guests who might find themselves viewing your event page.
These indicators typically take the form of bold outlines around interactive elements and should never be removed.
But that doesn't mean they need to conflict with your page design. Splash provides the ability to edit these colors so they remain on-brand with the rest of your event page.
You can update the border color using CSS, which is available with advanced design tools.
To get started:
- Click into the Event Page touchpoint.
- Click wrench icon on the bottom of the Layout tab.
- Select CSS and Main CSS.
- Paste the below code.
outline: 1px #000000 solid;
This code replaces all focus indicators on an event page with a 1px black outline.
Pro Tip: We recommend replacing #000000 with your text color or another bold, brand-approved color. As long as the outline color is different than the color you use on your buttons, you'll be good to go.
To learn more about creating more accessible pages, check out Accessibility in Splash.