إمكانية الوصول في PHP: جعل موقعك متاحًا لجميع المستخدمين

تعلم Python بسهولة دون إرهاق نظري. حل مهام عملية مع التحقق التلقائي واكتب الكود مباشرة في المتصفح.

لماذا إمكانية الوصول (Accessibility) ليست مجرد "علامة صح"، بل تتعلق بأشخاص حقيقيين

\n\n

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

\n\n

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

\n\n

في هذه المقالة، سنشرح كيفية تطبيق مبادئ WCAG (إرشادات إمكانية الوصول لمحتوى الويب) مباشرة في كود PHP. بدون حشو، مع أمثلة عملية وحلول جاهزة.

\n\n

من أين نبدأ: الترميز الدلالي وPHP

\n\n

يعتقد الكثيرون أن إمكانية الوصول تتعلق فقط بـ CSS وJavaScript. لكن جذر المشكلة غالبًا ما يكون في الجزء الخادم (Server-side). PHP يُنشئ HTML، وإذا كان هذا HTML "أصم" — فلن ينقذه أي Frontend.

\n\n

العناوين الصحيحة والهيكل السليم

\n\n

قارئات الشاشة (Screen Readers) تعتمد على العناوين. إذا كان لديك في الصفحة <h1> واحد، ثم مباشرة <h3> — هذا مثل كتاب يبدأ بفهرس ثم ينتقل مباشرة إلى حاشية سفلية. يتم كسر التسلسل الهرمي.

\n\n

النهج الخاطئ:

<?php\n// إنشاء محتوى بدون مراعاة الدلالات\necho '<div class="title">' . $title . '</div>';\necho '<div class="subtitle">' . $subtitle . '</div>';\n?>

\n\n

النهج الصحيح (إمكانية الوصول في PHP):

<?php\n// هيكل دلالي لقارئات الشاشة\necho '<h1>' . htmlspecialchars($title, ENT_QUOTES, 'UTF-8') . '</h1>';\necho '<h2>' . htmlspecialchars($subtitle, ENT_QUOTES, 'UTF-8') . '</h2>';\n?>

\n\n

لاحظ استخدام htmlspecialchars() — هذا أساس الأمان وإمكانية الوصول. الرموز الخاصة في العناوين قد تكسر الترميز أو تُقرأ بشكل خاطئ.

\n\n

خصائص ARIA: عندما لا يكفي HTML

\n\n

ARIA (تطبيقات الإنترنت الغنية القابلة للوصول) هي مجموعة من الخصائص التي تُكمل الدلالات. على سبيل المثال، إذا كنت تنشئ قائمة منسدلة مخصصة باستخدام PHP وJavaScript، يجب إخبار قارئ الشاشة: "هذا زر يفتح قائمة".

\n\n

مثال على إنشاء زر متوافق مع ARIA:

<?php\nfunction renderAccessibleButton(string $label, string $id): string {\n    return sprintf(\n        '<button id="%s" aria-expanded="false" aria-controls="menu-%s">%s</button>',\n        htmlspecialchars($id),\n        htmlspecialchars($id),\n        htmlspecialchars($label)\n    );\n}\necho renderAccessibleButton('القائمة', 'main-menu');\n?>

\n\n

الخاصية aria-expanded تُخبر قارئ الشاشة ما إذا كانت القائمة مفتوحة أم لا. الخاصية aria-controls تربط الزر بالكتلة المنسدلة. هذا يشبه نظام GPS للمستخدم الكفيف.

\n\n

التعامل مع النماذج: فخ إمكانية الوصول

\n\n

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

\n\n

ربط label و input

\n\n

في PHP، غالبًا ما تُنشئ الحقول ديناميكيًا. القاعدة الذهبية: كل <input> يجب أن يكون له <label> مع الخاصية for، أو يجب أن يكون الـ input نفسه مغلفًا داخل label.

\n\n

مثال لنموذج ديناميكي:

<?php\n$fields = [\n    'name' => 'الاسم',\n    'email' => 'البريد الإلكتروني',\n    'phone' => 'رقم الهاتف'\n];\nforeach ($fields as $key => $label):\n?>\n    <div class="form-group">\n        <label for="input-&