My Accessibility Widget

🧰 Version Info

| Tool | Version | |--------------|-------------| | Node | v22.16.0 | | PNPM | v10.12.4 | | accesibility | v5.18.1 |

const copywriting

const copywriting = {
    body: {
      header: "Accessibility Menu",
      button_reset: "Reset",
    },
    group_accessibility_profiles: {
      title: "Accessibility Profiles",
      seizure_safe_mode: {
        title: "Seizure Safe Mode",
        description: "Reduce flashing and visual effects",
      },
      visually_impaired_mode: {
        title: "Visually Impaired Mode",
        description: "Improve clarity and visual contrast",
      },
      cognitive_learning_support: {
        title: "Cognitive & Learning Support",
        description: "Support reading, focus, and navigation",
      },
      adhd_friendly_mode: {
        title: "ADHD Friendly Mode",
        description: "Reduce distractions and improve focus",
      },
    },
    group_appearance: {
      title: "Appearance",
      contrast_mode: {
        title: "Contrast Mode",
        description: "Select page contrast level",
        button: {
          default: "Default",
          high: "High",
          dark: "Dark",
          light: "Light",
        },
      },
      monochrome: {
        title: "Monochrome",
        description: "Apply a grayscale filter",
      },
      saturation_mode: {
        title: "Saturation Mode",
        description: "Select page saturation level",
        button: {
          low: "Low",
          default: "Default",
          high: "High",
        },
      },
      custom_color: {
        title: "Custom Color",
        description: "Adjust colors to your preference",
        options: {
          background: {
            title: "Background",
            apply: "Apply",
            reset: "Reset",
          },
          heading: {
            title: "Heading",
            apply: "Apply",
            reset: "Reset",
          },
          text: {
            title: "Text",
            apply: "Apply",
            reset: "Reset",
          },
        },
      },
      hide_images: {
        title: "Hide Images",
        description: "Hide all images on the page",
      },
    },
    group_reading: {
      title: "Reading",
      typography: {
        title: "Typography",
        description: "Adjust text to your preference",
        font_size: {
          title: "Font Size",
          default: "Default",
        },
        line_height: {
          title: "Line Height",
          default: "Default",
        },
        letter_spacing: {
          title: "Letter Spacing",
          default: "Default",
        },
        text_align: {
          title: "Text Align",
          button: {
            default: "Default",
            left: "Left",
            center: "Center",
            right: "Right",
          },
        },
      },
      reading_tools: {
        title: "Reading Tools",
        description: "Support reading, focus, and navigation",
        readable_font: {
          title: "Readable Font",
        },
        reading_mask: {
          title: "Reading Mask",
        },
        cognitive_reading: {
          title: "Cognitive Reading",
        },
        screen_reader: {
          title: "Screen Reader",
        },
      },
      highlight: {
        title: "Highlight",
        description: "Highlight important elements",
        links: {
          title: "Links",
        },
        headings: {
          title: "Headings",
        },
        hover: {
          title: "Hover",
        },
      },
      content_scaling: {
        title: "Content Scaling",
        default: "Default",
      },
    },
    group_interaction_controls: {
      title: "Interaction & Controls",
      stop_animation: {
        title: "Stop Animation",
        description:
          "Pause animations for a more comfortable experience",
      },
      mute_sound: {
        title: "Mute Sound",
        description:
          "Mute all audio, sounds, and embedded video players",
      },
      big_cursor: {
        title: "Big Cursor",
        description: "Select which cursor you want to use",
        button: {
          default: "Default",
          black: "Black",
          white: "White",
        },
      },
    },
  };

Example use Next.js

_app

import "@/styles/globals.css";
import type { AppProps } from "next/app";
import { useEffect } from "react";
import { initAccessibilityWidget } from "my-accessibility-widget";
import "my-accessibility-widget/style.css";
import "my-accessibility-widget/widget.css";

export default function App({ Component, pageProps }: AppProps) {
useEffect(() => {
initAccessibilityWidget(copywriting);
}, []);

return <Component {...pageProps} />;
}

example use nuxt js

plugins/accessibility-widget.client.ts

import { defineNuxtPlugin } from "#app";
import { initAccessibilityWidget } from "my-accessibility-widget";
import "my-accessibility-widget/style.css";
import "my-accessibility-widget/widget.css";

export default defineNuxtPlugin(() => {
  if (process.client) {
    initAccessibilityWidget(copywriting);
  }
})

example use wordpress

run build copas in marfin-accessibility.umd.js, widget.css, marfin-accessibility.es.js

fuction.ts in thema

function ordent_enqueue_accessibility_widget() {
    $theme_uri = get_template_directory_uri();
    $theme_dir = get_template_directory();

    $widget_css_path = $theme_dir . '/adjust the folder name to save the build results/widget.css';
    $widget_js_path  = $theme_dir . '/adjust the folder name to save the build results/marfin-accessibility.umd.js';

    if ( file_exists( $widget_css_path ) ) {
        wp_enqueue_style(
            'marfin-accessibility-style',
            $theme_uri . '/adjust the folder name to save the build results/widget.css',
            array(),
            filemtime( $widget_css_path )
        );
    }

    if ( file_exists( $widget_js_path ) ) {
        wp_enqueue_script(
            'marfin-accessibility-js',
            $theme_uri . '/adjust the folder name to save the build results/marfin-accessibility.umd.js',
            array(),
            filemtime( $widget_js_path ),
            true
        );
    }

    $current_lang = 'default';
    if ( function_exists( 'pll_current_language' ) ) {
        $lang = pll_current_language( 'slug' );
        if ( ! empty( $lang ) ) {
            $current_lang = $lang;
        } else if ( function_exists( 'pll_default_language' ) ) {
            $current_lang = pll_default_language( 'slug' );
        }
    }

    $default_config = array(
        'body' => array(
            'header'       => 'Accessibility Menu ini manipulasi',
            'button_reset' => 'Reset',
        ),
        'group_accessibility_profiles' => array(
            'title' => 'Accessibility Profiles',
            'seizure_safe_mode' => array(
                'title'       => 'Seizure Safe Mode',
                'description' => 'Reduce flashing and visual effects',
            ),
            'visually_impaired_mode' => array(
                'title'       => 'Visually Impaired Mode',
                'description' => 'Improve clarity and visual contrast',
            ),
            'cognitive_learning_support' => array(
                'title'       => 'Cognitive & Learning Support',
                'description' => 'Support reading, focus, and navigation',
            ),
            'adhd_friendly_mode' => array(
                'title'       => 'ADHD Friendly Mode',
                'description' => 'Reduce distractions and improve focus',
            ),
        ),
        'group_appearance' => array(
            'title' => 'Appearance',
            'contrast_mode' => array(
                'title'       => 'Contrast Mode',
                'description' => 'Select page contrast level',
                'button'      => array(
                    'default' => 'Default',
                    'high'    => 'High',
                    'dark'    => 'Dark',
                    'light'   => 'Light',
                ),
            ),
            'monochrome' => array(
                'title'       => 'Monochrome',
                'description' => 'Apply a grayscale filter',
            ),
            'saturation_mode' => array(
                'title'       => 'Saturation Mode',
                'description' => 'Select page saturation level',
                'button'      => array(
                    'low'     => 'Low',
                    'default' => 'Default',
                    'high'    => 'High',
                ),
            ),
            'custom_color' => array(
                'title'       => 'Custom Color',
                'description' => 'Adjust colors to your preference',
                'options'     => array(
                    'background' => array('title' => 'Background', 'apply' => 'Apply', 'reset' => 'Reset'),
                    'heading'    => array('title' => 'Heading', 'apply' => 'Apply', 'reset' => 'Reset'),
                    'text'       => array('title' => 'Text', 'apply' => 'Apply', 'reset' => 'Reset'),
                ),
            ),
            'hide_images' => array(
                'title'       => 'Hide Images',
                'description' => 'Hide all images on the page',
            ),
        ),
        'group_reading' => array(
            'title' => 'Reading',
            'typography' => array(
                'title'       => 'Typography',
                'description' => 'Adjust text to your preference',
                'font_size'   => array('title' => 'Font Size', 'default' => 'Default'),
                'line_height' => array('title' => 'Line Height', 'default' => 'Default'),
                'letter_spacing' => array('title' => 'Letter Spacing', 'default' => 'Default'),
                'text_align' => array(
                    'title'  => 'Text Align',
                    'button' => array('default' => 'Default', 'left' => 'Left', 'center' => 'Center', 'right' => 'Right'),
                ),
            ),
            'reading_tools' => array(
                'title'       => 'Reading Tools',
                'description' => 'Support reading, focus, and navigation',
                'readable_font' => array('title' => 'Readable Font'),
                'reading_mask' => array('title' => 'Reading Mask'),
                'cognitive_reading' => array('title' => 'Cognitive Reading'),
                'screen_reader' => array('title' => 'Screen Reader'),
            ),
            'highlight' => array(
                'title'       => 'Highlight',
                'description' => 'Highlight important elements',
                'links'       => array('title' => 'Links'),
                'headings'    => array('title' => 'Headings'),
                'hover'       => array('title' => 'Hover'),
            ),
            'content_scaling' => array(
                'title'   => 'Content Scaling',
                'default' => 'Default',
            ),
        ),
        'group_interaction_controls' => array(
            'title' => 'Interaction & Controls',
            'stop_animation' => array(
                'title'       => 'Stop Animation',
                'description' => 'Pause animations for a more comfortable experience',
            ),
            'mute_sound' => array(
                'title'       => 'Mute Sound',
                'description' => 'Mute all audio, sounds, and embedded video players',
            ),
            'big_cursor' => array(
                'title'       => 'Big Cursor',
                'description' => 'Select which cursor you want to use',
                'button'      => array('default' => 'Default', 'black' => 'Black', 'white' => 'White'),
            ),
        ),
    );

    $saved_data = get_option( 'accessibility_widget_copywriting_' . $current_lang, array() );
    
    if ( empty( $saved_data ) && function_exists( 'pll_default_language' ) ) {
        $default_lang = pll_default_language( 'slug' );
        $saved_data   = get_option( 'accessibility_widget_copywriting_' . $default_lang, array() );
    }

    $final_config = wp_parse_args( $saved_data, $default_config );

    wp_localize_script( 'marfin-accessibility-js', 'MarfinWidgetConfig', array( 'copywriting' => $final_config ) );

    // Inline Script
    $inline_init_script = "
        (function() {
            function initOrdentAccessibilityWidget() {
                var widgetLib = window.MarfinAccessibility || window.marfinAccessibility || window.AccessibilityWidget;

                if (
                    widgetLib &&
                    typeof widgetLib.initAccessibilityWidget === 'function' &&
                    !window.ordentAccessibilityWidgetInitialized
                ) {
                    window.ordentAccessibilityWidgetInitialized = true;
                    var customConfig = typeof MarfinWidgetConfig !== 'undefined' ? MarfinWidgetConfig : {};
                    widgetLib.initAccessibilityWidget(customConfig);

                    var accessBtn = document.getElementById('accessibility-toggle');
                    if (accessBtn) {
                        accessBtn.setAttribute('aria-label', 'Buka Pengaturan Aksesibilitas Website');
                    }
                }
            }

            if ('requestIdleCallback' in window) {
                requestIdleCallback(function() { initOrdentAccessibilityWidget(); }, { timeout: 2000 });
            } else {
                window.addEventListener('load', initOrdentAccessibilityWidget);
            }
        })();
    ";

    if ( wp_script_is( 'marfin-accessibility-js', 'enqueued' ) ) {
        wp_add_inline_script(
            'marfin-accessibility-js',
            $inline_init_script,
            'after'
        );
    }
}
add_action( 'wp_enqueue_scripts', 'ordent_enqueue_accessibility_widget', 20 );