mi6 / mi6/ic-ui-kit

Implement accessibility customiser component

Open
#3,708 1 comment 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Dominant language
TypeScript
Stars
53
Forks
63
Avg merge
2d 4h
Merged PRs (30d)
15

Description

Summary

The outcome of https://github.com/mi6/ic-ui-kit/issues/3675 was to create a component where users can customise a site to their own preference.

💬 Description

UserWay have created a component where users can change things about a site so that it best fits them. This is the best solution for high/low contrast mode so that it captures everyone's use case.

Image

An example of the UserWay component: https://www.wst.tv/ (floating action button in the bottom right corner).

The full suggestion is in the initial investigation which is internal, but I don't think we'd need to add so much customisation to start off with. I think we should start with:

  • Offer toggles for high contrast and low contrast
  • Increase/decrease font size
  • Increase/decrease letter spacing
  • Increase/decrease line height
  • Change font
  • Change background colour

Each of these things should have a few options that have been picked by designers to be acceptable working together, it shouldn't be fully customisable where they could enter any font name/background colour.

💰 User value

We don't have to create a "one size fits all" solution for low and high contrast mode, users will be able to customise a site themselves.

Additional info

Once this has been created we should implement it on our site.

An issue we'll run into if we copy the way UserWay have done it, is that it will clash with back to top.

Dependent on #3707

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start with the initial investigation referenced in the issue and review dependent issue #3707 before taking this on. Define the component scope around the listed accessibility options, account for the known clash with back to top, and confirm that the component can then be implemented on the site.

Written by the indexing model from the issue text.

Assessment

Tech stack
typescript
Domain
accessibility, frontend
Issue type
Feature
Difficulty
5/5
Estimated time
Over a week
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
25/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.