Table of Contents
التعريف بتطبيقات الإنترنت الأثرية المتاحة
(ج) إن تطبيقات شبكة الإنترنت ذات الصلة، هي مواصفات تقنية نشرها الاتحاد العالمي للشبكة العالمية (W3C) تُسد الفجوة بين الوصلات البينية الدينامية التي يقودها جافاسكريبت والتكنولوجيات المساعدة مثل قارئي الشاشات، وعروض العجلات، وبرامجيات التحكم الصوتي، وبدون نظام آريا، فإن الوصلات المركبة مثل الانقطاعات غير المرئية، والتفاعلات الشجرية،
وتكمن القيمة الأساسية للرابطة في قدرتها على إضافة المعنى الرسمي بأثر رجعي إلى عناصر من القانون الإنساني الدولي التي قد لا تنقل محليا دورها أو ولايتها، فعلى سبيل المثال، فإن أسلوب [يمثل أن الزر يظل حاوية عامة في شجرة الوصول ما لم يعطى ] ومناولة رئيسية مناسبة.
وتسير هذه المادة من خلال التنفيذ العملي للأبحاث مع جافاسكريبت، التي تشمل الأدوار، والولايات، والممتلكات، وإدارة السمات الدينامية، والتركيز، ومناولة اللوحات الرئيسية، والأنماط المشتركة، وفي كل خطوة، يولى التركيز على كتابة مدونة قواعد الإنتاج التي تحترم المواصفات الخاصة بالوكالة واحتياجات المستعملين في العالم الحقيقي.
دور الرابطة والدول والامتيازات
الأدوار: تحديد نوع الأرملة
(أ) أن يكون العنصر الميسر هو التكنولوجيا المساعدة التي يفترض أن يقوم بها أحد العناصر، فعلى سبيل المثال، يشير إلى أن العنصر هو فريق محتوى مرتبط بمثل هذه الأدوار، ويقع دور في عدة فئات: الأدوار المستهدفة (مثلاً، ، ، )، أدوار هيكلية (مثلاً:
الدول والامتيازات: الخصائص الدينامية
وتعطي الولايات الأفريقية الأمريكية سمات لهذا التغيير استجابة لتفاعل المستخدمين أو منطق التطبيق، وتشمل الدول المشتركة ما يلي:
- - يشير إلى ما إذا كان العنصر القابل للنقض مفتوحاً أو مغلقاً.
- - لضغ الأزرار التي تقطع على/خارج.
- - تستخدم في قوائم التذاكر أو صناديق القائمة أو الشبكات لعرض أي خيار يتم اختياره.
- - يشير إلى أن عنصراً لا يمكن تشغيله حالياً.
أما الاختبارات، فهي تميل إلى الاستقرار وتصف العلاقات أو العلامات، وتشمل الأمثلة [(FLT:21]] (نقاط إلى الهوية مكونة من عنصر يُحدِّثه التحكم بالنباتات) (يجمع بين علامة واضحة على شبكة ويدجي) و (توضح أن المنطقة ستستكمل ديناميا وينبغي رصدها بالمساعدة).
وتتولى شركة " جافاسكريبت " مسؤولية الحفاظ على هذه الصفات متزامنة مع الدولة التي تقوم عليها إدارة شؤون السلامة والأمن، وعندما يغير عمل المستخدم أو الحدث الزمني مذكرة التفاهم، يجب تحديث الخصائص المقابلة لها في الوكالة فوراً، وعدم القيام بذلك يؤدي إلى تجربة مفصَّلة في مجال الوصول حيث يمكن لقارئ الشاشة أن يعلنوا عن معلومات قديمة.
تنفيذ برنامج " آريا " مع شركة " جافاسكريب " :
إدارة المساهمات الديناميكية
وتتمثل مهمة الرابطة في تهدئة خصائص البووليان، والنمط التالي شائع بالنسبة للذكور القابل للتوسع، ونباتات الكشف، وأفرقة الاكورديون:
const trigger = document.getElementById('expand-trigger');
const target = document.getElementById('expandable-content');
trigger.addEventListener('click', () => {
const isExpanded = trigger.getAttribute('aria-expanded') === 'true';
trigger.setAttribute('aria-expanded', !isExpanded);
target.hidden = isExpanded;
});
(ج) يلاحظ أن سمة HTML ] مُهَزَّلة أيضاً، وهذا يضمن أن يكون المحتوى قد أُزيل حقاً من شجرة الوصول عندما ينهار وليس مُخفى بصرياً فحسب، وأن الاعتماد على خدمات الدعم المركزية وحدها لإخفاء المحتوى يمكن أن يتركه موضع تركيز أو قراءة من قِرّاء الشاشات.
وبالنسبة للأنواع الأكثر تعقيداً مثل لوحة التابوت، يجب إدارة الصفات المتعددة معاً، وعندما يتم اختيار شريط جديد، يفقد التافه الذي سبق اختياره ويختفي فريقه المرتبط به، في حين تصبح المكاسب التي تم اختيارها حديثاً وفريقه واضحة، ويجب أن يستكمل أيضاً [قائمة تال: 28] لإدارة التركيز.
استخدام للوحدة الدينامية
(مثلاً، يظهر حدوث تحديثات في البث الإخبارية أو خطأ في التحقق)، ولا يجوز لقراء الشاشة أن يعلنوا عن التغيير ما لم تكن المنطقة تحمل علامة . وتأخذ الممتلكات ثلاثة قيم: [[[التنبيه إلى:32]] [الخطأ في الاختبار] [الخط=33]] [الانذار/الأول] [الاستكمال]:35:
const liveRegion = document.getElementById('status-messages');
liveRegion.setAttribute('aria-live', 'polite');
function addMessage(text) {
const p = document.createElement('p');
p.textContent = text;
liveRegion.appendChild(p);
}
Important: The content must be appended or removed within the live region. Changing the inner HTML entirely may cause the change to be missed by some screen readers. Using or works reliably across browsers.
Focus Management with JavaScript
ويعتمد مستخدمو اللوحات الرئيسية على حلقة تركيز واضحة على الملاحة، وعندما يفتح جهاز الاتصال بالطرق، يجب نقل التركيز إلى الهاتف وحصره هناك إلى حين إغلاق القائمة، وعند إغلاق القائمة، ينبغي التركيز على العنصر الذي أثارها.
مثال على رقم هاتف موديال
function openDialog(dialogElement) {
dialogElement.removeAttribute('hidden');
dialogElement.setAttribute('aria-modal', 'true');
dialogElement.setAttribute('role', 'dialog');
// Focus the first focusable element inside the dialog
const firstFocusable = dialogElement.querySelector('button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])');
if (firstFocusable) {
firstFocusable.focus();
}
// Store the previously focused element
this.lastFocused = document.activeElement;
}
ويكفل تركيز التصفيق أن دورات التاب أو الشيفت + تاب لا تضغط إلا من خلال عناصر داخل الهاتف، ويمكن تحقيق ذلك بالاستماع إلى أحداث الخفض الرئيسية على جهاز الاتصال وإعادة توجيه التركيز إلى الطفل الأول أو الأخير الذي يمكن التركيز عليه عند الاقتضاء.
لوحة المفاتيح: الملاحة الجوية والصحراء:
(أ) لا يجوز لأي من هذه المنظمات أن تنقل سوى بيانات عن الظواهر الرملية؛ ولا توفر تلقائياً تفاعلاً على لوحة المفاتيح؛ ويجب على شركة جافاسكريبت أن تنفذ السلوك المتوقع لللوائح لكل نمط من أنماط استخدام الطاقة؛ وتشترط قائمة بيانات بالمفاتيح [(FLT:0)] لدليل ممارسات الترخيص لـ [APG]() أن تُدرج فيها [([43]
عدم تنفيذ الدعم المقدم من لوحة المفاتيح هو أحد أكثر حالات الفشل في الوصول شيوعاً، إذ لا يستجيب سوى لنقرات الفئران، أو قائمة بسحب وسحب تعمل إلا بملامسة، أو أداة لا تظهر إلا على هوفر تستبعد مستعملي الشاشة فقط وأجهزة الشاشة بالكامل.
دائماً ما يختبر الملاحه بدون فأر: ضمان وصول جميع العناصر التفاعلية عبر تاب، وهذا النظام المنطقي للتركيز يطابق مخطط الرؤية، وعدم منع أي فخ تركيز من ترك البارود.
نماذج مشتركة من طراز ARIA
1 - الاتفاق الممكن الوصول إليه
ويتألف الأكورديون من عدة نماذج للإفصاح، تحتوي كل منها على عنوان مع زر وورشة قابلة للتلف.
const accordionButtons = document.querySelectorAll('.accordion-button');
accordionButtons.forEach(btn => {
btn.addEventListener('click', () => {
const panel = document.getElementById(btn.getAttribute('aria-controls'));
const expanded = btn.getAttribute('aria-expanded') === 'true';
btn.setAttribute('aria-expanded', !expanded);
panel.hidden = expanded;
});
});
2 - التكملة الآلية
(]) وقائمة عامة (]) وخيارات () ويجب على شركة JavaScript أن تدير و كمفاتيح متحركة للمستعملين مع مفاتيح السهام.
3 - مدونة قواعد السلوك
يستخدم جهاز غلاف من الطرازات و، وعندما يكون مفتوحاً، ينبغي أن تكون بقية الصفحة غير مربوطة، وأن تركز في الداخل، و] تنطبق على الحاويات الشقيقة، ويغلق مفتاح الهروب الهاتفي.
اختبار تنفيذات الوكالة الدولية للطاقة الذرية
ولا يمكن استبدال الاختبارات باستخدام تكنولوجيا مساعدة حقيقية، ولكن الأدوات الآلية يمكن أن تلتقط العديد من المسائل في وقت مبكر، وتشمل أدوات تطوير الحشد الآن أفرقة الوصول التي تبين شجرة الوصول المحوسبة، وتُجري أجهزة دفاتر ، وتُظهر نماذج إمداد المروجين انتهاكات مثل الأخطاء المفقودة في ARIA، وقائمة الدور غير الصحيح، وتُحدِّد كذلك إشارات مُها.
وثمة ممارسة أساسية أخرى تتمثل في اختبار لوحة المفاتيح فقط: استخدام مفاتيح السهام في جميع الضوابط التفاعلية، واستخدام مفاتيح السهام في التربلات والجمعيات، وضمان عدم إمكانية الوصول إلى أي عنصر، ولا تضمن الوكالة وحدها إمكانية الوصول؛ والجمع بين الصفات الصحيحة، ومتعهدي اللوحات الرئيسية، ومنطق التركيز هو ما يجعل التطبيق قابلا للاستخدام الحقيقي.
أفضل الممارسات في مجال الإنتاج - ريا مع جافاسكريبت
- Prefer native HTML elements ] over ARIA roles whenever possible. A native is inherently focusable, readable, and conveys its role to assistive technology. Using for navigation links provides built-in keyboard handling and activation.
- Keep ARIA attributes in coincide] with the DOM state at all times. Use a consistent JavaScript pattern - such as a small utility function - to update attributes and visual state together. This reduces the risk of one type of update being missed.
- ]Use with caution]. Applying removes an element and all its children from the accessibility tree. This is useful for hiding off -screen content or decorative elements, but it should never be applied to focusable elements (owise screen reader users may encounter a focusable “ghos].
- Manage focus explicitly] whenever the UI changes dramatically. After a modal closes, return focus to the trigger blue. After a menu item is selected, return focus to the menu blue. JavaScript’s method must be called after the DOM update, often wrapped in or
- Provide clear labels] for every interactive element. Use when no visible label is present, or prefer ] to associate an existing label with the widget. Similarly, use to attach longer descriptions or instructions to complex widgets.
- (ب) اختبار مع مستخدمين حقيقيين [(FLT:1]] يعتمدون على التكنولوجيا المساعدة، ولا تستوعب الأدوات الآلية سوى نحو 30 إلى 40 في المائة من قضايا الوصول، ولا تقدر تغذية المستعملين لفهم ما إذا كان منطقك الخاص بوكالة البحوث الزراعية الدولية يترجم إلى تجربة صالحة للاستخدام.
الشلالات المشتركة إلى أفويد
ومن الأخطاء المتكررة تطبيق دور الوكالة على عنصر دون أن يقدم أيضاً التفاعل المتوقع على لوحة المفاتيح، مثلاً إعطاء ] ] ولكن لا يضيف ومعالج مُلحِّق للدخول/السلامة، ويستخدم آخر للحصول على تحديثات روتينية، مما يمكن أن يُبطل مستعملي القراء الشاشة.
وثمة مأزق آخر هو أدوار غير صحيحة، وينبغي أن يقتصر على الأطفال الذين لديهم ، ويجب أن يتحكم كل كتاب في ما يقابله . ويمكن أن يؤدي انتهاك هذه القواعد إلى تكنولوجيات مساعدة لإساءة تفسير الهيكل.
وأخيراً، ينبغي ألا تُحدث تغييرات دينامية دون بدء استخدام المستخدمين، وينبغي أن تقتصر سمات الوكالة والتركيز عليها على التحديث استجابة لإجراءات المستخدمين أو التغييرات التي يتوقعها المستخدم في الدولة، وأن تعيد تركيز عنصر ما تلقائياً بعد كل بضع ثوان أو تحديث مناطق كثيراً ما تخلق تجربة مقلقة.
خاتمة
بناء تطبيقات إلكترونية غنية يمكن الوصول إليها مع جافاسكوريبت ووكالة البحوث الزراعية الدولية هو نظام تقني والتزام بالتصميم الشامل، وتوفر الرابطة مجموعة من المواد السائلة التي تحول حاويات الحامض النووي العام إلى نباتات قابلة للتعرف، بينما تُدخلها شركة جافاسكريب إلى الحياة بسلوك دينامي، وملاحة رئيسية، وإدارة الدولة.
ويمكن للمطورين، من خلال اتباع الأنماط وأفضل الممارسات المبينة هنا، أن يستحدثوا تطبيقات على شبكة الإنترنت تعمل لصالح الجميع: اللمس والفئران واللوحة الرئيسية والشاشة ومستعملي مراقبة الصوت على حد سواء، ولا يمكن الوصول إليها بعد ذلك؛ وهي جزء لا يتجزأ من عملية تطوير نظام جافاسكريب، وللمزيد من القراءة، يتشاورون مع دليل الممارسات الرخصية W3C ARIA():