روح للمحتوى على طول
v1.4.1 · MIT

خلّي كل زائر يظبط موقعك على حسب احتياجاته

قائمة تفضيلات accessibility مجانية لأي موقع: حجم النص، والتباين، والمسافات، وأدوات القراءة، والحركة، بالعربي والإنجليزي. من غير dependencies ولا tracking، وحجمها حوالي 24 KB بس.

ابدأ دلوقتيGitHub(بيفتح في tab جديدة)
npm install open-accessibility-widget

أو دوس Alt + A في أي صفحة في الموقع ده.

بيشتغل مع

  • 0 dependencies

    مش محتاج تسطّب أي حاجة تانية، والـ types بتاعة TypeScript موجودة

  • ~23 KB

    الـ widget كله، gzipped، في script واحد

  • axe-core

    كل إصدار بيتختبر بـ axe-core وبـ scripts بالكيبورد بس

  • EN · AR

    الإنجليزي والعربي موجودين جوّاه، وجاهز للـ RTL

الـ Playground

غيّر الـ widget في الصفحة دي

كل control تحت بيغيّر الـ widget الحقيقي اللي في ركن الصفحة دي. افتحه عشان تشوف النتيجة، وانسخ الكود اللي يطابقها.

المكان

لون البراند

أيقونة زرار الفتح بتبقى سودا أو بيضا، على حسب أنهي واحد تباينه أعلى.

#0f766e
56px
لغة الـ widget

التغييرات دي بتفضل لحد ما تسيب الصفحة. أما تعديلاتك إنت جوه الـ widget، زي حجم النص أو التباين، فدي حاجة منفصلة: الـ widget بيحفظها في المتصفح ده.

TypeScript
import { init } from "open-accessibility-widget";

init({
  position: "left",
  theme: { primary: "#0f766e", onPrimary: "#ffffff" },
  buttonSize: 56,
});

المميزات

كل اللي الزوار مستنيينه من قائمة accessibility

وكل اللي إنت محتاجه عشان تنزّله على موقعك: البراند بتاعك، ولغاتك، و CSP صارمة، ومن غير أي tracking.

  • هو نفسه accessible

    اللوحة dialog ماشية على WAI-ARIA وفيها focus trap، والصفحة اللي وراها بتبقى inert. الـ switches والـ radio groups والأقسام بتشتغل بالكيبورد ومع الـ screen readers، وفي Windows High Contrast ومع الـ reduced motion.

    • WAI-ARIA
    • axe-core
    • forced-colors
    • prefers-reduced-motion

  • البراند بتاعك واللوجو بتاعك

    حدّد theme.primary وزرار الفتح والـ header والـ active states هيمشوا وراه. غيّر الألوان والـ radius والخط ولوجو زرار الفتح، من JavaScript أو بـ CSS variables.

    • theme.primary
    • --a11yw-primary
    • icon
    • logo

  • 23 تعديل و7 profiles

    حجم النص، والمسافات، والتباين، والتشبع، وخط القراءة، ونافذة التركيز، ووضع القراءة، وإيقاف الحركة وحاجات تانية، وكمان profiles سريعة بتشغّل كذا تعديل مرة واحدة.

  • العربي والـ RTL

    الإنجليزي والعربي موجودين جوّاه، وتقدر تضيف لغاتك. اللوحة بتتقلب من اليمين للشمال وبتبدأ بلغة الصفحة.

  • أي موقع

    HTML عادي، و WordPress، و React، و Next.js، و Vue، و Angular، و Svelte، و Astro. آمن مع الـ server rendering، وبيرجع يركّب نفسه لما الصفحة تبدّل الـ body بتاعها.

  • صغير ومن غير dependencies

    حوالي 23 KB gzipped. التعديلات عبارة عن classes و CSS variables على html، وdestroy() بيشيلها كلها.

  • CSP صارمة و Trusted Types

    مفيش eval، ولا innerHTML، ولا inline scripts. مرّر nonce للـ style tags بتاعته، وهيشتغل تحت Content Security Policy صارمة.

  • الخصوصية من الأساس

    مفيش network requests، ولا cookies، ولا analytics. التفضيلات بتفضل في متصفح الزائر، وpersist: false مش بيحفظ أي حاجة خالص.

صريح من الأساس

قائمة تفضيلات، مش أداة compliance

الـ accessibility overlays كتير بتتباع على إنها حل للقضايا. الـ widget ده مش كده، ومش بيدّعي إنه كده.

هو إيه

  • قائمة بتخلّي كل زائر يغيّر حجم النص والمسافات والألوان والحركة وأدوات القراءة في صفحاتك.
  • script صغير و open source، بيشتغل في المتصفح بس وبيحفظ التفضيلات هناك بس.
  • هو نفسه accessible: بيتختبر بـ axe-core وبـ scripts بالكيبورد بس في كل إصدار.
  • ميزة إضافية تقدّمها فوق موقع هو أصلًا accessible.

هو مش إيه

  • مش بيخلّي الموقع متوافق مع ADA أو EAA أو EN 301 549 أو WCAG.
  • مش بيعمل scan للـ markup بتاعك، ولا بيصلّحه، ولا بيعيد كتابته: الـ alt text والـ labels والتباين اللي ناقصين لسه لازم يتصلّحوا من المصدر.
  • مش دفاع قانوني، وماينفعش يتعمله إعلان على إنه كده.
  • مش بيغني عن الاختبار مع مستخدمين حقيقيين و assistive technology.

اقرا حدود الـ widget

الـ frameworks

بيشتغل مع الـ stack بتاعك

package صغيرة واحدة لكل framework و CMS وصفحة HTML عادية. اختار بتاعك عشان تشوف كود الـ setup.

كل الـ frameworks

ضيفه لموقعك في خمس دقايق

package واحدة واستدعاء واحد. مجاني و open source تحت رخصة MIT: من غير license key، ومن غير tracking، ومن غير أي خدمة cloud.

ابدأ دلوقتيادّينا نجمة على GitHub(بيفتح في tab جديدة)شوفه على npm(بيفتح في tab جديدة)