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

حدود الـ widget

اللي الـ widget مايقدرش يعمله، عشان ماتوعدش بيه.

في الصفحة دي

اقرا ده قبل ما توصف الـ widget في موقعك أو في الـ accessibility statement بتاعك.

مش بيصلّح موقعك

الـ widget بيغيّر طريقة عرض الصفحة لزائر واحد. مش بيخلّي الموقع متوافق مع ADA أو EAA أو EN 301 549 أو WCAG، وتسطيبه مش دفاع قانوني. والجهات الرقابية بتاخد إجراءات ضد المنتجات اللي بتدّعي غير كده، زي قرار لجنة التجارة الفيدرالية الأمريكية (FTC) سنة 2025 ضد accessiBe.

  • الـ alt text الناقص، والـ labels بتاعة الفورمز، والعناوين، ودعم الكيبورد، والتباين في التصميم بتاعك، كل ده لسه محتاج يتصلّح من المصدر.
  • ماتعملش إعلان للـ widget على إنه حل للـ compliance، وماتقدّمهوش كده في الـ accessibility statement بتاعك.

الحاجات اللي مايوصلهاش

فيه أجزاء من الصفحة برّه نطاق الـ widget.

  • عناصر iframe اللي من origin تاني (الفيديو الـ embedded، والخرايط، وفورمز الدفع) والـ closed shadow roots: المتصفحات بتمنع أي script إنه يدخلها. أما الـ iframes اللي من نفس الـ origin والـ Shadow DOM المفتوح فالتعديلات بتوصلهم.
  • «إيقاف الحركة» بيوقف الـ CSS animations والأنيميشن المعمول بالـ scripts وأنيميشن الـ SVG؛ أما صور الـ GIF والـ canvas والأنيميشن اللي الـ scripts بترسمها frame بـ frame فبتفضل شغالة.
  • زرار الفتح بيتنحّى على جنب لما الـ focus بالكيبورد يوصل لعنصر تحته (WCAG 2.4.11)، بس بيفضل مغطّي الركن بتاعه لمستخدمي الماوس واللمس: سيب الركن ده فاضي، أو حرّكه بـ offset.

التعديلات بتظهر إزاي

بعض التعديلات بتختار الأمان على حساب الدقة.

  • «تكبير الصفحة» بيستخدم الـ zoom بتاع CSS، ودي مش بتشغّل الـ media queries بتاعة موقعك. الـ zoom بتاع المتصفح بيعيد ترتيب الصفحة (reflow) أحسن: اقترحه في الـ accessibility statement بتاعك.
  • «تباعد الأسطر» بيظبط ارتفاع السطر على 1.5 ضعف النسبة اللي اخترتها لكل النصوص.
  • المسافة بين الحروف مش بتتطبق على العربي وغيره من الكتابات المتصلة (لأنها هتفصل الحروف عن بعض)؛ لكن المسافة بين الكلمات بتتطبق عادي.
  • أوضاع الألوان بتغطي على الخلفيات وبتشيل صور الخلفية، إلا في عناصر الفورمز واللينكات والأزرار. والأيقونات الديكور المرسومة كـ background images في أي مكان تاني بتختفي.
  • حجم النص بيقيس حجم كل عنصر مرة واحدة. لو الـ app بتاعك غيّر حجم خط عنصر بعد كده عن طريق تغيير الـ class، هيفضل على حجمه القديم لحد ما الصفحة تعمل reload.
  • تعديلات الألوان بتتطبق على الشاشة بس، مش على الطباعة.

دعم المتصفحات

Chrome و Edge 120+، و Firefox 126+، و Safari 16.4+ (على الديسكتوب والموبايل) بياخدوا كل المميزات؛ والإصدارات الأقدم بتخسر مميزات معينة، زي تكبير الصفحة. الـ CI بيشغّل الـ end-to-end tests على Chrome بس؛ ودعم Firefox و Safari معتمد على دعم المميزات (feature support) والاختبار اليدوي.

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