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

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

Alice Boxhall

Dave Gash

Meggin Kearney

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

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

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

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

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

لنكرّر أولاً نقطة سابقة: ترتيب DOM مهمة، ليس فقط من أجل ترتيب التركيز ولكن لترتيب قارئ الشاشة. أثناء تجربة برامج قراءة الشاشة مثل VoiceOver وNVDA وJAWS وChromeVox، ستجد قائمة العناوين التالية ترتيب 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 المتعدّدة والمتكررة. توفير طريقة أوضح ووصفي للتعبير بشكل بديهي عن بنية الصفحة لكل من المؤلفين والقراء.