Skip to end of metadata
Go to start of metadata

Work in Progress

This page is work in progress.

Three Principles of Inclusive Design

Who, what - First dimension of ID

  • “Recognize, respect, and design for human uniqueness and variability.”

When, where, how - Second dimension of ID

  • “Use inclusive, open & transparent processes, and co-design with people who have a diversity of perspectives, including people that can’t use or have difficulty using the current designs.”

Why - Third dimension of ID

  • “Realize that you are designing in a complex adaptive system.”

Principle 1 - Who / What

Each person visiting a website is a unique individual with different needs, preferences, and ability to adapt to situations. Since most web content are primarily static once published, how can websites change and adapt to account for such human diversity and contexts with minimal disruption?

UI Options provides a way for users to customize and control aspects of their experience on a website without the need for additional software or tools. For a website developer UI Options can also help reveal areas where the web content and structure can be changed to improve flexibility and robustness.

Principle 2 - When, Where, How


Principle 3 - Why

By nature, a website and its content will be accessed and used in multiple ways and contexts. Recognizing that a website and content exists in a complex and dynamic system of interacting parts is important to understanding how to make websites better for more people and more situations.

People may be experiencing a number of factors when they access a website:

  • web browser may be using plugins and add-ons that help them enhance experience (i.e. ad-blockers, font resizing, etc.).
  • operating system may also be adding features or they may be running other software to compliment their tasks (like a screen reader, or voice input)
  • environmental factors such as noise, noise restrictions, lighting, ergonomics
  • language, comprehension, device capability, network connectivity, bi-focal glasses, screen size, etc.

A visitor's experience will depend upon what they can do and how well the web content will cooperate and behave in that moment.

UI Options provides a way for web content to be more flexible and adaptable to more situations.

What is UI Options?

UI Options is a "widget" that can be added to websites that provide ways for visitors to adjust the website's presentation, perceivability, and usability. Currently UI Options can:

  • adjust text size and style
  • increase line spacing
  • change colour contrast
  • add a table of contents
  • emphasize links, buttons, and other inputs

UI Options works within the website and does not require any additional software to be installed - visitors needs only a modern web browser*.

*Aside: What do we mean by "modern web browser"???

Technical: UI Options works by modifying the website's CSS and HTML using Javascript. For example, the colour contrast adjustment works by adding a contrast CSS class to the body HTML element. Table of Contents works by adding a new Nav element to a specified container.

Aside: Have an idea to improve UI Options? We're always looking to add new features. Send us an email / github etc.

Getting and Installing UI Options

There are a number of ways to get and install UI Options:

  1. Pre-built package: recommended for most users building custom websites.
  2. Wordpress Plugin
  3. Drupal Plugin (maintained by ???)
  4. Built from source code on github: recommended for users who require configurability and customization to fit their code project.

Outline for Adding UIO:

  • Install
  • Test
  • Fix issues
  • Updating / upgrading
  • Support, bug reporting
  • Wordpress Plugin

Questions to answer:

  • ongoing maintenance of UIO, upgrading, changes and new features, etc.
  • how to use UIO for wordpress
  • No labels