Settings

Website settings become visible after selecting the gear icon in the upper right hand corner.

The settings allows visitors to:

  • Apply a high contrast viewing mode.
  • Increase and decrease the font size.
  • Select the dyslexic font type.
  • Users can also reset the settings.

Sample

Desktop

Settings Bar screenshot

Mobile

Settings Bar mobile screenshot

HTML

Include path

Add Settings bar njk include code right after Utility header component: 

{% include "src/_includes/settings.njk" %}

Note: Path to the include will be relative to the directory of your page.

Usage

When and how to use it

The settings component is a required structural component. Place it in the upper right corner of the utility header.

How not to use it

Do not add other elements to the settings component. Use it only as designed.

Accessibility

Standard accessibility review

Each time a new component version is published:

  • Test with the axe accessibility tool
  • Review with the VoiceOver or NVDA screen reader
  • Ensure all actionable elements are accessible by keyboard command and tab in a logical order
  • Check the component layout on a variety of screen sizes