المدونة

حركات التمرير: animation-timeline بدلاً من IntersectionObserver

هناك سبب يجعل التأثير المنظوري بـJavaScript يبدو دائماً غير صحيح قليلاً — منفصلاً بعض الشيء، كأن الطبقات تسبح نصف إطار خلف الصفحة. هذا ليس كوداً رديئاً. السبب هو أن أحداث التمرير تصل إلى JavaScript بعد أن يكون المتصفح قد رسم التمرير بالفعل. حلّ المتصفح هذا مرة واحدة، حين حوّل الترويسات اللاصقة إلى position: sticky. Scroll-driven animations هي نفس الخطوة، مطبّقة على جميع التأثيرات المرتبطة بالتمرير دفعة واحدة.

Popover API وعنصر <dialog> الأصلي: نهاية المودالات المبنية يدويًا من الصفر

في مقال إتاحة الوصول، كان المودال الذي يُخفى بـ display: none لكنه يبقى موجودًا في شجرة إتاحة الوصول مثالًا على خطأ ناتج عن بناء مودال من الصفر باستخدام عناصر div. السؤال الحقيقي هو: لماذا كان من الأساس يجب بناؤه من الصفر؟ أستعرض ما يقدمه عنصر <dialog> الأصلي وسمة popover مجانًا – الطبقة العليا (top layer)، وفخ التركيز (focus trap)، والإغلاق التلقائي عند النقر خارج العنصر (light dismiss) – وأين تختلف هاتان الآليتان بما يكفي لجعل الخلط بينهما طريقًا مباشرًا نحو واجهة غير قابلة للوصول.

إنشاء مكونات متاحة لقارئات الشاشة

HTML الصحيح ليس سوى نقطة البداية. اكتشف كيف تعمل شجرة إتاحة الوصول فعليًا، ولماذا تضر ARIA أكثر مما تنفع في أحيان كثيرة، وابنِ معي أكورديون حقيقيًا، ومنطقة حية (live region)، وإدارة تركيز في Next.js.