نظرة على معايير الويب ARIA وإمكانية الوصول إلى تطبيقات HTML
يحتاج الويب المفتوح والشامل حقًا إلى تقنيات تتيح للمستخدمين المعاقين الذين يعتمدون على التقنيات المساعدة الاستمتاع بمحتوى الويب الديناميكي وتطبيقات الويب الحديثة. تهدف معايير الويب الخاصة بإمكانية الوصول إلى W3C إلى نشر الويب بتطبيقات الوصول إلى الإنترنت الغنية (ARIA) والتي يمكن للمستخدمين ذوي الإعاقة استخدامها بكفاءة.
ARIA هو أحد معايير وإرشادات إمكانية الوصول العديدة المنشورة من قبل Web Accessibility Intitiative (WAI). يوفر ترميزًا إضافيًا يمكن إدراجه بسهولة في مستندات HTML. WAI-ARIA هو عبارة عن حل عبر الأجهزة يستهدف منصة الويب المفتوحة ، لذلك لا تفكر فقط في المواقع الإلكترونية ، ولكن أيضًا حول الألعاب والترفيه الرقمي والرعاية الصحية والجوال وأنواع أخرى من التطبيقات.
في هذا المنشور ، سوف نلقي نظرة على كيفية إضافة إمكانية الوصول إلى مستندات HTML الخاصة بك بمساعدة معايير WAI-ARIA.
إطار ARIA
لا يسمح بناء جملة HTML للمطورين دائمًا بوصف العناصر بشكل صحيح ، وتحديد أدوارهم ، وتحديد العلاقات بينهم. في حين أن هذه نادراً ما تمثل مشكلة للزائرين الذين يمتلكون حواسهم بالكامل ، إلا أنها قد تعيق مستخدمي التكنولوجيا المساعدة عن فهم ما يحدث على الشاشة واستكشاف خياراتهم.
هذه هي النقطة التي يأتي فيها ARIA لمساعدتك ، حيث أنه من الممكن تحديد الغرض من العناصر المختلفة بمساعدة أدوار تاريخية, ووصف طبيعتهم مع الصفات البادئة. للسمات ذات الأغنية السابقة نوعان: الخصائص التي تصف الميزات التي من غير المرجح أن تتغير خلال دورة حياة الصفحة ، و تنص على التي توفر معلومات حول الأشياء التي قد تتغير بشكل متكرر بسبب تفاعل المستخدم.
أدوار تاريخية
أدوار تاريخية هي الأشكال الأكثر شهرة لنموذج أدوار ARIA (غيرها من الأدوار المجردة ، وأدوار عنصر واجهة المستخدم ، وأدوار بنية المستند). أدوار المعالم تمكن المطورين من تحديد حجم كبير المناطق المحسوسة على صفحة الويب التي قد يرغب مستخدمو التكنولوجيا المساعدة في الوصول إليها بسرعة.
هناك 8 أنواع من أدوار المعالم ARIA ، ويجب إضافتها كسمات إلى علامات HTML ذات الصلة.
دور =”راية”
الغرض من دور الشعارات هو أن يستخدم بشكل أساسي للمحتوى المرتبط بالموقع بأكمله ، وليس فقط للصفحات الفردية. تتم إضافته عادةً كسمة إلى العنوان الرئيسي للموقع للشعار ومعلومات مهمة أخرى على مستوى الموقع. من المهم أن تتمكن من استخدام دور الشعارات مرة واحدة فقط في أي مستندات أو تطبيقات HTML.
دور =”الأساسية”
يرتبط دور المعالم الرئيسي بالمحتوى الرئيسي للوثيقة. لا يمكن استخدامه أكثر من مرة في أي صفحة HTML. وعادة ما يتبع يهدف دور التنقل إلى الإشارة إلى منطقة تحتوي على عناصر تنقل مثل الروابط والقوائم على الموقع. يصف دور المعالم التكميلية المحتوى الإضافي المرتبط بالمحتوى الرئيسي للموقع. يجب أن توضع على المستوى المماثل في التسلسل الهرمي DOM مثل يبلغ دور contentinfo وكلاء المستخدم عن وجود منطقة يمكن العثور على أنواع مختلفة من البيانات الوصفية ، مثل معلومات حقوق النشر والبيانات القانونية وبيانات الخصوصية. يستخدم عادةً لتذييل الموقع. يشير دور معلم النموذج إلى نموذج ينتظر إدخال المستخدم. لأشكال البحث التي يجب عليك استخدامها دور البحث واضح تمامًا ، فهو يهدف إلى مساعدة التقنيات المساعدة في تحديد وظيفة البحث لموقع الويب. يمكنك استخدام دور معلم التطبيق لمنطقة ترغب في إعلانها كتطبيق ويب ، وليس كوثيقة ويب. لا يُنصح بتضمينه في مواقع الويب التقليدية ، لأنه يلمح إلى التقنيات المساعدة للتبديل من وضع التصفح العادي إلى وضع استعراض التطبيقات. يجب عليك فقط استخدام هذا الدور المميز بعناية فائقة. بينما تمكنك الأدوار من تحديد معنى علامات HTML ، فإن الحالات والخصائص تزود المستخدم بمعلومات إضافية حول كيفية التفاعل معها. يتم وضع علامة على كل من الولايات والخصائص الصفات البادئة مع بناء الجملة aria- *. أكثر سمات ARIA المعروفة هي على الأرجح خاصية aria المطلوبة وحالة aria التي تم فحصها. الأغنية المطلوبة هي خاصية لأنها ميزة دائمة لعنصر إدخال (بمعنى أنه يجب على المستخدم تعبئته) ، في حين أن التحقق من aria هو a حالة لأن مربع الاختيار قد يغير قيمته بشكل متكرر بسبب تفاعل المستخدم. تتخذ الدول والخصائص أحيانًا قيمًا رمزية (مجموعة محدودة من القيم المحددة مسبقًا) ، على سبيل المثال يمكن أن تحتوي الخاصية aria-live على 3 قيم مختلفة: إيقاف, مؤدب, جازم. يبدو بناء الجملة في هذا المثال كما يلي: في حالات أخرى ، يتم تمثيل قيم السمات المميزة بأريا سلاسل, أعداد, الأعداد الصحيحة, مراجع الهوية أو خطأ صحيح القيم. استخدم سمات العلاقة للإشارة إلى العلاقات بين العناصر المختلفة على موقعك ، والتي لا يمكن تحديدها بطريقة أخرى من بنية المستند. على سبيل المثال بعد تعيين دور معلم ARIA لمنطقة يمكن إدراكها على صفحة HTML ، يمكن أن يساعد التقنيات المساعدة كثيرًا إذا قمت بتغيير حالات وخصائص بادئة ARIA وفقًا للأحداث التي تحدث على الشاشة. قد يكون هذا أمرًا بالغ الأهمية حيث يتعين على المستخدمين التفاعل مع الموقع ، على سبيل المثال ملء نموذج أو تشغيل استعلام بحث. تتمثل القاعدة العامة لتصميم إمكانية الوصول في أن الحالة الحالية لواجهة المستخدم تحتاج دائمًا إلى إدراكها من خلال التقنيات المساعدة. على سبيل المثال ، إذا اختار المستخدم خيارًا في نموذج ما ، فيجب أن يظهر محددًا للتقنيات المساعدة أيضًا. يمكن تحقيق ذلك بسهولة من خلال استخدام الحالة المختارة من aria مع بناء الجملة التالي: يمكن أن يمنحك دليل ممارسات التأليف WAI-ARIA الخاص بـ W3C العديد من الأفكار الرائعة الأخرى حول كيفية تنسيق الواجهات المرئية والوصولية لموقعك بشكل صحيح. قد يكون استخدام أدوار وسمات ARIA ضروريًا في بعض الأحيان. عند استخدام علامات الدلالية من HTML5 مثل على سبيل المثال ليس من الضروري استخدام شكل دور تاريخي لتحديد حتى إذا كنت قد أضفت بالفعل مخفي سمة HTML لإدخال نموذج ، ليس من الضروري إضافة الأغنية خفية الحالة ، حيث يتضمن المتصفح بشكل افتراضي.. تمت إضافة الأخير إلى المواصفات W3C بغرض تعيين الأساسية دور ARIA البارز لعنصر HTML الدلالي. دور =”التنقل”
دور =”مكمل”
دور = "الرئيسية". المشاركات ذات الصلة والمقالات الشائعة وآخر التعليقات هي أمثلة نموذجية على المحتوى التكميلي المستقل.دور =”contentinfo”
دور =”شكل”
دور = "بحث" في حين أن.دور =”بحث”
دور =”الوضعية”
الدول والممتلكات
بناء جملة السمات الباريئة
كيفية الاستفادة من الدول والممتلكات ARIA
1. بناء العلاقات بين العناصر مع سمات العلاقة
الأغنية-labelledby تحدد الخاصية العنصر الذي يقوم بتسمية العنصر الحالي.الأغنية-labelledby - من بين أشياء أخرى كثيرة - يمكن ربط العناوين بمناطق ARIA البارزة بالطريقة التالية:هذا عنوان
المحتوى الرئيسي… 2. مزامنة الدول والخصائص مع دورة حياة العنصر
3. تطابق البصرية والواجهات التي يمكن الوصول إليها
.لا تبالغ في استخدام ARIA
أو , تضيف متصفحات الويب الحديثة دلالات ARIA المناسبة افتراضيًا. في هذه الحالة ، لا معنى لتعيين الأدوار المميزة لأريا بشكل منفصل. جزء. بدلا من ال بناء جملة انها كافية تماما لاستخدام فقط . من غير الضروري أيضًا استخدام السمات الأصلية لـ HTML جنبًا إلى جنب مع سمة ARIA المناسبة.
