إذا كنت قد شاهدت درس ما هي إمكانية الوصول ولماذا هي مهمة؟، فأنت تعلم أن إمكانية الوصول الرقمية مفهوم واسع؛ ويتمثل جوهره في ضمان تمكّن أكبر عدد ممكن من الأشخاص من استخدام الويب.
إلى جانب الجوانب القانونية والتجارية، فإن الأهم هو أن اتباع إرشادات إمكانية الوصول يجعل تجربة التصفح أفضل بكثير للجميع.
إن أسهل طريقة لإنشاء قالب أو إضافة أو موقع يمكن الوصول إليه هي التفكير في إمكانية الوصول منذ البداية. أدرجها في مرحلة التخطيط، ووعِّ زملاءك (وعملاءك) بها. لن يساعدك ذلك على اكتشاف الأخطاء مبكرًا فحسب، بل سيمكنك أيضًا من تجنّب العديد من الأخطاء مسبقًا.
في هذا الدرس، ستتعلم أساسيات HTML القابل للوصول، وستعرف كيفية تطبيقها في قالب WordPress الخاص بك.
الأساسيات
إن HTML قوي بقدر ما هو قابل للوصول.
جرّب ذلك بنفسك: افتح محرر الأكواد وأنشئ صفحة HTML صالحة—مُرمّزة بشكل صحيح باستخدام المعالم والعناوين والنصوص والأزرار والروابط والنماذج وغير ذلك.
يمكنك استخدام الكود أدناه إذا أردت.
<!DOCTYPE html>\n<html lang="en">\n<head>\n <meta charset="UTF-8">\n <meta name="viewport" content="width=device-width, initial-scale=1.0">\n <title>موقعي الإلكتروني</title>\n</head>\n<body>\n\n<header>\n <h1>مرحبًا بك في موقعي الإلكتروني</h1>\n <nav>\n <ul>\n <li><a href="#home">الرئيسية</a>\n <li><a href="#about">نبذة عنا</a>\n <li><a href="#services">الخدمات</a>\n <li><a href="#contact">اتصل بنا</a></li>\n </ul>\n </nav>\n</header>\n\n<main>\n <article id="home">\n <h2>الرئيسية</h2>\n <p>هذا هو القسم الرئيسي، حيث ستجد محتوى تعريفيًا.</p>\n <form name="Just a button">\n <button type="button">انقر عليّ!</button>\n </form>\n </article>\n\n <article id="about">\n <h2>نبذة عنا</h2>\n <p>يحتوي هذا القسم على معلومات عن الموقع الإلكتروني أو الشخص/الشركة التي تقف وراءه.</p>\n <p><a href="https://example.com">عرض ملفهم التعريفي الكامل</a></p>\n </article>\n\n <article id="services">\n <h2>الخدمات</h2>\n <p>ستجد هنا تفاصيل الخدمات المقدمة.</p>\n </article>\n\n <article id="contact">\n <h2>اتصل بنا</h2>\n <form action="#" method="post" name="contact" autocomplete="on">\n <fieldset>\n <legend>لنتحدث</legend>\n <div><label for="name">الاسم:</label></div>\n <div><input type="text" id="name"></div>\n <div><label for="email">البريد الإلكتروني:</label></div>\n <div><input type="email" id="email"></div>\n <div><label for="message">الرسالة:</label></div>\n <div><textarea id="message" rows="4" cols="50" spellcheck="true"></textarea></div>\n <div><input type="submit" value="إرسال"></div>\n </fieldset>\n </form>\n </article>\n</main>\n\n<footer>\n <p>© 2024 موقعي الإلكتروني</p>\n</footer>\n\n</body>\n</html>\nاختبر الكود الآن باستخدام أداة عبر الإنترنت مثل Web Accessibility Checker وتحقق من عدم ظهور أي مشكلات تتعلق بإمكانية الوصول.
تبدأ المشكلات عادةً عند إضافة الأنماط أو البرامج النصية أو أصول الوسائط. وبصفتك مطور قوالب WordPress حديثة، ستعمل بشكل أساسي مع هذه التقنيات—مثل الكتل المستندة إلى React، والأنماط المبنية باستخدام PHP، وCSS المُنشأ من theme.json.
النقطة الأساسية هي أن تظل واعيًا بإمكانية الوصول أثناء البرمجة والتصميم.
لنلقِ نظرة على بعض التقنيات وأفضل الممارسات التي يمكن للمطورين والمصممين اتباعها عند إنشاء الكتل والقوالب والأنماط المخصصة.
HTML الدلالي
استخدم عناصر HTML الدلالية أو ذات المعنى بدلًا من تغليف كل شيء بعنصر <div>.
سيوفر عليك ذلك عناء إنشاء أكواد معقدة بلا داعٍ أو محاولة «إعادة اختراع العجلة».
المعالم
المعالم هي وسيلة لتعريف بنية الصفحة أو هيكلها. وهي تساعد قارئات الشاشة على التنقل في المحتوى بسهولة أكبر.
على سبيل المثال، بدلًا من استخدام عدد قليل من عناصر <div> وفئاتها:
<div class="header">\n <h1>مرحبًا بك في موقعي الإلكتروني</h1>\n</div>\n\n\n<div class="nav">\n <ul>\n <li><a href="#home">الرئيسية</a></li>\n <li><a href="#about">نبذة عنا</a></li>\n <li><a href="#services">الخدمات</a></li>\n <li><a href="#contact">اتصل بنا</a></li>\n </ul>\n</div>يمكنك استخدام المعالم للأقسام ذات الصلة.
<header>\n <h1>مرحبًا بك في موقعي الإلكتروني</h1>\n</header>\n\n\n<nav>\n <ul>\n <li><a href="#home">الرئيسية</a></li>\n <li><a href="#about">نبذة عنا</a></li>\n <li><a href="#services">الخدمات</a></li>\n <li><a href="#contact">اتصل بنا</a></li>\n </ul>\n</nav>إذا صممت قالبًا أو أنشأته من خلال محرر الموقع، فمن الممكن أيضًا تعيين المعالم هناك.
لتعريف كتل Group وRow وStack كعناصر لتقسيم المحتوى، حدّد الكتلة، وافتح Settings ، ثم وسّع قسم Advanced .
مرّر إلى الأسفل وحدّد header أو main أو section أو article أو aside أو footer بوصفه HTML ELEMENT وفقًا لوظيفة الكتلة وموقعها.
العناوين
عند إضافة العناوين إلى القالب، استخدمها دائمًا بالترتيب الصحيح، بدءًا من H2 وبالتسلسل حتى H6.
في محرر الموقع، انقر على Document Overview > Outline للتحقق مما إذا كان هناك مستوى مفقود أو ما إذا كان كل شيء صحيحًا.
الزر مقابل الرابط
عند تصميم إجراءات المستخدم، ضع الأمور التالية في الاعتبار عند استخدام الأزرار والروابط:
- إذا أردت أن ينفّذ المستخدمون إجراءً ما، فاستخدم عنصر button.
- إذا أردت منهم الانتقال إلى صفحة أخرى، فاستخدم عنصر anchor (<a>).
- إذا كان يجب أن يبدو أحد الروابط كزر، مثل زر الدعوة إلى الإجراء في صفحة الهبوط، فنسّقه باستخدام CSS.
النماذج
عند تصميم نموذج في قالبك، اتبع الإرشادات التالية:
ضع النموذج دائمًا داخل عنصر form.
اضبط دائمًا type والسمات المطابقة الصحيحة في حقل الإدخال. على سبيل المثال، إذا عرّفت type الإدخال على أنه tel، فستظهر لوحة مفاتيح رقمية على الأجهزة المحمولة.
<input type="tel" name="phone" id="phone" required>لا تعتمد فقط على نص placeholder لتوضيح الغرض من حقل الإدخال؛ استخدم دائمًا تسميات يمكن الوصول إليها.
استخدم عنصر search لأي نموذج بحث.
عند تصميم نموذج تسجيل الدخول، يمكنك استخدام سمة autocomplete لمساعدة مدير كلمات المرور على ملء النموذج.
<input type="password" autocomplete="current-password">تعرض معظم المتصفحات افتراضيًا حلقة التركيز على العنصر الذي يحظى بالتركيز.
إذا أردت تغيير طريقة عرض حلقة التركيز هذه، فاستخدم pseudo-class :focus-visible، ولا تزل حلقة التركيز بالكامل.
الألوان
أنشئ لوحة ألوان يمكن الوصول إليها مع تباين كافٍ.
عند تحرير القالب، سينبّهك WordPress إذا استخدمت ألوانًا للنص والخلفية لا توفر تباينًا كافيًا.
لا تنقل المعلومات باستخدام الألوان وحدها. على سبيل المثال، لا تميّز الروابط بالألوان فقط، بل حدّد حالات التركيز بالطريقة نفسها أيضًا. عند الشك، اطّلع على أنماط روابط HTML الافتراضية وأنماط التركيز واتبعها.
الطباعة
عند ضبط حجم الخط، استخدم وحدات نسبية مثل rem وتجنب استخدام px.
حدّد عرض المحتوى بما بين 50 و70 حرفًا؛ ولهذا تُعد وحدة character أو ch مثالية.
استخدم تباعدًا كافيًا بين الأسطر وفقًا لحجم الخط.
إعطاء الأولوية لتفضيلات المستخدم
تُعد media queries أساس التصميم المتجاوب، وهي تساعد على تحسين تجربة المستخدم.
ترتبط بعض استعلامات الوسائط مثل prefers-color-scheme وprefers-reduced-motion بإمكانية الوصول مباشرةً، بينما يمكن استخدام استعلامات مثل pointer وhover وscripting لتنسيق سلوك المكوّن وفقًا للجهاز.
حلول ARIA البديلة
ARIA هو اختصار لـ Accessible Rich Internet Applications framework، وغالبًا ما يُشار إليه بوصفه طريقة سريعة لجعل محتوى HTML أكثر قابلية للوصول لقارئات الشاشة.
لكن أهم قاعدة عند استخدام ARIA هي ألا تستخدمه إلا عند الحاجة إليه فعلًا. ومن الناحية المثالية، ينبغي دائمًا استخدام ميزات HTML الأصلية لشرح معنى المحتوى لقارئ الشاشة.
تقلل سمات ARIA المستخدمة بشكل غير صحيح من إمكانية الوصول، لذا تجنّبها ما لم تكن تفتقر إلى التحكم في HTML أو تحتاج إلى التعامل مع محتوى ديناميكي.
لمزيد من المعلومات، راجع أساسيات WAI-ARIA على MDN.
الملخص ولمزيد من القراءة
إمكانية الوصول عملية مستمرة. حتى التحسين الصغير يمكن أن يحدث فرقًا كبيرًا لزائر موقعك، ولا يترتب عليه أي تأثير سلبي. فهو لن يؤدي أبدًا إلى تدهور تجربة المستخدم.
لمزيد من التعلم، راجع دروس مبادرة W3C لإمكانية الوصول إلى الويب (WAI).