المعنى والتنقل في المحتوى

دور الدلالات في التنقل في الصفحة

أليس بوكسهول
أليس بوكسهول
ديف غاش
ديف غاش
ميجين كيرني
ميجين كيرني

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

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

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

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

استخدام العناوين بفعالية

أولاً، دعنا نكرّر نقطة سابقة: مسائل ترتيب كائن المستند (DOM)، ليس فقط بشأن ترتيب التركيز ولكن أيضًا لترتيب قارئ الشاشة. أثناء تجربة برامج قراءة الشاشة مثل VoiceOver وNVDA وJAWS وChromeVox، ستجد أن قائمة العناوين تتبع ترتيب DOM بدلاً من الترتيب المرئي.

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

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

  • يشير 1.3.1 إلى "استخدام الترميز الدلالي لتحديد العناوين"
  • يشير القسم 2.4.1 إلى بنية العناوين كأسلوب لتجاوز مجموعات المحتوى.
  • 2.4.6 يناقش بعض التفاصيل لكتابة عناوين مفيدة
  • 2.4.10 ينص على "تم تخصيص الأقسام الفردية من المحتوى باستخدام العناوين، حيثما كان ذلك مناسبًا"

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

<style>
    .sr-only {
    position:absolute;
    left:-10000px;
    top:auto;
    width:1px;
    height:1px;
    overflow:hidden;
    }
</style>

<h2 class="sr-only">This heading is offscreen.</h2>

بالنسبة للتطبيقات المعقدة، يمكن أن تكون هذه طريقة جيدة لاحتواء العناوين عندما لا يتطلب التصميم المرئي مساحة لعنوان مرئي أو يحتوي عليها.

خيارات التنقّل الأخرى

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

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

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

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

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

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

أحد الأخطاء الشائعة الذي ترتكبه برامج قراءة الشاشة هو طريقة اللفظ. على سبيل المثال، قد يلفظ قارئ الشاشة "Udacity" بالاختصار "oo-dacity"، أو قد يقرأ رقم هاتف كعدد صحيح كبير، أو قد يقرأ نصًا كبيرًا كما لو كان اختصارًا. ومن المثير للاهتمام أن مستخدمي برامج قراءة الشاشة اعتادوا تمامًا على هذه الميزة ويأخذونها في الاعتبار.

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

يمكن للقراء استخدام الدوّار لعرض قائمة المعالم. تساعد هذه القائمة القرّاء في العثور على المحتوى الرئيسي ومجموعة من معالم التنقّل التي توفّرها عناصر HTML المرجعية.

قدّم HTML5 بعض العناصر الجديدة التي تساعد في تحديد البنية الدلالية للصفحة، بما في ذلك header وfooter وnav وarticle وsection وmain وaside. وتوفر هذه العناصر على وجه التحديد أدلة هيكلية في الصفحة دون فرض أي تصميم مضمّن (وهو ما يجب عليك فعله باستخدام CSS على أي حال).

تحلّ العناصر الهيكلية الدلالية محل قوالب div المتعددة المتكررة، وتوفّر طريقة أوضح ووصفية أكثر للتعبير بشكل بديهي عن بنية الصفحة لكل من المؤلفين والقرّاء.