Web accessibility experience

Problem

Do you ignore focus styles because they’re ugly? I’m going to explain why you shouldn’t remove them, and show you how to style them to match your UI (user interface) instead.

What is Focus Outlines?

Keyboard focus outlines must be visible around links, buttons, inputs, and controls when the user is tabbing.

There are a focus state for improvement web accessibility (WCAG). If we consider strict WCAG 2.1 requirements. We can create the following css to implementing focus outline style. If client are not strict with WCAG we  remove it.

Accessibility warning

Please notice that removing outline from input is an accessibility bad practice. Users using screen readers will not be able to see where their pointer is focused at. More info at a11yproject

Focus state 
				
					/* ✅ do this Implementing focus styles */
*:focus {
    outline: none !important;
  box-shadow: 0 0 0 1px hsla(220, 100%, 50%, 80%);
}

*:focus:not(:focus-visible) {
    /* Remove focus indication when a mouse is used */
    outline: none !important;
}
*:focus-visible {
    outline: 0.125rem solid #000000;
    outline-offset: 0.125rem;
}


				
			
				
					
/* 🚫 Do not recommend temporary remove */
*:focus {
  outline: none !important;
}

Web audits / checker

How to solve it:

Option 1 – Do it yourself: fix all critical issues like errors
  • Review all elements and update html structure manually. Example tabindex[use for focusable keyboard], alt, aria, heading tag order, links and insert skip navigation block.
  • Example site: https://www.liftsafegroup.com/ 
Option 2 – Use automated solutions:

We recently signed up for Userway's affiliate program. 

This message from Tim

“We recently signed up for Userway’s affiliate program. Here’s the macro that Support sends when clients bring this up.

I think Projects can basically say the same thing and send the client our affiliate URL https://www.uwtracks.com/W1DX2D/55M6S/.”