Always show where the focus is

You press the Tab key – and no longer know where you are. That's how it is for people who use a website with the keyboard. Here, on Lakeview: navigation, button, footer, form. And nowhere can you see where the focus is. The theme hides it, or every element shows something different. Yet WCAG criterion 2.4.7 requires a visible keyboard focus. With Focus Outlines in EZZE WCAG Pro, you make it consistent. In minutes.

You find the feature in the WordPress menu under EZZE WCAG Pro, in the Site Optimization group, on the Focus Outlines tab. At the top is the master switch: Enable focus outlines. When it's on, your focus styles apply on the public website.

Below that, you choose one of three profiles. The Standard focus is always active and applies to all focusable elements: links, buttons and everything you can reach with the keyboard. The Alternative focus sets a contrast to the standard style, for areas that look different, for example a dark footer on a light page, or the other way round. And form fields get their own style, if you want. The last two you switch on with “Use profile”. And each of these three Focus Outlines, you customize completely: method, line, thickness, color, radius, distance, separately per profile.

Let's start with the Standard focus. For the CSS method, it's best to choose Outline: it's usually the most reliable and doesn't change the size of the element. Then you set line style, thickness and color. For Lakeview, we take a strong blue, three pixels, solid. Corner radius and distance round off the ring. Every change shows up right away in the live preview on the right.

The footer of Lakeview looks different: it's dark. A blue ring is hard to see there. For this, there is the Alternative focus. Activate the profile, choose a light ring and expand the CSS selectors. In the field “Selectors for the alternative style”, there are already example footer links and buttons, the typical candidates. You can add any further selectors: type them in, press comma or Enter, done. These elements are automatically excluded by the standard outline. You don't maintain anything twice.

Sometimes an element shouldn't get a ring at all, for example a decorative slider element or the logo link. For this, there is the field “Excluded selectors”. But how do you find the selector? With the browser. For example, in the Chrome browser, right-click the element and choose “Inspect”. In the “Elements” panel, the matching line is highlighted. Here is an A element, that is, a link, with the class site-logo. The class is written with a dot in front: .site-logo. For an ID, you put a hash in front: #header-logo. You enter this selector in the field. Several are separated with a comma. If the class also appears elsewhere, narrow it down with a section ID: #footer .btn.

Input fields, too, get their own style. Activate the third profile now, the form fields. It applies to input fields, select fields and text areas, that is input, select and textarea. The Send button is deliberately excluded.

Now click “Save settings”. The message appears: Settings saved successfully. Back on Lakeview, the focus ring moves Tab by Tab through navigation, “View rooms”, footer and contact form. Visible everywhere. Consistent everywhere.

With that, the keyboard focus on your website is visible, consistent and exactly where you want it. Check the result yourself, ideally just once: press the Tab key and move through the page. Anyone who gets around with the keyboard will thank you. Focus Outlines in EZZE WCAG Pro: Focus visible. For everyone.