Sliding Accessibility Settings Panel In JavaScript

Preview:

Description:

A JavaScript library to generate a sliding accessibility setting panel that contains a set of accessibility functions to improve the accessibility and readability.

Accessibility functions included:

• Contrast
• Dark mode
• Font size
• Marker line
• Reading line

How to use it:

1. Load the latest Font Awesome icons for the icons (optional but recommended).

<link rel="stylesheet" href="/path/to/fontawesome/all.css" />

2. Load the Accessibility Settings Panel’s JavaScript and CSS files in the document.

<link rel="stylesheet" href="src/css/asb.css" />
<script src="src/js/asb.js"></script>

3. Customize the accessibility buttons:

const btns = {
  btnHighContrast: {
    active: true,
    dataAccessibility: "contrast",
    class: "setAccessibility",
    icon: "FontAwesome",
    iconClass: ["fas", "fa-adjust"],
    text: "High Contrast",
  },
  btnDarkMode: {
    active: true,
    dataAccessibility: "dark",
    class: "setAccessibility",
    icon: "FontAwesome",
    iconClass: ["fas", "fa-moon"],
    text: "Dark Mode",
  },
  btnIncFont: {
    active: true,
    dataAccessibility: "incFont",
    class: "setAccessibility",
    icon: "A+",
    iconClass: "",
    text: "Increase",
  },
  btnOriFont: {
    active: true,
    dataAccessibility: "oriFont",
    class: "setAccessibility",
    icon: "Aa",
    iconClass: "",
    text: "Original",
  },
  btnDecFont: {
    active: true,
    dataAccessibility: "decFont",
    class: "setAccessibility",
    icon: "A-",
    iconClass: "",
    text: "Decrease",
  },
  btnMarkerLine: {
    active: true,
    dataAccessibility: "markerLine",
    class: "setAccessibility",
    icon: "FontAwesome",
    iconClass: ["fas", "fa-ruler-horizontal"],
    text: "Marker Line",
  },
  btnReadingLine: {
    active: true,
    dataAccessibility: "readingLine",
    class: "setAccessibility",
    icon: "FontAwesome",
    iconClass: ["fas", "fa-ruler-horizontal"],
    text: "Reading Line",
  },
  btnReset: {
    active: true,
    dataAccessibility: "reset",
    class: "setAccessibility",
    icon: "FontAwesome",
    iconClass: ["fas", "fa-redo-alt"],
    text: "Rest",
  },
}