WCAG 2.4.2: صفحة معنونة

WCAG 2.4.2 يتطلب أن تحتوي كل صفحة ويب على عنوان وصفي وذو معنى يحدد موضوعها أو غرضها. يضمن هذا أن يتمكن المستخدمون — وخاصة الذين يعتمدون على قارئات الشاشة أو يديرون عدة علامات تبويب — من توجيه أنفسهم بسرعة والتنقل بكفاءة.

ماذا يعني هذا المعيار

المعيار WCAG 2.4.2 Page Titled هو معيار نجاح من المستوى A ضمن مبدأ إمكانية التشغيل (Operable). وينص على ما يلي: "تحتوي صفحات الويب على عناوين تصف الموضوع أو الغرض." عمليًا، يعني هذا أن كل مستند HTML يتم تقديمه للمستخدم يجب أن يتضمن عنصر <title> داخل قسم <head>، وأن يحتوي هذا العنصر على نص يعرّف بشكل ذي معنى محتوى الصفحة أو وظيفتها أو سياقها ضمن الموقع.

ينطبق هذا المعيار على كل صفحة ويب منفصلة — سواء كانت ملف HTML ثابتًا، أو عرضًا لتطبيق أحادي الصفحة (SPA) يتم توليده ديناميكيًا، أو صفحة في نافذة منبثقة (modal)، أو خطوة في معالج متعدد الخطوات. يجب أن يحمل كل "شاشة" مميزة يمكن للمستخدم الانتقال إليها مباشرة أو تحل محل العرض الحالي عنوانًا فريدًا ووصفيًا خاصًا بها.

تكون الصفحة مستوفية لهذا المعيار عندما يكون عنصر <title> موجودًا وغير فارغ، ويحتوي على نص يصف بشكل كافٍ موضوع الصفحة أو غرضها. لا يلزم أن يكون العنوان فريدًا على مستوى الإنترنت بأكمله، لكنه يجب أن يكون محددًا بما يكفي بحيث يتمكن المستخدم الذي يسمع أو يقرأ العنوان فقط من فهم موضوع الصفحة دون الحاجة إلى سياق إضافي.

تكون الصفحة غير مستوفية لهذا المعيار عندما يتحقق أي من الشروط التالية: يكون عنصر <title> غائبًا تمامًا من قسم <head>؛ أو يكون عنصر <title> موجودًا لكنه فارغ (لا يحتوي على نص)؛ أو يحتوي العنوان فقط على نص افتراضي عام مثل "Untitled Document" أو "New Page" أو اسم النطاق المجرد دون أي محتوى وصفي؛ أو عندما ينتقل تطبيق أحادي الصفحة إلى عرض منطقي جديد دون تحديث عنوان المستند ديناميكيًا.

لا يعرّف WCAG أي استثناءات صريحة لهذا المعيار في المستوى A. يجب أن تحتوي كل صفحة ويب — بغض النظر عن حجمها أو جمهورها أو غرضها — على عنوان وصفي. ومع ذلك، يوضح مستند الفهم (Understanding) أن العنوان لا يحتاج إلى أن يكون وسيلة التعريف الوحيدة؛ بل يجب فقط أن يكون موجودًا ووصفيًا بما يكفي ليعمل كإشارة توجيهية أساسية.

لماذا هو مهم

عنوان الصفحة هو أحد أول أجزاء المعلومات التي يواجهها المستخدم عند الوصول إلى صفحات الويب أو التنقل بينها. غيابه أو عدم كفايته يخلق عوائق لعدة مجموعات مميزة من المستخدمين.

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

مستخدمو الإعاقات الإدراكية وصعوبات التعلم يستفيدون بشكل كبير من عناوين الصفحات الواضحة والمتسقة. عندما يفتح مستخدم يعاني من صعوبات في الذاكرة عدة ألسنة أثناء جلسة بحث، يكون عنوان اللسان غالبًا هو التصنيف المرئي الوحيد لكل لسان. يتيح عنوان مثل "Account Settings — Accsible Dashboard" له تحديد اللسان الصحيح فورًا؛ بينما يجبره عنوان مثل "Page" أو عنوان فارغ على النقر على كل لسان لاكتشاف محتواه، مما يخلق عبئًا إدراكيًا واحتمالًا للارتباك.

المستخدمون ذوو الإعاقات الحركية الذين يعتمدون على برامج التحكم الصوتي (مثل Dragon NaturallySpeaking) يمكنهم استخدام عناوين الصفحات للتحقق من أنهم وصلوا إلى الوجهة المقصودة بعد إصدار أوامر التنقل. تقلل العناوين الواضحة من الحاجة إلى التصحيحات المتكررة وإعادة التنقل، مما يوفر الوقت والجهد البدني.

فكر في هذا السيناريو الملموس: مريض في مستشفى في تركيا يستخدم قارئ شاشة مساعدًا لملء نموذج حجز موعد عبر الإنترنت عبر عدة خطوات. إذا لم تقم كل خطوة بتحديث عنوان الصفحة لتعكس الخطوة الحالية — على سبيل المثال، "Step 2 of 4: Personal Information — Appointment Booking — Hospital Name" — فلن يكون لدى المريض أي طريقة سريعة لتأكيد تقدمه بعد إعادة تحميل الصفحة أو بعد الانتقال إلى نافذة متصفح أخرى. سيتعين عليه قراءة النموذج بالكامل مرة أخرى لفهم مكانه، وهو أمر مرهق بشكل خاص لشخص قد يكون مريضًا أو متوترًا بالفعل.

إضافة إلى جانب إمكانية الوصول، تحمل عناوين الصفحات قيمة كبيرة في تحسين محركات البحث (SEO). تستخدم محركات البحث عنصر <title> كالتسمية الأساسية لقوائم نتائج البحث. يحسن العنوان الوصفي الغني بالكلمات المفتاحية معدلات النقر والاكتشاف. وبالتالي تستفيد المواقع التي تطبق WCAG 2.4.2 بشكل صحيح ليس فقط مستخدميها من ذوي الإعاقة، بل أيضًا حضورها العضوي العام في نتائج البحث — مما يجعل إمكانية الوصول مكسبًا تجاريًا وتقنيًا في آن واحد.

قواعد axe-core ذات الصلة

document-title: هذه هي قاعدة axe-core الأساسية المرتبطة بالمعيار WCAG 2.4.2. تتحقق مما إذا كان مستند HTML الحالي يحتوي على عنصر <title> داخل <head> وما إذا كان هذا العنصر يحتوي على بعض محتوى نصي غير مكوّن من مسافات بيضاء فقط. تشير القاعدة إلى وجود انتهاك عندما يكون عنصر <title> مفقودًا تمامًا، أو عندما يكون موجودًا لكنه فارغ، أو عندما يحتوي فقط على محارف مسافات بيضاء. يبلغ axe-core عن هذا كخرق حرج (critical) مرتبط بالمعيار WCAG 2.4.2 مستوى A. تعمل القاعدة تلقائيًا عند تحميل الصفحة وستلتقط حالات النقص البنيوي بشكل موثوق.
لماذا يلزم أيضًا الاختبار اليدوي: يمكن للأدوات الآلية مثل axe-core تأكيد وجود عنصر <title> وأنه غير فارغ، لكنها لا تستطيع تقييم ما إذا كان العنوان ذا معنى أو وصفيًا. ستمر صفحة تحتوي على <title>aaa</title> أو <title>Untitled Document</title> في القاعدة الآلية لأن العنصر موجود وغير فارغ، ومع ذلك فهي بوضوح لا تستوفي روح المعيار WCAG 2.4.2. يلزم المراجعة البشرية لتقييم ما إذا كان العنوان يعكس بدقة موضوع الصفحة وغرضها. وبالمثل، في التطبيقات أحادية الصفحة، تلتقط الفحوصات الآلية عادةً عنوان تحميل الصفحة الأول فقط وقد تفوت الحالات التي لا يتم فيها تحديث العنوان عند تغيّر المسار على جانب العميل — تتطلب هذه الانتقالات اختبار تنقل يدوي.

كيفية الاختبار

فحص آلي باستخدام axe DevTools أو Lighthouse: افتح صفحة الويب المستهدفة في Chrome أو Firefox. افتح أدوات المطور (F12)، وانتقل إلى لوحة axe DevTools (إن كانت مثبتة) أو تبويب Lighthouse. شغّل تدقيق إمكانية الوصول. في نتائج axe، ابحث تحديدًا عن أي انتهاك لقاعدة document-title ضمن فئة "Critical" أو "Serious". سيشير Lighthouse بالمثل إلى العنوان المفقود أو الفارغ ضمن تدقيق Accessibility. دوّن عنوان URL الدقيق للصفحة ونص العنوان (أو غيابه) لتضمينه في تقريرك. كرر هذا الاختبار لكل مسار أو عرض فريد في التطبيق، بما في ذلك صفحات الأخطاء (404، 500) وصفحات التأكيد.
فحص يدوي في المتصفح: في أي متصفح، افحص تسمية لسان المتصفح — يجب أن تعرض عنوانًا ذا معنى ووصفيًا يعرّف الصفحة. انقر بزر الفأرة الأيمن على الصفحة واختر "View Page Source" أو افتح أدوات المطور وانتقل إلى لوحة Elements. حدد قسم <head> وتحقق من وجود عنصر <title> يحتوي على نص غير عام وغير افتراضي. تحقق من أن العنوان ذو صلة بالمحتوى المرئي للصفحة وأنه — في المواقع متعددة الصفحات — يختلف عن عناوين الصفحات الأخرى بطريقة تعكس الغرض الفريد للصفحة.
اختبار قارئ الشاشة باستخدام NVDA + Firefox: افتح الصفحة باستخدام Firefox وفعّل NVDA. عند تحميل الصفحة، يجب أن يعلن NVDA عن عنوان الصفحة فورًا. انتقل بعيدًا ثم عد إلى الصفحة (باستخدام Alt+Left Arrow ثم Alt+Right Arrow) وتأكد من الإعلان عن العنوان الصحيح مرة أخرى. في تطبيق أحادي الصفحة، فعّل تغيير مسار على جانب العميل واستمع إلى إعلان العنوان المحدّث. إذا لم يقرأ NVDA شيئًا أو قرأ سلسلة عامة/غير مفيدة عند تحميل الصفحة، فهذا فشل.
اختبار قارئ الشاشة باستخدام VoiceOver + Safari (macOS/iOS): فعّل VoiceOver (Command+F5 على Mac). حمّل الصفحة. يعلن VoiceOver عن عنوان الصفحة عند التحميل. استخدم Rotor (Control+Option+U) وانتقل إلى قائمة Web Spots أو العناوين — يجب أن يطابق عنوان النافذة المعروض أعلى الصفحة محتوى عنصر <title>. على iOS، يظهر العنوان في مبدّل الألسنة في Safari؛ تحقق من أنه وصفي.
اختبار قارئ الشاشة باستخدام JAWS + Chrome: افتح الصفحة في Chrome مع تشغيل JAWS. يعلن JAWS عن عنوان الصفحة عند التحميل. اضغط Insert+F1 لفتح نافذة المساعدة في JAWS وتأكد من عنوان الصفحة المعلن. استخدم Insert+T لقراءة العنوان في أي وقت أثناء الجلسة للتحقق من أنه تم تحديثه بشكل صحيح بعد أحداث التنقل في تطبيق SPA.
اختبار تغيير المسار في تطبيق أحادي الصفحة (SPA): تنقل عبر عروض مختلفة في التطبيق (على سبيل المثال، من الصفحة الرئيسية إلى صفحة منتج ثم إلى صفحة الدفع). بعد كل عملية تنقل، تحقق من تسمية لسان المتصفح واستخدم قارئ شاشة للتأكد من تحديث العنوان. إذا بقيت تسمية اللسان نفسها طوال الجلسة بغض النظر عن العرض الحالي، فهذا فشل في المعيار 2.4.2 لكل عرض لا يملك عنوانًا مميزًا.

كيفية الإصلاح

عنصر عنوان مفقود — غير صحيح

<!DOCTYPE html>
<html lang='tr'>
<head>
  <meta charset='UTF-8'>
  <meta name='viewport' content='width=device-width, initial-scale=1.0'>
  <!-- No <title> element present -->
</head>
<body>
  <h1>Ürünlerimiz</h1>
</body>
</html>

عنصر عنوان مفقود — صحيح

<!DOCTYPE html>
<html lang='tr'>
<head>
  <meta charset='UTF-8'>
  <meta name='viewport' content='width=device-width, initial-scale=1.0'>
  <!-- Title added: describes the page topic and includes the site name for context -->
  <title>Ürünlerimiz — Accsible Mağaza</title>
</head>
<body>
  <h1>Ürünlerimiz</h1>
</body>
</html>

عنوان افتراضي عام — غير صحيح

<!DOCTYPE html>
<html lang='en'>
<head>
  <meta charset='UTF-8'>
  <!-- Generic title provides no useful context to the user -->
  <title>Untitled Document</title>
</head>
<body>
  <h1>Contact Us</h1>
</body>
</html>

عنوان افتراضي عام — صحيح

<!DOCTYPE html>
<html lang='en'>
<head>
  <meta charset='UTF-8'>
  <!-- Descriptive title: page function first, then site name -->
  <title>Contact Us — Accsible Support</title>
</head>
<body>
  <h1>Contact Us</h1>
</body>
</html>

تطبيق أحادي الصفحة لا يحدّث العنوان عند تغيير المسار — غير صحيح

<!-- React Router example: title is set only once at app root and never updated -->
<!DOCTYPE html>
<html lang='en'>
<head>
  <title>My App</title>
</head>
<body>
  <div id='root'></div>
  <!-- JavaScript bundle loads React SPA; title never changes during navigation -->
</body>
</html>

تطبيق أحادي الصفحة لا يحدّث العنوان عند تغيير المسار — صحيح

<!-- Use document.title in each route component or a head-management library -->
<!-- Example using React with react-helmet-async -->

<!-- In your ProductPage component: -->
<!-- import { Helmet } from 'react-helmet-async'; -->
<!-- <Helmet><title>{product.name} — Accsible Store</title></Helmet> -->

<!-- Or using plain JavaScript on each route render: -->
<script>
  // Called whenever the SPA navigates to a new view
  function updatePageTitle(pageTitle, siteName) {
    document.title = pageTitle + ' — ' + siteName;
  }
  // Example: updatePageTitle('Shopping Cart', 'Accsible Store');
  // Results in: <title>Shopping Cart — Accsible Store</title>
</script>

نموذج متعدد الخطوات بعناوين متطابقة في كل خطوة — غير صحيح

<!-- Step 1 -->
<title>Checkout — Accsible Store</title>
<!-- Step 2 (same title — user cannot distinguish steps) -->
<title>Checkout — Accsible Store</title>
<!-- Step 3 (same title again) -->
<title>Checkout — Accsible Store</title>

نموذج متعدد الخطوات بعناوين متطابقة في كل خطوة — صحيح

<!-- Step 1: title reflects the current step's purpose -->
<title>Step 1 of 3: Shipping Address — Checkout — Accsible Store</title>
<!-- Step 2: clearly distinct and descriptive -->
<title>Step 2 of 3: Payment Details — Checkout — Accsible Store</title>
<!-- Step 3: confirmation step identified clearly -->
<title>Step 3 of 3: Order Review — Checkout — Accsible Store</title>

الأخطاء الشائعة

ترك عنوان CMS أو الإطار الافتراضي في بيئة الإنتاج: العديد من أنظمة إدارة المحتوى (WordPress، Drupal، الأطر المخصصة) تأتي بعناوين افتراضية مثل "Just another WordPress site" أو عنوان URL الخام للموقع. ينسى المطورون تهيئة قالب العنوان قبل الإطلاق، مما يترك كل صفحة بعنوان غير مفيد أو متطابق. تحقق دائمًا من إعدادات العنوان في نظام إدارة المحتوى لديك واختبر عنوان URL حيًا قبل الإصدار.
استخدام اسم الموقع وحده كعنوان لكل صفحة: تعيين <title>Accsible</title> في كل صفحة من الموقع يمر في فحص document-title الآلي (العنصر غير فارغ) لكنه لا يستوفي متطلب الوصف في المعيار WCAG 2.4.2. يجب أن يكون لكل صفحة عنوان يميزها عن الصفحات الأخرى في نفس الموقع.
وضع اسم الموقع أولاً بدلًا من محتوى الصفحة المحدد: النمط <title>Accsible — Contact</title> يجبر مستخدمي قارئات الشاشة على الاستماع إلى اسم العلامة التجارية قبل معرفة موضوع الصفحة. النمط الموصى به هو <title>Contact — Accsible</title> — موضوع الصفحة أولاً، ثم اسم الموقع — حتى يحصل المستخدمون على أكثر المعلومات صلة فورًا.
نسيان تحديث document.title في التطبيقات أحادية الصفحة بعد التنقل على جانب العميل: الأطر مثل React وVue وAngular لا تحدّث عنوان المستند تلقائيًا عند تغيّر المسار. يجب على المطورين تعيين document.title صراحة أو استخدام مكتبة لإدارة الرأس (مثل react-helmet-async أو Vue Meta) في كل مكوّن مسار. الفشل في ذلك يعني أن كل عرض في تطبيق SPA بعد التحميل الأولي يشارك نفس العنوان.
استخدام عناصر عنوان فارغة أو تحتوي على مسافات بيضاء فقط: عنصر <title> </title> الذي يحتوي فقط على مسافات أو فواصل أسطر هو عمليًا مكافئ لعنوان مفقود بالنسبة لمستخدمي تقنيات المساعدة، لكنه قد يُتجاهل في الفحص البصري لأن لسان المتصفح يظهر فارغًا بدلًا من إظهار خطأ. يشير axe-core إلى هذا، لكنه قد يتجاوز المراجعين اليدويين.
عدم تحديث العنوان في صفحات الأخطاء (404، 500، أخطاء التحقق): غالبًا ما ترث صفحات الأخطاء عنوان الصفحة السابقة أو تعود إلى عنوان عام للموقع. يحتاج مستخدم قارئ الشاشة الذي يواجه خطأ 404 إلى سماع "Page Not Found — Accsible" بدلًا من عنوان الصفحة التي كان عليها سابقًا، حتى يفهم أن عملية التنقل فشلت.
العناوين المكررة عبر صفحات مختلفة ذات محتوى مميز: عندما تحمل صفحة قائمة المنتجات وصفحة تفاصيل المنتج العنوان نفسه "Products — Accsible Store"، لا يستطيع المستخدمون ذوو الإعاقات الإدراكية أو الذين يديرون عدة ألسنة تمييز الصفحتين. يجب أن يكون لكل صفحة مميزة منطقيًا عنوان فريد يعكس محتواها المحدد.
العناوين المولدة ديناميكيًا التي تتضمن أسماء متغيرات القالب الخام: يمكن أن تؤدي أخطاء التصيير على جانب الخادم إلى عناوين مثل <title>{{page.title}} — MySite</title> عندما تفشل متغيرات القالب في التصيير. تمر هذه في فحص "غير فارغ" لكنها لا تقدم أي معلومات ذات معنى. نفّذ فحوصات آلية لمحتوى العنوان في خط أنابيب CI/CD لالتقاط أخطاء تصيير القوالب قبل النشر.
العناوين الطويلة جدًا أو المحشوة بالكلمات المفتاحية: رغم أن WCAG لا يحدد حدًا لعدد المحارف، فإن العناوين الطويلة جدًا (أكثر من 60–70 محرفًا) تُقتطع في ألسنة المتصفح ونتائج البحث، ويجب على قارئات الشاشة قراءة السلسلة كاملة قبل إعلان الجزء الأكثر صلة. اجعل العناوين موجزة ومحددة ومقدمة بأهم المعلومات.
إغفال العناوين من مستندات iframe: الإطارات المضمّنة (<iframe>) التي تحمّل مستند HTML كاملًا يجب أن تحتوي أيضًا على عنصر <title> ذي معنى. بينما يجب أن يحتوي عنصر iframe نفسه على خاصية title تصف غرض الإطار، يستفيد المستند المحمّل داخله أيضًا من وجود <title> في قسم <head> الخاص به لصالح تقنيات المساعدة التي تتنقل داخل محتوى الإطار.

العلاقة مع لوائح إمكانية الوصول في تركيا

تضع المذكرة الرئاسية التركية 2025/10، المنشورة في الجريدة الرسمية رقم 32933 بتاريخ 21 يونيو 2025، متطلبات إلزامية لإمكانية الوصول لمجموعة واسعة من الخدمات الرقمية في القطاعين العام والخاص. المعيار WCAG 2.4.2 Page Titled هو معيار نجاح من المستوى A، والامتثال للمستوى A هو الحد الأدنى الإلزامي بموجب هذه المذكرة. يُطلب من الجهات المشمولة تحقيق امتثال مستوى A خلال عام واحد إذا كانت مؤسسات عامة، وخلال عامين للمنظمات في القطاع الخاص.

تغطي المذكرة مجموعة واسعة من أنواع الكيانات، مما يجعل المعيار WCAG 2.4.2 ذا صلة بجزء كبير من الاقتصاد الرقمي في تركيا. تشمل الكيانات المشمولة جميع المؤسسات والهيئات الحكومية، ومنصات التجارة الإلكترونية، والبنوك والمؤسسات المالية، والمستشفيات ومقدمي الرعاية الصحية، وشركات الاتصالات التي لديها 200,000 مشترك أو أكثر، ووكالات السفر المرخصة، وشركات النقل الخاصة، والمدارس الخاصة المرخصة من قبل وزارة التربية الوطنية (MoNE).

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

يعد التطبيق الصحيح للمعيار WCAG 2.4.2 أحد إصلاحات إمكانية الوصول الأقل جهدًا والأعلى تأثيرًا المتاحة، إذ يتطلب عادةً تغييرًا على مستوى القالب فقط لضمان أن تحتوي كل صفحة على عنصر <title> مُحكم التكوين ووصفي. بالنسبة للمنظمات الخاضعة للمذكرة 2025/10، يجب أن يكون التعامل مع عناوين الصفحات من أول البنود التي تُحل في أي خارطة طريق لمعالجة مشكلات إمكانية الوصول — فهو سهل التنفيذ، ويسهل التحقق منه، ويمكن اختباره مباشرة بواسطة قاعدة axe-core document-title، مما يجعله بسيطًا لإثبات الامتثال أمام المدققين أو السلطات التنظيمية.

يجب على المنظمات التي تخدم جمهورًا ناطقًا باللغة التركية أن تضمن أيضًا أن تُقدَّم عناوين الصفحات باللغة الصحيحة المطابقة لمحتوى الصفحة، مكملةً لمتطلب خاصية lang (المعيار WCAG 3.1.1)، حتى تفسر قارئات الشاشة في بيئات المستخدمين الناطقين بالتركية العنوان المُعلن عند تحميل الصفحة وتنطقه بشكل صحيح.