إمكانية الوصول: ARIA وقارئات الشاشة وأفضل الممارسات

ما هي إمكانية الوصول على الويب؟

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

فهم إرشادات WCAG

إرشادات إمكانية الوصول إلى محتوى الويب (WCAG) هي المعيار الدولي لإمكانية الوصول على الويب، نشرته منظمة W3C. وهي منظمة حول أربعة مبادئ أساسية تعرف بـ POUR:

• قابل للإدراك -- يجب أن يتمكن المستخدمون من إدراك جميع المعلومات ومكونات الواجهة.
• قابل للتشغيل -- يجب أن يتمكن المستخدمون من تشغيل جميع العناصر التفاعلية.
• قابل للفهم -- يجب أن يكون المحتوى والواجهات سهلة الفهم.
• متين -- يجب أن يعمل المحتوى بشكل موثوق عبر مختلف التقنيات والأدوات المساعدة.

يحدد WCAG ثلاثة مستويات للمطابقة: المستوى A (الحد الأدنى)، المستوى AA (الهدف القياسي لمعظم المواقع)، والمستوى AAA (الأعلى، وغالبا غير عملي للمواقع بأكملها). تستهدف معظم المؤسسات الامتثال للمستوى AA.

HTML الدلالي: أساس إمكانية الوصول

قبل استخدام سمات ARIA، استخدم دائما عناصر HTML الدلالية الصحيحة. قارئات الشاشة والتقنيات المساعدة تفهم عناصر HTML الأصلية بالفعل. عنصر <button> يكون قابلا للتركيز وقابلا للتشغيل بلوحة المفاتيح تلقائيا، بينما عنصر <div> المصمم ليبدو كزر ليس كذلك.

<!-- سيئ: غير دلالي وغير سهل الوصول -->
<div class="header">
    <div class="nav">
        <div class="link" onclick="goHome()">الرئيسية</div>
    </div>
</div>

<!-- جيد: دلالي وسهل الوصول افتراضيا -->
<header>
    <nav>
        <a href="/">الرئيسية</a>
    </nav>
</header>

أدوار ARIA

أدوار ARIA (تطبيقات الإنترنت الغنية سهلة الوصول) تحدد ما يمثله العنصر للتقنيات المساعدة. استخدمها فقط عندما لا يستطيع HTML الدلالي نقل الغرض. تشمل أدوار المعالم الشائعة:

• role="navigation" -- يحدد قسم التنقل (يعادل <nav>).
• role="banner" -- يحدد ترويسة الموقع (يعادل <header> عند استخدامه كشعار الصفحة).
• role="main" -- يحدد منطقة المحتوى الرئيسية (يعادل <main>).
• role="complementary" -- يحدد المحتوى المساند (يعادل <aside>).
• role="contentinfo" -- يحدد تذييل الصفحة (يعادل <footer>).

<div role="banner">
    <div role="navigation" aria-label="القائمة الرئيسية">
        <a href="/">الرئيسية</a>
        <a href="/about">من نحن</a>
        <a href="/contact">اتصل بنا</a>
    </div>
</div>

<div role="main">
    <h1>مرحبا بك في موقعي</h1>
    <p>هذا هو المحتوى الرئيسي.</p>
</div>

<div role="contentinfo">
    <p>حقوق النشر 2025</p>
</div>

سمات ARIA الأساسية

توفر سمات ARIA سياقا إضافيا تعتمد عليه التقنيات المساعدة:

• aria-label -- يوفر اسما يمكن الوصول إليه عند غياب النص المرئي.
• aria-labelledby -- يشير إلى معرف عنصر يعمل كتسمية.
• aria-describedby -- يشير إلى عنصر يوفر وصفا أطول.
• aria-hidden="true" -- يخفي عنصرا عن التقنيات المساعدة مع الحفاظ على ظهوره بصريا.
• aria-live -- يعلن عن تغييرات المحتوى الديناميكي. القيم: polite (ينتظر) أو assertive (يقاطع).
• aria-expanded -- يشير إلى ما إذا كان القسم القابل للطي مفتوحا أو مغلقا.

<!-- aria-label للأزرار التي تحتوي على أيقونات فقط -->
<button aria-label="إغلاق النافذة">X</button>

<!-- aria-labelledby يشير إلى عنصر آخر -->
<h2 id="section-title">خدماتنا</h2>
<ul aria-labelledby="section-title">
    <li>تصميم الويب</li>
    <li>التطوير</li>
</ul>

<!-- aria-describedby لنص المساعدة في النماذج -->
<label for="password">كلمة المرور</label>
<input type="password" id="password" aria-describedby="pw-help">
<span id="pw-help">يجب أن تكون 8 أحرف على الأقل.</span>

<!-- aria-live لرسائل الحالة الديناميكية -->
<div aria-live="polite" id="status"></div>

<!-- aria-expanded للأقسام القابلة للتبديل -->
<button aria-expanded="false" aria-controls="faq-1">ما هو ARIA؟</button>
<div id="faq-1" hidden>ARIA يرمز إلى تطبيقات الإنترنت الغنية سهلة الوصول.</div>

التنقل بلوحة المفاتيح

كثير من المستخدمين يتنقلون حصريا بلوحة المفاتيح. يجب أن تكون جميع العناصر التفاعلية قابلة للوصول والتشغيل عبر مفاتيح Tab و Enter و Space والأسهم. المبادئ الأساسية تشمل:

• tabindex="0" -- يضيف عنصرا غير تفاعلي إلى ترتيب التنقل الطبيعي.
• tabindex="-1" -- يجعل العنصر قابلا للتركيز عبر JavaScript لكن يزيله من ترتيب التنقل.
• لا تستخدم أبدا قيم tabindex أكبر من 0 لأنها تعطل تدفق المستند الطبيعي.
• وفر دائما مؤشر تركيز مرئيا حتى يعرف المستخدمون أين هم في الصفحة.

<body>
    <a href="#main-content" class="skip-link">تخطي إلى المحتوى الرئيسي</a>

    <nav>
        <a href="/">الرئيسية</a>
        <a href="/about">من نحن</a>
        <a href="/contact">اتصل بنا</a>
    </nav>

    <main id="main-content">
        <h1>عنوان الصفحة</h1>
        <p>المحتوى يبدأ هنا.</p>
    </main>
</body>

كتابة نص بديل فعال

كل عنصر <img> يحتاج سمة alt. اتبع هذه الإرشادات:

• الصور المعلوماتية -- صف المحتوى والوظيفة بإيجاز (مثلا alt="كلب ذهبي يلعب في حديقة").
• الصور الزخرفية -- استخدم سمة alt فارغة: alt="". ستتجاوزها قارئات الشاشة.
• الصور الوظيفية (الروابط أو الأزرار) -- صف الإجراء وليس الصورة (مثلا alt="الذهاب إلى الصفحة الرئيسية").
• تجنب البدء بـ "صورة لـ..." لأن قارئ الشاشة يعلن عنها كصورة بالفعل.

تباين الألوان والتصميم المرئي

يتطلب WCAG المستوى AA نسبة تباين لا تقل عن 4.5:1 للنص العادي و3:1 للنص الكبير. لا تعتمد أبدا على اللون وحده لنقل المعنى. على سبيل المثال، رسائل أخطاء النماذج يجب أن تتضمن أيقونة أو تسمية نصية إلى جانب اللون الأحمر. استخدم أدوات مثل WebAIM Contrast Checker للتحقق من تركيبات الألوان.

النماذج سهلة الوصول

النماذج هي نقاط تفاعل حرجة. كل عنصر تحكم في النموذج يحتاج تسمية مرئية ومرتبطة برمجيا. اجمع الحقول المرتبطة باستخدام <fieldset> و<legend>، ووفر رسائل خطأ واضحة تحدد المشكلة وتقترح حلا.

أدوات الاختبار وقائمة المراجعة

استخدم هذه الأدوات لتدقيق موقعك:

• axe DevTools -- إضافة متصفح تفحص انتهاكات إمكانية الوصول.
• WAVE -- أداة تقييم إمكانية الوصول من WebAIM.
• Lighthouse -- مدمج في أدوات مطوري Chrome ويتضمن تدقيق إمكانية الوصول.
• قارئات الشاشة -- اختبر مع NVDA (ويندوز، مجاني) أو VoiceOver (ماك، مدمج) أو TalkBack (أندرويد، مدمج).