Archived topic
Focus Indicator (for keyboard navigation) + Search Field
3 replies · Started by Kris on June 11, 2021
2 accessibility asks:
I'm using the "Search" theme out of the box from the Site Library.
I'd like to implement a focus navigator with a thick outline border and sufficient (3:1) color contrast with both the light background and then again with the dark footer background.
Similarly, I'd like to add a hover focus.
Something similar to the blue focus provided by the check box below this form is amazing.
Can someone provide a CSS code snippet for this?
Also, there is no sitewide search field available in the "Search" theme?
Is there a way to enable or add this?
Thank you.
Hi there,
simple CSS for setting a global focus style:
*:focus {
border: 1px solid blue;
outline: 5px solid cyan;
}And then a specific rule for the content within the footer:
.site-footer *:focus {
border: 1px solid green;
outline: 5px solid red;
}Change the colors to suit your needs.
You can enable the Navigation Search in Customizer > Layout > Primary Navigation
Thank you very much.
Resolved.
Glad to be of help
