Implement accessibility customiser component
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.
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
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- 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