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.



Settings Bar screenshot


Settings Bar mobile screenshot



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.


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.


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