روح للمحتوى على طول

HTML / JavaScript عادي

script tag واحد واستدعاء واحد، من غير أي build step. أو اعمله import من npm في أي bundler.

في الصفحة دي
الـ packageopen-accessibility-widget(بيفتح في tab جديدة)

التسطيب

<script src="https://cdn.jsdelivr.net/npm/open-accessibility-widget@1.4.1/dist/open-accessibility-widget.global.js"
        integrity="sha384-dO9rT4vwimvvXQt0APugeYB/UVAs+WxY4DskABQA/kETXVreihc0vfYY0S0lSW9G" crossorigin="anonymous"></script>

الاستخدام

<script src="https://cdn.jsdelivr.net/npm/open-accessibility-widget@1.4.1/dist/open-accessibility-widget.global.js"
        integrity="sha384-dO9rT4vwimvvXQt0APugeYB/UVAs+WxY4DskABQA/kETXVreihc0vfYY0S0lSW9G" crossorigin="anonymous"></script>
<script>
  A11yWidget.init({
    position: "right",
    theme: { primary: "#0f766e", onPrimary: "#ffffff" },
    statementUrl: "/accessibility",
  });
</script>

ملاحظات

  • نسخة الـ script tag بتعرض كل الـ exports على window.A11yWidget، زي مثلًا A11yWidget.getAccessibilityWidget()?.open().
  • لو ناديت init() تاني، هيبدّل الـ widget الموجود.
  • الصفحات اللي بتبدّل الـ body (زي Hotwire Turbo و hx-boost في htmx) مدعومة: الـ widget بيرجع يركّب نفسه ويطبّق إعدادات الزائر تاني.

الـ accessibility statement

مرّر statementUrl عشان تحط لينك للـ accessibility statement بتاعك في الـ footer بتاع اللوحة.

عدّل الصفحة دي على GitHub