access-settings
v0.0.10
Published
web component for accessibility settings
Readme
access-settings
Web component for accessibility settings
Demo
https://yannickbochatay.github.io/access-settings/example
Installation
From CDN
The fastest and simplest way to get started.
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>My accessible page</title>
<script src="https://cdn.jsdelivr.net/npm/access-settings"></script>
</head>
<body>
<access-settings all></access-settings>
</body>
</html>NPM
npm install access-settings<script src="node_modules/access-settings/dist/index.js"></script>Direct download
You can download the file directly from GitHub.
Usage
Attributes
all
To display all the options, add the all attribute. Otherwise add specific options to display.
<access-settings all>
</access-settings><access-settings dyslexic-font invert-colors contrast font-size line-height>
</access-settings>side
By default, the component has a fixed position at the right of the screen. The drop-down menu will align to the right with the icon. To position it on the left, use the ‘side’ attribute.
<access-settings side="left">
</access-settings>rounded
To display the icon in a circle, use rounded attribute.
<access-settings all rounded>
</access-settings>lang
Component labels are based on lang attribute in the html tag. Languages available are english (en), french (fr) and spanish (es).
Customisation
Add language
import { AccessSettings } from "https://cdn.jsdelivr.net/npm/access-settings";
AccessSettings.languages.oc = { "dyslexic-font": "Poliça disléxica", "inverted-colors": "Colors invertidas", "contrast": "Contraste", "font-size": "Talha de poliça", "line-height": "Nautor de linha", "reset": "Reïnicializar", "close": "Tampar" };
Position
Customise the position of the component in CSS
accessibility-settings {
position:absolute;
top:5px;
right:5px;
}Define left css property if the attribute side is set to left.
Icon style
access-settings::part(icon) {
background-color: brown;
fill:white;
}Change icon
<access-settings all>
<span slot="icon">⚙︎</span>
</access-settings>Add more options
<access-settings all>
<div slot="option">
<label>
<input type="checkbox">
One more option
</label>
</div>
<div slot="option">
<label>
<input type="checkbox"/>
Another option
</label>
</div>
</access-settings>Of course you'll have to write some javascript to make these new options work.
Why not a web component ? It could look like this :
<access-settings all>
<access-more-option1 slot="option"/>
<access-more-option2 slot="option"/>
</access-settings>