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

إن جوهر إمكانية الوصول إلى الويب يكمن في صياغة جميع أكواد (HTML) الخاصة بنا بحيث تكون دلالية (semantic). وطالما أن محتوانا يستخدم وسوم (HTML) مثل <img> و <h3> بشكل هادف وفي السياق الصحيح، سيتمكن جميع الزوار من فهمه.

سنتناول في هذا الدليل بعض المفاهيم الأساسية التي يمكنك تطبيقها على كتابتك لجعلها متاحة للجميع.

ملخص الإرشادات أدناه:

• عند إدراج صور في المقالات، أضف دائمًا “نصًا بديلًا” (alt text) يصف الصورة للأشخاص الذين لا يستطيعون رؤيتها.
• عند تضمين مقطع فيديو أو صوت، قم بتضمين ملخص لمحتواه داخل نص المقال.
• اكتب نص الروابط بحيث يمكن لأي شخص فهم إلى أين يؤدي الرابط دون الحاجة لقراءة الجملة كاملة.
• استخدم عناوين (HTML) لتنظيم المستندات الطويلة.
• استخدم التنسيق الغامق (bold)، والمائل (italic)، والقوائم (lists) لتنسيق النص، ولكن لا تستخدم أبدًا التسطير “underline” بغرض التأكيد.

إضافة نص بديل (alt text) للصور

“النص البديل” هو حقل موجود في وسم <img> يُستخدم عندما لا يتمكن المستخدم من رؤية الصورة، كما هو الحال عند استخدام أداة تحويل النص إلى كلام للتنقل الصوتي.

يُعد النص البديل شكلًا من أشكال الرعاية السردية: إنها طريقتنا لضمان بقاء معنى الصورة متاحًا، بغض النظر عن الطريقة التي يرى بها الشخص العالم.

يجب أن تحتوي كل صورة في أي مقال على جلوبال فويسز على نص بديل مفصل، وعند ترجمة المقالات، يجب ترجمة هذه النصوص البديلة إلى اللغة المحلية.

يمكنك تعديل النص البديل في النافذة المنبثقة “إضافة وسائط (Add media)”، أو عن طريق النقر على الصورة كما تفعل لتعديل التسمية التوضيحية.

في جلوبال فويسز (وفي ووردبريس بشكل عام)، يمكنك بسهولة إضافة نص بديل باستخدام حقل “النص البديل (Alt text)” الموجود في قائمة إضافة وسائط (Add Media) المنبثقة، أو عن طريق النقر على الصورة في المحرر المرئي، ثم استخدام حقل “النص البديل (Alternative text)”.

لمراجعة أي مقال أو ترجمة والتأكد من أن جميع الصور تحتوي على نص بديل صحيح، اتبع نفس العملية: انقر على كل صورة في المقال، ثم انقر على أيقونة القلم الرصاص لتعديلها، وتأكد من أن الصورة تحتوي على نص بديل مفيد ومكتوب باللغة الصحيحة ✅

النص البديل مقابل التسمية التوضيحية (Caption)

لاحظ أن النص البديل يختلف ومنفصل تمامًا عن التسمية التوضيحية! فبينما تكون التسمية التوضيحية هي النص الذي يصاحب الصورة عند عرضها، فإن النص البديل يحل محل الصورة في حال فقدانها أو عدم ظهورها. يجب أن تحتوي الصور عادةً على كليهما، ويجب أن يكونا مكملين لبعضهما البعض بدلًا من تكرار نفس المعلومات.

أمثلة على النصوص البديلة

النص البديل: رجل يرتدي سترة صوفية يقف وقت الغروب وخلفه قمم جبلية مذهلة مغطاة بالثلوج.

النص البديل: جهاز كمبيوتر محمول (لابتوب) موضوع على طاولة في مطعم بجوار نظارة، ودفاتر ملاحظات، ومشروب أنيق في كوب بلاستيكي. يظهر على شاشة اللابتوب موقع جلوبال فويسز باللغة العربية.

النص البديل: مجموعة من الأشخاص يجلسون على الأرض حول لوحة ملصقات. اللوحة مغطاة بأوراق ملاحظات لاصقة وأقلام تحديد.

ماذا يجب أن نكتب في النص البديل؟

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

طالما أنك تضع شيئًا لمساعدة القارئ على مواكبة المقالة وعدم تفويت أي تفاصيل مهمة، فستكون قد حسنت من تجربته بشكل كبير!

كما ترى في لقطة الشاشة أعلاه، يتضمن ووردبريس رابطًا مفيدًا: تعرف على كيفية وصف الغرض من الصورة. يُعد هذا الدليل ممتازًا ومفصلًا حول نوع النص البديل الذي يجب استخدامه للصور المختلفة. ومع ذلك، قد يكون دسمًا بعض الشيء، لذا سأحاول تبسيطه أدناه.

أعتقد أن هذا الملخص المأخوذ من مقال ديفيد أوبراين “توفير بدائل نصية للمحتوى غير النصي” يُعد بداية جيدة:

• استخدم سمات نص بديل فارغة alt="" للصور الزخرفية (decorative).
• بالنسبة للصور الإعلامية (informative) أو المعقدة، استخدم السياق والتسميات التوضيحية وسمات النص البديل معًا لمنح جميع المستخدمين إمكانية الوصول إلى نفس المعلومات.
• بالنسبة للصور الوظيفية (functional)، مثل أيقونات البحث أو الشعارات التي ترتبط بالصفحة الرئيسية لموقع ويب، صف وظيفة الرابط في سمة النص البديل.

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

تُعد “الصور الوظيفية” نادرة جدًا أيضًا في مقالات جلوبال فويسز، على الرغم من أن لدينا القليل منها على موقعنا، مثل أيقونة العدسة المكبرة في نموذج البحث، أو أيقونات وسائل التواصل الاجتماعي في أزرار المشاركة. بالنسبة لهذه الصور، يجب أن يكون النص البديل هو الكلمات التي قد تستخدمها لو كانت زرًا نصيًا، مثل “بحث (Search)” أو “مشاركة على فيسبوك (Share on Facebook)”.

تندرج جميع الصور الأخرى تحت فئة الصور الإعلامية، بما في ذلك أي صورة فوتوغرافية أو كولاج (تجميع لعدة صور). في هذه الحالات، يجب أن يكون النص البديل وصفًا للصورة ينقل معناها.

كتابة نصوص بديلة ممتازة

إذن، ما هو معنى الصورة؟ عليك استخدام عقلك البشري الرائع لتحديد ذلك! كل صورة فريدة من نوعها، وكذلك معنى هذه الصورة داخل النص.

في بعض الحالات، يكون وصف التفاصيل المادية لما يتم عرضه أمرًا مهمًا، وفي حالات أخرى، قد لا تكون التفاصيل الحرفية مهمة على الإطلاق. إذا كانت مشاعر الصورة أساسية لمعناها، صفها. إذا كانت الألوان أو الموقع هي الأهم، فصفها هي أيضًا، أو اكتفِ بها.

نصيحة عملية هي ألا تبدأ النص بعبارة “تُظهر الصورة” أو “في هذه الصورة…”. تُشير برامج قراءة الشاشة بالفعل إلى أنها على وشك الإعلان عن صورة، لذا فإن ذلك سيكون بمثابة معلومات متكررة.

الشيء المهم هو أن نحاول مساعدة شخص لا يستطيع رؤية الصورة في الحصول على الانطباع الذي كان سيحصل عليه لو رأى الصورة، والأهم من ذلك كله هو بذل الجهد!

قراءات إضافية حول كتابة نصوص بديلة ممتازة:

• توفير بدائل نصية للمحتوى غير النصي
• كتابة نص بديل ممتاز: العاطفة تهم
• دليل W3C للنصوص البديلة للصور الإعلامية مع العديد من الأمثلة

تلخيص الفيديو والصوت المضمن في النص

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

ببساطة: كلما قمت بتضمين مقطع فيديو أو صوت في المقال، يجب عليك دمج وصف لمحتواه في النص.

من الواضح أن هذا لا يعني إنشاء نص كتابي كامل (transcript) لكل فيديو، أو وصف تركيبة كل مشهد مرئي. بل يعني تكريس بضع كلمات لـ أهمية الفيديو، وما الذي سيتعلمه المشاهدون إذا شاهدوه.

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

تذكر أنه عندما يتعلق الأمر بالفيديو والصوت، هناك الكثير من الأسباب التي قد تمنع القارئ من الوصول إليهما بخلاف الإعاقات. فقد يتصفحون من خلال هاتف محمول ولا يملكون بيانات كافية لتنزيل مقطع فيديو، أو قد يكون الملف الصوتي الذي نشير إليه قد تم حذفه أو أصبح غير متاح لأي سبب آخر. إضافة ملخصات لتضمينات الوسائط المتعددة داخل نص المقالات يحمي جميع أنواع القراء، سواء أولئك الذين لديهم احتياجات إمكانية الوصول في الحاضر، أو أي شخص آخر في المستقبل إذا ما توقفت تلك الوسائط عن العمل.

يجب أن يصف نص الرابط الهدف

هناك اعتبار مهم آخر لإمكانية الوصول وهو النص الذي نستخدمه عند إنشاء الروابط. غالبًا ما يتنقل الزوار الذين يستخدمون أدوات إمكانية الوصول بالقفز من رابط إلى آخر في المستند، وفي العديد من الحالات، سيكون أول نص “يقرأونه” هو نص الرابط، لذا من الضروري أن تكون جميع الروابط مصنفة بوضوح وتساعد الزوار على فهم إلى أين سينتقلون إذا قرروا النقر عليها.

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

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

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

هناك الكثير مما يجب التفكير فيه هنا، ولكن الدرس المستفاد الرئيسي هو تضمين معلومات أكثر في الرابط نفسه، بدلًا من النص المحيط به، ومحاولة مساعدة القراء على فهم إلى أين سيتم توجيههم إذا نقروا عليه. غالبًا ما يعني هذا أن المستند ككل سيكون أطول من ذي قبل، ولكن في المقابل، سيكون من الأسهل قراءته وفهمه، وفي حالة الصحافة، ستكون مصادره ومراجعه أكثر وضوحًا.

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

للحصول على المزيد من الأمثلة والتفاصيل، تحقق من هذا المقال: أتقن فن كتابة نص الرابط الذي يسهل الوصول إليه.

استخدام العناوين لتنظيم المستندات

هناك طريقة أخرى لمساعدة جميع القراء على التنقل في محتوانا بسهولة وهي استخدام العناوين مثل <h3> و <h4> بشكل صحيح.

يجب استخدام العناوين لتجميع المحتوى وإنشاء الأقسام، بحيث تعكس الأرقام الأعلى أقسامًا فرعية أصغر فأصغر (أي أن h4 هو قسم فرعي من h3).

تعتبر توجيهات W3C حول العناوين معقدة بعض الشيء، ولكن لأغراض كتابة المقالات في جلوبال فويسز، فإن الأمر بسيط للغاية: استخدم <h3> لإنشاء أقسام في مقالاتك ذات عناوين مفيدة، وإذا كنت بحاجة إلى أقسام فرعية أصغر، فاستخدم <h4> داخل أقسام <h3> لإنشاء تلك الأقسام الفرعية.

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

إذا كنت تريد فقط نصًا أكبر لا يشير إلى قسم فرعي من المقال، فيُرجى استخدام الوسم <big>، أو تنسيق الاقتباس البارز .pull-quote من قائمة التنسيقات (Formats) في المحرر المرئي.

استخدام الخط الغامق والمائل بدلًا من “التسطير”

يجب أن يكون النص المسطر على الويب رابطًا تشعبيًا دائمًا. على الرغم من أنه قد يكون من المغري أحيانًا تسطير نص للتأكيد أو لأسباب تتعلق بالتنسيق، إلا أنه لا يجب عليك فعل ذلك أبدًا!

إذا كنت ترغب في وضع تأكيد على قسم من النص، فيجب عليك استخدام التنسيقات الغامقة (bold) أو المائلة (italic) بدلًا من ذلك. ستعمل زرا B و I في محرر ووردبريس على تطبيق وسوم HTML القياسية التي تحتاجها (<strong> للنص الغامق و <em> للمائل).

يُعد الخط الغامق والمائل من المفاهيم التنسيقية العالمية التي تعتاد عليها أدوات إمكانية الوصول. سيتمكن المستخدمون الذين يستمعون إلى نسخة محولة من النص إلى كلام من المقال من سماع الفرق عندما تستخدمها بشكل صحيح.

استخدام قوائم HTML كلما أمكن ذلك

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