الوصولية وأساسيات SEO — أساسيات HTML

الوصولية (Accessibility) وأساسيات SEO

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

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

1. استخدم العنصر الصحيح

| تريد | استخدم | لا تستخدم |

|---|---|---|

| ينقل لصفحة أخرى | <a href> | <span onclick> |

| يفعل شيئاً في الصفحة | <button> | <div onclick> |

| عنوان قسم | <h2> | <p class="big"> |

الزر الحقيقي يعمل بلوحة المفاتيح (Tab للوصول، Enter و Space للتفعيل) ويعلنه قارئ الشاشة "زر". الـ div لا يفعل أياً من ذلك حتى تكتب له كل هذا يدوياً.

2. لوحة المفاتيح

جرّب موقعك بدون فأرة: Tab للتنقل، Shift+Tab للرجوع، Enter للتفعيل.

- هل ترى أين التركيز؟ لا تحذف إطار التركيز (outline) في CSS دون بديل.

- هل الترتيب منطقي؟ ترتيب Tab يتبع ترتيب HTML.

- رابط "تخطَّ إلى المحتوى" في أول الصفحة يوفر على مستخدم لوحة المفاتيح عشرات الضغطات:

<a href="#main" class="skip-link">تخطَّ إلى المحتوى</a>
<header>...</header>
<main id="main">...</main>

3. نصوص بديلة وأسماء واضحة

- كل <img> له alt (فارغ للصور الزخرفية).

- كل حقل له <label>.

- كل زر وكل رابط له نص مفهوم. زر أيقونة بلا نص يحتاج اسماً:

<button type="button" aria-label="إغلاق النافذة">✕</button>

- نص الرابط يصف الوجهة: "حمّل دليل الطالب (PDF)" لا "اضغط هنا".

4. لا تعتمد على اللون وحده

"الحقول باللون الأحمر إلزامية" لا تفيد من لا يميز الأحمر. أضف نصاً أو رمزاً: "الاسم (إلزامي)". وتأكد أن التباين بين النص والخلفية كافٍ (نسبة 4.5:1 على الأقل للنص العادي).

5. ARIA: القاعدة الأولى

ARIA خصائص تضيف معنى لقارئات الشاشة (aria-label، aria-expanded، role). القاعدة الأولى لـ ARIA: لا تستخدمها إذا وُجد عنصر HTML يؤدي الغرض. <button> أفضل من <div role="button">. ARIA الخاطئة أسوأ من عدمها، لأنها تكذب على قارئ الشاشة.

6. لغة واتجاه وعناوين

lang="ar" dir="rtl"، وعناوين متسلسلة بلا قفز، و <main> واحد. (تعلمتها في الدروس السابقة — الآن تعرف لماذا.)

أساسيات SEO في HTML

| العنصر | الأثر |

|---|---|

| <title> فريد ووصفي لكل صفحة | العنوان في نتائج البحث |

| meta description | الوصف تحت العنوان |

| <h1> واحد وعناوين منطقية | فهم موضوع الصفحة وأقسامها |

| HTML دلالي | فهم أين المحتوى الرئيسي |

| alt للصور | الظهور في بحث الصور |

| روابط بنص وصفي | فهم الصفحة المرتبطة |

| صفحة سريعة ومتجاوبة | عامل في الترتيب |

لا توجد حيلة HTML سحرية للترتيب الأول: المحتوى المفيد والصفحة السليمة هما الأساس. وتجنب "حشو الكلمات المفتاحية" — يضر أكثر مما ينفع.

أدوات الفحص

- Lighthouse في أدوات مطور Chrome: تقرير وصولية و SEO وأداء.

- validator.w3.org: أخطاء HTML.

- قارئ شاشة حقيقي: NVDA (ويندوز، مجاني)، VoiceOver (Mac و iPhone)، TalkBack (أندرويد).

تمرين

افتح صفحة كتبتها، وشغّل Lighthouse، وأصلح كل ملاحظات الوصولية. ثم تنقّل فيها بلوحة المفاتيح فقط وأضف رابط "تخطَّ إلى المحتوى".

<!DOCTYPE html>
<html lang="ar" dir="rtl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>صفحة يسهل الوصول إليها</title>
</head>
<body>
    <a href="#main">تخطَّ إلى المحتوى</a>

    <header>
        <a href="index.html"><img src="images/logo.svg" alt="Kodax — الصفحة الرئيسية" width="120" height="40"></a>
        <nav aria-label="القائمة الرئيسية">
            <ul>
                <li><a href="courses.html">الدورات</a></li>
                <li><a href="challenges.html">التحديات</a></li>
            </ul>
        </nav>
    </header>

    <main id="main">
        <h1>تواصل معنا</h1>
        <form action="/contact" method="post">
            <p>
                <label for="name">الاسم (إلزامي)</label>
                <input type="text" id="name" name="name" required autocomplete="name">
            </p>
            <p>
                <label for="msg">رسالتك (إلزامي)</label>
                <textarea id="msg" name="message" rows="4" required></textarea>
            </p>
            <button type="submit">إرسال الرسالة</button>
        </form>
        <p><a href="files/guide.pdf">حمّل دليل الطالب (PDF، 2 ميغابايت)</a></p>
        <button type="button" aria-label="إغلاق التنبيه">✕</button>
    </main>
</body>
</html>