Internet Explorer is not supported by Design Library

The last version of Internet Explorer, version 11, was released on October 17, 2013. This is a very long time ago when taking into account the rapid development of web technologies. These days it is often difficult and time consuming to get modern technologies to work well in this old browser. More and more frameworks are dropping support, and even Microsoft themselves has announced that they will fully drop support for IE in their own services in 2021.

Consequently, we have decided to not include support for IE in the Design Library website.

Luckily, there are modern options in active development. Please use Firefox, Edge or Chrome instead.

Focus state

Any keyboard operable user interface has a mode of operation where the keyboard focus indicator is visible.

Focus states

Guidelines

Short description 

When an interactive element in an interface is focused, it should have a clear visual representation of its focused state. It is essential for navigating with a keyboard. Users who rely on this state may include those who have physical mobility limitations, attention limitations, short term memory limitations, or a power user that uses the keyboard for faster navigation.

Behaviour

Focus visible

The default focus visible for interactive components is a dark border around the element that has a minimum of 2px offset from the interactive element.  

Special use cases

In some use cases, components may need special adjustments in order to meet the requirements and be visually appealing. 

Example

  • A button on an image. Its focus visible outline might not fulfill the contrast ratio between the focus visible outline and the image so an alternate visual indication must be created. 

Examples

Checkbox and radio buttons

imagegwtz.png

 

Tabs

imagenivwb.png

 

Inline text link

 

Accessibility

WCAG

At SEB we comply with WCAG Level AA for Focus Visible. All focus states in our application should live up to the success criteria for Focus Visible. 

 

Techniques

This focus state pattern has also been created with these techniques in mind: 

  • Use HTML elements that are highlighted by the user agent when they receive focus. 
  • There needs to be a distinct visual change to draw attention to the element. 
  • Focus states need to have at least a 3:1 contrast ratio against the background color. 
  • All interactive elements in the interface need to have a focus state, not only buttons and links.  
  • The thickness of lines used for a focus state are not smaller than 2px. Smaller lines may be technically accessible but will be hard to see. Try using a squint test to see how low vision users might be viewing your site. 

Page last updated

Feedback

Was this helpful?