أبريل 2026 الملخص الشهري الأساسي | مدونة | web.dev

تاريخ النشر: 27 مايو 2026

مرحبًا بك في الملخص الشهري الأساسي. في أبريل 2026، أصبحت بعض إمكانيات CSS وأدوات مساعدة للرياضيات الدقيقة متاحة حديثًا، في حين أصبحت العناصر الدلالية الهيكلية وإضافات Web API الأخرى متاحة على نطاق واسع، جنبًا إلى جنب مع الأحداث في مجتمع المطورين.

خط الأساس وإمكانية الوصول في عام 2026

البناء للويب يعني بناء تجربة يمكن للجميع استخدامها، وتوضح مقالة حديثة من A11y Up أن مراعاة احتياجات إمكانية الوصول تكون أكثر فعالية عندما يعتمد المطورون على معايير الويب. لبعض الوقت، قام المهندسون بشحن حلول JavaScript مخصصة وثقيلة في كثير من الأحيان لإعادة إنشاء أنماط يمكن الوصول إليها والتي أصبحت الآن جزءًا من النظام الأساسي للويب. تكون هذه الحلول المخصصة هشة في بعض الأحيان، وعرضة للانهيار بسبب التكنولوجيا المساعدة، ويصعب صيانتها.

تسلط المقالة الضوء على أنه نظرًا لأن ميزات النظام الأساسي للويب تحقق إمكانية التشغيل التفاعلي عبر المستعرضات، فإنها تجعل التطوير مع وضع إمكانية الوصول في الاعتبار مهمة أكثر فعالية. يؤدي استخدام ميزات الويب لتحقيق الأهداف المشتركة وأنماط واجهة المستخدم إلى التعامل مع الكثير من المهام الثقيلة، مما يعرض الدلالات الصحيحة بسلاسة مباشرةً لقارئات الشاشة وأدوات التنقل باستخدام لوحة المفاتيح. يعمل خط الأساس كدليل هنا، حيث يشير إلى اللحظة التي تصبح فيها ميزة الويب ناضجة بدرجة كافية لتقييمها واستخدامها في مشاريعك.

الميزات الأساسية المتوفرة حديثًا

يتم دعم الميزات الموجودة في هذا القسم اعتبارًا من أبريل 2026 في مجموعة المستعرضات الأساسية وهي الآن متوفرة حديثًا.

CSS contrast-color() وظيفة

لقد أجبرت محركات السمات الديناميكية والمكونات القابلة للتخصيص المطورين على الحفاظ على أنظمة ألوان متعددة لاستيعاب تفضيلات المستخدم للتباين العالي. سي اس اس contrast-color() تعمل الوظيفة على تحويل عبء الصيانة بالكامل إلى المتصفح. من خلال تمرير لون إدخال أساسي إلى الوظيفة، يقوم المحرك بتقييم وإرجاع لون مصاحب عالي التباين، وعادةً ما يتم تعيينه إما باللون الأسود أو الأبيض اعتمادًا على اللون الذي يوفر أعلى درجة من سهولة القراءة.

.card-header {
  background-color: var(--dynamic-bg-color);
  /* Automatically resolves to the highest-contrast text color */
  color: contrast-color(var(--dynamic-bg-color));
}

ويتيح لك ذلك تلبية معايير سهولة القراءة، دون الحاجة إلى حل مخصص أو CSS يصعب صيانته. على الرغم من أنه لا يزال يتعين عليك مراقبة اختيارات الألوان ذات الألوان المتوسطة، فإن هذه الوظيفة تقلل من معيار CSS المطلوب للتعامل مع تسهيلات المستخدم هذه. يمكنك معرفة المزيد على الصفحة المرجعية لـ MDN لـ contrast-color().

Math.sumPrecise()

جمع تسلسلات الأرقام باستخدام الحلقات القياسية أو طرق مثل Array.prototype.reduce() يمكن أن يؤدي إلى فقدان دقة الفاصلة العائمة. يمكن أن يؤثر هذا على الحسابات المالية المهمة أو إجماليات القياس عن بعد.

ال Math.sumPrecise() الأسلوب يعالج هذه المشكلة. فهو يقبل عددًا قابلاً للتكرار من الأرقام وينفذ روتينًا آمنًا ودقيقًا لتوفير مجموع دقيق. ألق نظرة على الآليات الموجودة في وثائق MDN لـ Math.sumPrecise().

الميزات الأساسية المتاحة على نطاق واسع

أصبحت الميزات التالية متاحة على نطاق واسع، مما يعني أنها أصبحت الآن متوافقة على نطاق واسع وقابلة للاستخدام في مشاريعك.

<search> عنصر

HTML <search> يعمل العنصر بمثابة غلاف صريح لعناصر التحكم في النموذج وآليات التصفية وأدوات التقديم المساعدة التي تمثل بشكل جماعي تجربة بحث في تطبيق الويب.

<search>
  <form action="/site-search">
    <label for="query">Search documentation</label>
    <input type="search" id="query" name="q">
    <button>Go</button>
  </form>
</search>

عن طريق تبديل عنصر يحتوي على <search> العلامة، فإنك توفر ميزة إمكانية الوصول للمستخدمين. يقوم المتصفح تلقائيًا بتعيين دور معلم ضمني لـ ARIA search إلى العنصر، وإزالة الحاجة إلى تحديد role="search" على <form> عنصر. يتيح ذلك لقارئات الشاشة التعرف على المستخدمين ومساعدتهم في التنقل إلى واجهات البحث. اقرأ تفاصيل التنفيذ على صفحة MDN لـ <search> عنصر.

الوصول إلى المفتاح العام لمصادقة الويب

أصبح الآن الاستغناء عن كلمة المرور باستخدام واجهة برمجة تطبيقات مصادقة الويب (WebAuthn) أقل تعقيدًا بفضل الدعم الواسع النطاق لمستخرجي الملكية المباشرة على AuthenticatorAttestationResponse واجهة. مع أساليب مثل getPublicKey() و getPublicKeyAlgorithm()، يقوم المتصفح باستخراج تفاصيل المفتاح العام لك دون الحاجة إلى العمل مع البيانات الثنائية الأولية. تعرف على المزيد حول هذه الخصائص وكيفية استخدامها على صفحة MDN لـ AuthenticatorAttestationResponse.

String.prototype.isWellFormed() و String.prototype.toWellFormed()

سلاسل JavaScript مشفرة بـ UTF-16، والتي تعين الأحرف المعقدة والرموز التعبيرية في أزواج Unicode. إذا تم قطع سلسلة دون مراعاة ذلك، فستظل الأنصاف المعزولة من الزوج البديل – المعروف باسم البديل الوحيد – مما يؤدي إلى نص مشوه.

isWellFormed() يتيح للمطورين التحقق مما إذا كانت السلسلة تحتوي على بدائل وحيدة وإرجاع قيمة منطقية. إذا فشلت سلسلة في التحقق من الصحة، يمكنك الاتصال toWellFormed() لاستبدال البدائل المارقة بحرف استبدال Unicode القياسي (U+FFFD). وهذا مفيد قبل استدعاء وظائف مثل encodeURI()، والتي سوف رمي URIError عند مواجهة مدخلات مشوهة. تعرف على كيفية عمل هذه الطرق في وثائق MDN لـ String.prototype.isWellFormed().

انعكاس سمة ARIA

يتطلب تحديث حالات إمكانية الوصول على العناصر التفاعلية رحلات ذهابًا وإيابًا من خلال أساليب سمات DOM القياسية، على سبيل المثال، element.setAttribute('aria-expanded', 'true'). يعمل انعكاس سمة ARIA على تبسيط ذلك من خلال عكس خصائص إمكانية الوصول كخصائص الكائن.

ال Element تعكس الواجهة سمات ARIA مباشرة إلى خصائص المثيل مثل element.ariaExpanded, element.ariaChecked، و element.ariaHidden. يتيح لك هذا تعديل حالات إمكانية الوصول باستخدام صيغة التدوين النقطي:

// Clean and readable state updates
toggleButton.ariaExpanded = toggleButton.ariaExpanded === "true" ? "false" : "true";

إن التعامل مع أهداف ARIA كخصائص JavaScript يتيح لأطر واجهة المستخدم وأدوات إدارة الحالة تنسيق السياقات المساعدة بشكل أكثر موثوقية، ويساعد في الحفاظ على توافق سياقات قارئ الشاشة مع حالة التطبيق الفعلية. للحصول على قائمة كاملة بالخصائص المنعكسة، راجع دليل MDN على Element خصائص المثيل.

هذا هو التفاف

أخبرنا إذا فاتنا أي شيء متعلق بخط الأساس، وسنتأكد من التقاطه في إصدار مستقبلي! إذا كانت لديك أية أسئلة أو كنت ترغب في تقديم تعليقات بشأن Baseline، فيمكنك تقديم مشكلة في أداة تعقب المشكلات لدينا.