Students Save 30%! Learn & create with unlimited courses & creative assets Students Save 30%! Save Now
Advertisement
  1. Code
  2. Accessibility
Code

التدريب العملي على نغم: عناصر الصفحة الرئيسية والتنقل القياسية

by
Length:MediumLanguages:
This post is part of a series called Web Accessibility With ARIA.
Site Accessibility: Getting Started With ARIA
Hands-on With ARIA: Accessibility for eCommerce

Arabic (العربية/عربي) translation by Diangr (you can also view the original English article)

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

 هذه المجموعة من المعايير التي تحتفظ بها W3C (World Wide Web Consortium) تمنحك أفضل ما في العالمين عن طريق إضافة عدد من السمات التي تسمح بتوسيع HTML بطرق مفيدة. هنا، سوف نسير من خلال ما الأغنية، نرى كيف يمكن الاستفادة من موقع على شبكة معلوماتية، والذهاب من خلال حالة استخدام خطوة بخطوة مع أمثلة التعليمات البرمجية. دعونا نبدأ!

أساسيات نغم

 ARIA (أو WAI-ARIA في بعض الأحيان) هي اختصار لمجموعة من معايير إمكانية الوصول ، يطلق عليها Web Accessibility Initiative - Accessible Rich Internet Applications. يمكنك الاطلاع على المزيد حول أسس ARIA في مقالي السابق ، ولكن دعنا نتناول بعض أركانها الآن.

تعريف علاقات غير تقليدية

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

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

نغم يسمح لك لربط عناصر HTML معا باستخدام سمات إضافية لتمثيل هذه الأنواع من عناصر التحكم.

تصنيف عنصر غير جامدة

عيب آخر من إتش تي أم ال هو قدرته على فصل هيكل عن قصد.

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

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

إنشاء مناطق تاريخية

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

حالة الاستخدام: الصفحة الرئيسية للأعمال التجارية الصغيرة

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

Example Page Wireframe
السلكي الصفحة ونحن سوف يكون وضع العلامات

وتوخياً للوضوح، يتم تجريده التعليمة البرمجية سوف نعمل مع أسفل، مع فئات CSS وإزالة أي وظيفة من نظام الإدارة الوظيفية.

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

  • الملاحة
  • المحتوى
  • الشريط الجانبي
  • أشكال الاتصال
  • عناصر واجهة المستخدم المتخصصة

وفي حالتنا، يبدو مثل هذا:

Wireframe broken into sections
سوف نعمل مع المقاطع

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

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

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

الملاحة

في هذا المثال، ستلاحظ أن لدينا عدد قليل من أنواع الملاحة. الأولى قائمة كما نشاهد في معظم المواقع، سرد بعض الصفحات في الموقع. مباشرة أدناه هي قائمة أصغر يحتوي على خيارات للمستخدمين.

 نريد تمييزها بخاصية "role="navigation حتى يمكن اختيارها بسهولة كقوائم الموقع. هذا يؤدي إلى السؤال: هل يجب تجميعهم في معلم ملاحي واحد ، أو وضع علامة كمعلمين منفصلين؟

للإجابة على هذا السؤال في المشاريع الخاصة بك، يمكنك عادة ما تسأل نفسك سؤالين:

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

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

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

الآن، نحن التعليق مع بعض المعالم.

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

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

منطقة المحتوى

الآن فصاعدا إلى منطقة محتوى. هنا، سوف تكون مناسبة الحاوية التي تحمل كامل المحتويات الرئيسية مع "role="main. مرة أخرى، على سبيل المقارنة، هنا هو رمز كاتب لنا.

وهنا ما يبدو وكأنه بعد أن نضيف التاريخي "main".

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

أولاً، أننا سوف تأخذ الرعاية للصورة بوصفها زر بإضافة دور "button":

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

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

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

الشريط الجانبي

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

هنا هو علامة البدء للشريط الجانبي:

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

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

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

  • معلما "navigation"
  • بدور "menu" للحاويات القائمة
  • أدوار "menuitem" لكل بند من البنود المتداخلة

هنا ما يبدو وكأنه لدينا الشريط الجانبي النهائية:

التعامل مع أشكال الاتصال

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

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

  2. تعيين أدوار مطابقة للعناصر. النماذج منطقة مشتركة للنوايا وتعريفات HTML لتكون غير متطابقة. إضافة في أدوار ARIA حيثما كان ذلك ضروريا، لا سيما عندما يتعلق الأمر بخانات الاختيار ومربعات التمرير وتلميحات الأدوات والعناصر الأخرى التي يمكن أن تنفذ بطرق متعددة.

  3.  تطابق التسميات مع العناصر المناسبة. يعالج HTML هذا بطريقة أساسية ، مما يسمح لك باستخدام  <label> لربط تسمية بإدخال.  يمكن أن تحتوي النماذج بسهولة على بنية أكثر تعقيدًا تمنع ذلك من العمل ؛ لحسن الحظ يمكننا إصلاح ذلك مع السمة aria-labelledby.

 دعنا نلقي نظرة على شكل الشفرة المحدثة:

 اختبار التنفيذ الخاص بك

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

 يتكامل كلاهما مع أدوات مطوّري البرامج في Chrome للسماح بإجراء فحص في الوقت الفعلي لإمكانية الوصول إلى موقعك. تحتفظ W3C أيضًا بقائمة أكبر من الأدوات لإمكانية الوصول.

 جعل الويب أكثر سهولة

 لدينا موقع wireframe الآن لديه ARIA! على الرغم من أنه لا يزال هناك الكثير من ARIA لاستكشافها ، إلا أن لديك الآن معرفة كافية لجعل جزءًا كبيرًا من المواقع التي تعمل عليها أكثر سهولة.  علاوة على ذلك ، يعد موقعك أيضًا أكثر استعدادًا للتعامل مع أي عدد من تقنيات عبور الإنترنت الجديدة التي قد تنشأ.

 هل هناك جانب آخر من جوانب ARIA تود أن نكتشفه؟ لديك أسئلة حول هذه المقالة؟ لا تتردد في إضافتها في التعليقات أدناه!

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.