انتقل إلى المحتوى
Mera News

دليل الناشر، الفصل 6

بيانات لقارئات الشاشة والآلات

آخر مراجعة نوفمبر 2026

يعتمد قارئ الشاشة ومحرك البحث وقارئ الخلاصات كلهم على طريقة بناء موقعك. وHTML الواضح والبيانات المنظمة والخلاصة النظيفة تمنح كلًّا منها ما يحتاج إليه.

ابدأ بـ HTML

تمنح هذه العناصر الصفحة معالمها، ليتمكن مستخدم قارئ الشاشة من القفز مباشرة إلى المقال.

<html lang="en">
<body>
  <a href="#main">Skip to the article</a>
  <header>
    <nav aria-label="Main">...</nav>
  </header>
  <main id="main">
    <article>
      <h1>Article headline</h1>
      <p>By <a href="/authors/jane-doe">Jane Doe</a></p>
      <p><time datetime="2026-11-05T08:00:00+01:00">Published 5 November 2026</time></p>
      <h2>First section</h2>
      <p>Article text.</p>
    </article>
    <aside aria-label="Related articles">...</aside>
  </main>
  <footer>...</footer>
</body>
</html>
  • المعالم: استخدم header وnav وmain وaside وfooter كما وُضعت له. وحين تضم الصفحة أكثر من nav واحد، ضع تسمية على كل منها.
  • رابط التخطي: يتيح لمستخدمي لوحة المفاتيح تجاوز التنقل المتكرر، مما يساعد في استيفاء معيار النجاح 2.4.1 في WCAG. اجعله ظاهرًا عند التركيز.
  • العناوين: استخدم h1 واحدًا للعنوان الرئيسي، وأبقِ المستويات متسلسلة. فـ h4 بعد h2 مباشرة مثال على القفز الذي يجب تجنبه. اختر العنوان بحسب موضعه في المخطط، لا بحسب حجمه أبدًا.
  • القوائم والجداول: استخدم عناصر ul وol وtable الحقيقية، كي تستطيع البرمجيات قراءة بنيتها (معيار النجاح 1.3.1).

اللغة

اضبط lang على عنصر html في كل لغة (معيار النجاح 3.1.1). ودونه قد يقرأ قارئ الشاشة مقالك بصوت خاطئ. ضع علامة أيضًا على المقاطع المكتوبة بلغة أخرى (معيار النجاح 3.1.2).

<p>The minister called it <span lang="fr">une erreur historique</span>.</p>

الصور

  • اكتب نص alt يعطي القارئ ما تضيفه الصورة إلى القصة.
  • استخدم alt="" للصور الزخرفية البحتة. ولا تحذف السمة، لأن بعض قارئات الشاشة ستقرأ اسم الملف بصوت عالٍ.
  • استخدم خلفيات CSS للزخرفة البحتة حيثما أمكن.
  • استخدم figure وfigcaption لتعليقات الصور ونسبتها.

على كل شاشة

أهم متطلبات WCAG 2.2 AA لقالب الأخبار:

المتطلبالهدفالمعيار
تباين النص4.5:1، أو 3:1 للنص الكبير1.4.3
تغيير حجم النصحتى 200% دون فقدان أي شيء1.4.4
إعادة التدفقعرض 320 بكسل CSS دون تمرير جانبي1.4.10
التركيز ظاهرمؤشر تركيز ظاهر للوحة المفاتيح2.4.7
التركيز غير محجوبلا يختفي التركيز بالكامل أبدًا2.4.11
حجم الهدف24 في 24 بكسل CSS على الأقل2.5.8

على الهاتف، اختبر بـ VoiceOver أو TalkBack، ومع أكبر إعداد لحجم النص. وعلى سطح المكتب، تجوّل في الصفحة بمفاتيح Tab وEnter وEscape فقط.

انشر بيان إمكانية وصول يذكر ما تستوفيه وما لا تستوفيه بعد وكيف يُبلَّغ عن مشكلة.

قانون إمكانية الوصول الأوروبي

تنطبق التوجيهة (EU) 2019/882 على الخدمات المدرجة المقدَّمة إلى المستهلكين بعد 28 يونيو 2025. وتشمل القائمة خدمات التجارة الإلكترونية والكتب الإلكترونية والخدمات التي توفر الوصول إلى الوسائط السمعية والبصرية. وتُعرَّف خدمات التجارة الإلكترونية بأنها خدمات تُقدَّم عن بُعد، عبر المواقع الإلكترونية والخدمات القائمة على الأجهزة المحمولة، بناءً على طلب المستهلك لإبرام عقد. وتُستثنى المنشآت المتناهية الصغر التي تقدم خدمات.

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

البيانات المنظمة للمقالات

يساعد وسم NewsArticle Google على فهم الصفحة. ويقول دليل Google إنه لا توجد خصائص مطلوبة، فأضف ما ينطبق منها.

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "NewsArticle",
  "headline": "Article headline",
  "image": [
    "https://example.com/photos/1x1/photo.jpg",
    "https://example.com/photos/4x3/photo.jpg",
    "https://example.com/photos/16x9/photo.jpg"
  ],
  "datePublished": "2026-11-05T08:00:00+01:00",
  "dateModified": "2026-11-05T09:20:00+01:00",
  "author": [{
    "@type": "Person",
    "name": "Jane Doe",
    "url": "https://example.com/authors/jane-doe"
  }]
}
</script>
  • استخدم تواريخ ISO 8601 مع المنطقة الزمنية.
  • أبقِ التواريخ في الوسم مطابقة للتواريخ في الصفحة، واعرضها بتسمية مثل «نُشر» أو «آخر تحديث».
  • وفّر الصور بنسب 16x9 و4x3 و1x1، وكل منها لا يقل عن 50,000 بكسل عند ضرب العرض في الارتفاع.
  • استخدم صورًا تحريرية، وليس شعارك أبدًا.
  • أبقِ الوسم نفسه على الهاتف وسطح المكتب.

خلاصة RSS نظيفة

خلاصتك هي أبسط نسخة من موقعك مقروءة آليًا، وأنت من يقرر ما تحمله بالضبط.

<item>
  <title>Article headline</title>
  <link>https://example.com/news/article-headline</link>
  <guid isPermaLink="true">https://example.com/news/article-headline</guid>
  <pubDate>Thu, 05 Nov 2026 07:00:00 GMT</pubDate>
  <description>One or two sentences that describe the article.</description>
  <category>Politics</category>
</item>
  • تحتاج كل قناة إلى title وlink وdescription.
  • امنح كل عنصر guid ثابتًا، واستخدم الرابط الدائم حيثما أمكن.
  • اكتب pubDate بصيغة RFC 822 المعروضة هنا.
  • استخدم عناوين URL المعتمدة للمقالات.
  • أبقِ description قصيرًا، واترك النص المدفوع خارجه.
  • أضف رابط اكتشاف في head كل صفحة.
<link rel="alternate" type="application/rss+xml" title="Latest news" href="https://example.com/feed.xml">

أرسل ترويسات ETag أو Last-Modified، وأجب بـ 304 Not Modified حين يُظهر If-None-Match أو If-Modified-Since من قارئ الخلاصات أن شيئًا لم يتغير. وهذا يبقي عمليات الجلب المتكررة رخيصة على خادمك.

قائمة التحقق

  • أضف lang إلى عنصر html في كل لغة.
  • أضف رابط تخطٍّ ومعلم main واحدًا إلى كل قالب.
  • ضع تسمية على كل nav وaside.
  • أجرِ فحصًا لمخطط العناوين في قالب مقالك.
  • دقّق نص alt في نظام إدارة المحتوى لديك، واجعله حقلًا إلزاميًا للصور التحريرية.
  • افحص التباين في الروابط والتعليقات وأسطر الكاتب.
  • اختبر بلوحة المفاتيح، وبـ VoiceOver أو TalkBack.
  • انشر بيان إمكانية وصول مع عنوان للتواصل.
  • اسأل مستشارك القانوني هل ينطبق قانون إمكانية الوصول الأوروبي على خدماتك.
  • أضف JSON-LD من نوع NewsArticle بتواريخ تطابق الصفحة.
  • تحقق من صحة خلاصتك، وتأكد أنها ترسل ETag أو Last-Modified.

المصادر