في هذا الدرس 7تصفّح المواضيع
تمثل إتاحة محتوى الويب، والمشار إليها بالاختصار الشهير a11y، الممارسة الهندسية الأصيلة لبناء مواقع وتطبيقات رقمية قابلة للاستخدام الكامل من قِبل جميع الأشخاص، بما في ذلك ذوو الإعاقات البصرية والسمعية والحركية والإدراكية. وتضمن الإتاحة الرقمية قدرة كل إنسان على إدراك وفهم وتصفح والتفاعل مع شبكة الويب دون أي عوائق تقنية.
HTML
<!-- ACCESSIBLE: Semantic button with accessible text -->
<button type="button" class="btn">
Save Document
</button>
<!-- ANTI-PATTERN: Inaccessible clickable div -->
<!-- <div onclick="save(doc)">Save Document</div> -->تعتبر إرشادات إتاحة محتوى الويب WCAG الصادرة عن منظمة W3C المعيار العالمي الذهبي للنفاذ الرقمي. وترتكز هذه المعايير على أربعة مبادئ جوهرية: أن يكون المحتوى قابلاً للإدراك Perceivable، وقابلاً للتشغيل Operable، وقابلاً للفهم Understandable، ومتيناً Robust. ويبدأ تحقيق هذه المبادئ بكتابة كود HTML نظيف ودلالي كأولوية قصوى.
تقدم مواصفة WAI-ARIA حزمة من الخصائص المتخصصة المصممة لدعم دلالات لغة HTML عندما تعجز الوسوم الأصيلة بمفردها عن التعبير عن الحالات الديناميكية المعقدة. وتعمل كجسر رقمي يربط مكونات الواجهة التفاعلية بشجرة إتاحة المتصفح لترجمتها بدقة لقارئات الشاشة.
يوضح الجدول المرجعي التالي أهم خصائص ARIA الأساسية ودورها الهندسي في تعزيز إتاحة عناصر الواجهة لقارئات الشاشة:
| خاصية ARIA | مثال الصيغة | نوع القيمة | الدور الهندسي الأساسي |
|---|---|---|---|
aria-label | aria-label="إغلاق النافذة" | نص وصفي مباشر | منح اسم مقروء للأزرار الأيقونية التي تخلو من نص مرئي |
aria-labelledby | aria-labelledby="title-id" | معرّف عنصر (ID) | ربط اسم القسم أو النافذة بعنوان مرئي موجود مسبقاً بالصفحة |
aria-describedby | aria-describedby="hint-id" | معرّف عنصر (ID) | إرفاق سطر إرشادي أو رسالة خطأ تفصيلية بحقل الإدخال |
aria-hidden | aria-hidden="true" | true أو false | إخفاء الزخارف والأيقونات التجميلية عن شجرة قارئ الشاشة |
aria-live | aria-live="polite" | polite أو assertive | نطق الإشعارات والتحديثات اللحظية تلقائياً دون نقل التركيز |
role | role="alert" | اسم دور معياري | تحديد الدور الوظيفي الصريح للمكونات الديناميكية المخصصة |
HTML
<!-- Invisible accessible name for icon-only button -->
<button aria-label="Close modal dialog">
<svg aria-hidden="true" width="16" height="16">
<path d="M2 2L14 14M14 2L2 14" stroke="#fff"/>
</svg>
</button>
<!-- Form description association -->
<input type="password" aria-describedby="pwd-rules">
<p id="pwd-rules">Must be at least 12 characters.</p>من أهم التطبيقات العملية لخصائص ARIA استخدام
aria-hidden="true" لإخفاء الأيقونات التزيينية ورسوم SVG التجميلية عن برمجيات قراءة الشاشة؛ حيث يمنع ذلك التشويش الصوتي غير الضروري، ويتيح للمستخدم التركيز على المحتوى الفعلي والمعلومات الأساسية.توفر منظمة W3C العالمية أداة التدقيق الرسمية W3C Nu HTML Validator للتحقق الصارم من مطابقة مستندات وصفحات الويب لمعايير لغة HTML القياسية. ويؤدي تدقيق الكود عبر هذه الأداة إلى استئصال الأخطاء النحوية والهيكلية الخفية قبل إطلاق الموقع في بيئة الإنتاج.
HTML
<!DOCTYPE html>
<html lang="ar" dir="rtl">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, initial-scale=1.0">
<title>Clean Validated HTML5 Document</title>
</head>
<body><main>Content</main></body>
</html>يقوم مدقق W3C بفحص المستند لاكتشاف الوسوم المفتوحة، والتداخلات غير الشرعية، والخصائص الملغاة، والمعرفات المكررة، وغياب الخصائص الإلزامية مثل نصوص
alt على الصور، وأخطاء كتابة الكيانات الرمزية. ويضمن الحصول على علامة الاجتياز الخضراء أعلى درجات التوافق والموثوقية.نظراً لأن المتصفحات الحديثة مزودة بمحللات برمجية متسامحة تحاول التغاضي عن الأخطاء، فإن الكثير من الهفوات النحوية في HTML تمر دون أن تتسبب في انهيار مرئي للصفحة. ومع ذلك، فإن هذه الأخطاء الخفية تؤدي إلى تعطيل محددات التنسيق في CSS وتشوه تجاوب الصفحة وعناكب محركات البحث وقارئات الشاشة.
HTML
<!-- ERROR: Unclosed tags and improper nesting -->
<!-- <p>Paragraph with <b>bold <i>italic</p> text</i> -->
<!-- CORRECT: Cleanly closed, symmetrically nested -->
<p>Paragraph with <b>bold <i>italic</i></b> text.</p>من أشهر الأخطاء الشائعة: نسيان إغلاق الوسوم، والتداخل غير المتناظر، وإسقاط علامات التنصيص حول قيم الخصائص، وتكرار المعرف id، وإهمال خاصية alt على الصور، وإدراج عناصر كتلية داخل وسوم الفقرات. ويضمن التصحيح المنظم لهذه الهفوات الحفاظ على نقاء ونزاهة شجرة المستند.
يتطلب احتراف تطوير الواجهات التزاماً صارماً بمعايير الجودة البرمجية؛ فالكود النظيف يعتمد دائماً على كتابة أسماء الوسوم والخصائص بحروف إنجليزية صغيرة، وتطويق قيم الخصائص بعلامات تنصيص مزدوجة، ومحاذاة العناصر الفرعية بمسافات إزاحة منتظمة للحفاظ على مقروئية الشفرة.
HTML
<!-- Professional, accessible, semantic markup -->
<article class="tutorial-card">
<header>
<h3>Semantic HTML Architecture</h3>
</header>
<p>Structured with predictable formatting.</p>
<footer>
<a href="/lessons/53">Read Full Lesson</a>
</footer>
</article>لا يمثل التنسيق المنظم مجرد مظهر جمالي؛ بل يساهم بصورة مباشرة في تقليص تعارضات الدمج البرمجي في أنظمة Git، ويسهل عمليات التدقيق الأمني، ويسرع من أداء تحليل الصفحات، ويضمن قدرة كافة أعضاء الفريق على صيانة وتطوير كود المشروع بسلاسة واحترافية.
قبل إطلاق أي صفحة ويب في بيئة الإنتاج الحية، يضمن تنفيذ قائمة فحص الجودة الشاملة التأكد من خلو المستند تماماً من أي عيوب هيكلية. وتجمع هذه القائمة كافة المهارات والمعارف التي أتقنتها عبر فصول لغة HTML: إعلان نوع المستند، والترميز، والتجاوب، والدلالة الهيكلية، وخصائص الإتاحة، والتدقيق النحوي.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Validated HTML5 Page</title>
</head>
<body>
<main><h1>Production Ready</h1></main>
</body>
</html>تحقق من تزويد كافة الصور بنصوص
alt معبرة، وربط حقول النماذج بتسمياتها عبر for و id، والتأكد من صحة وجهات الروابط، وغياب المعرفات المكررة. ويضمن اختبار الموقع عبر لوحة المفاتيح وقارئات الشاشة وصولاً رقمياً متكافئاً لكافة فئات الزوار دون استثناء.
خلاصة المعرفة ومحطة الانتقال
ملخص الدرس
حصاد الدرسمراجعة مركّزة لأهم المفاهيم والقواعد الهندسية التي أتقنتها في هذا الدرس قبل التطبيق العملي
ماذا تعلّمت في هذا الدرس؟
ملخص الدرس: تهانينا الحارة! لقد أتممت بنجاح كامل مسار لغة HTML المكون من 53 درساً شاملاً في منصة CloseTag. أتقنت في هذا الدرس الختامي معايير إتاحة محتوى الويب، وخصائص ARIA، والتنقل المنطقي بالكيبورد وخاصية tabindex، والتدقيق القياسي بمدقق W3C، وتصحيح الأخطاء الشائعة، وقائمة فحص الجودة الشاملة قبل الإطلاق. الخطوة التالية: أصبحت الآن تمتلك الأساس البرمجي المتين للانطلاق نحو إتقان تصميم الواجهات بلغة CSS وإكسابها التفاعل الحي بلغة JavaScript!
رحلتك في الدرس
—سجّل الدخول لحفظ تقدمك
تابع إنجاز المواضيع والمصطلحات والمهام، وكمّل من آخر خطوة على أي جهاز.
ابنِ لغتك البرمجية
المصطلحات6
راجع المعنى، اشرحه لنفسك، ثم علّم البطاقة كمفهومة.
0 / 6 مفهومةأول بطاقة، أول خطوة
- 01 Web Accessibility إتاحة محتوى الويب
- الممارسة الهندسية الشاملة لبناء مواقع وتطبيقات رقمية يمكن لكافة الأشخاص بمختلف قدراتهم استخدامها وإدراكها بسهولة.
- للمراجعة
- 02 WAI-ARIA مبادرة تطبيقات الويب ميسرة النفاذ
- حزمة من السمات البرمجية التي تعزز إتاحة الويب بربط المكونات التفاعلية المخصصة مع واجهات قارئات الشاشة في المتصفح.
- للمراجعة
- 03 W3C Nu Validator مدقق W3C القياسي
- أداة التدقيق الرسمية لمنظمة W3C التي تفحص كود HTML وتتحقق من مطابقته التامة للمواصفات القياسية العالمية.
- للمراجعة
- 04 Tabindex Attribute خاصية بؤرة التركيز
- خاصية عامة تتحكم في إمكانية وصول بؤرة تركيز لوحة المفاتيح إلى العنصر وترتيبه في تسلسل التنقل بزر Tab.
- للمراجعة
- 05 Accessibility Tree شجرة الإتاحة الرقمية
- البنية الهيكلية الداخلية للمتصفح التي تترجم عناصر الصفحة وأدوارها وأسماءها إلى صيغة مفهومة لقارئات الشاشة.
- للمراجعة
- 06 Quality Assurance ضمان الجودة الرقمية
- العملية المنهجية الشاملة للتحقق من مطابقة صفحة الويب لكافة المعايير الهيكلية والدلالية والإتاحة قبل إطلاقها رسمياً.
- للمراجعة
لا توجد بطاقات تطابق البحث والتصفية.
اقرأ البطاقات بحرية. سجّل الدخول لحفظ تقدم مراجعتك.
حروف قليلة. معنى كامل.
الاختصارات4
راجع المعنى، اشرحه لنفسك، ثم علّم البطاقة كمفهومة.
0 / 4 مفهومةأول بطاقة، أول خطوة
- 01 WCAG WCAG
- Web Content Accessibility Guidelines
- المعايير الدولية القياسية الصادرة عن منظمة W3C لضبط إتاحة المحتوى الرقمي عبر مستويات المطابقة A وAA وAAA.
- للمراجعة
- 02 POUR POUR
- Perceivable, Operable, Understandable, Robust
- المبادئ الأربعة الجوهرية لمعايير إتاحة الويب: قابلية الإدراك، وقابلية التشغيل، وقابلية الفهم، والمتانة.
- للمراجعة
- 03 A11Y A11Y
- Accessibility
- الاختصار الرقمي العالمي لمصطلح الإتاحة Accessibility حيث يمثل الرقم 11 عدد الحروف المحصورة بين الحرف الأول والأخير.
- للمراجعة
- 04 QA QA
- Quality Assurance
- إجراءات التدقيق والاختبار المنظمة للتحقق من خلو البرمجيات من العيوب ومطابقتها للمواصفات المعتمدة.
- للمراجعة
لا توجد بطاقات تطابق البحث والتصفية.
اقرأ البطاقات بحرية. سجّل الدخول لحفظ تقدم مراجعتك.
من الفهم للتطبيق
مهامك قبل الاختبار
خطوة صغيرة كل مرة. وإنجاز تقدر ترجع له.
0/4مهام منجزة
-
افحص مستند HTML عبر أداة تدقيق W3C وحلل رسائل الأخطاء والتنبيهات وقم بتصحيح كافة الملاحظات للوصول للنتيجة الخضراء.
-
قم بضبط تسلسل التنقل عبر الكيبورد لبطاقات مخصصة باستخدام tabindex="0" مع تجنب استخدام أي قيم موجبة مربكة.
-
أنشئ زراً يعتمد على أيقونة بصرية فقط وزوده بخاصية aria-label للنطق الصوتي وخاصية aria-hidden="true" للرسم الداخلي.
-
قم بتنفيذ تدقيق شامل يتأكد من سلامة نوع المستند، وبيان اللغة، والترميز، والتجاوب، وعنوان الصفحة، ونصوص alt.
تأشير المهمة إقرار منك بإتمامها، وليس تصحيحًا آليًا للكود. يُحفظ تقدمك في حسابك.
مساحة التحدي
اختبر فهمك.
اختبر فهمك.
ووصلها للإتقان.
كل سؤال خطوة لقدّام. اختار، اكتب كود، وشوف نتيجتك فورًا.
10أسئلة
2أنواع تحديات
100%هدف الإتقان
تصحيح تلقائي. فرص بلا حدود.
أكمل المهام، واجمع كل الإجابات الصحيحة. أقل من 100%؟ راجع وأعد المحاولة.
الأسئلة متاحة للاطلاع. سجّل الدخول للتفاعل وحفظ تقدمك.