ماهي data-toggle و aria-hidden

ssaleh_KSA

السلام عليكم

ياجماعة الخير أنا تعلمت تطوير الويب من مدرسة Elzero web school, لاكن في اشاء كثيرة ماهي مشروحة عنده مثل :

  • aria-hidden

  • aria-label

  • data-toggle

  • data-target

.

.

.

الخ

ياليت لو احد يعرف ويشرحها لي أو يعطيني مواقع يشرحون فيها هالأشياء

تحياتي.

يرجى الدخول لحسابك أو تسجيل حساب لتستطيع إضافة تعليق
حساب جديد دخول

التعليقات

تستخدم الـdata-* لتخزين وحفظ بيانات قط تستخدم فيما بعد.

اما عن الـaria-* فهي تستخدم لما يعرف بقابليه الوصول 'accessibility' وهي اشياء تكتب لجعل قارئات الشاشه 'screen readers' قادرة علي وصف المواقع بشكل جيد للمستخدمين.

المقصود باستخدام aria-hidden هي منع قارئات الشاشه من قراءة العنصر اى تجاهله.

اما عن aria-label فهي لوصف العنصر وتقوم قارئات الشاشه بقراءة العنصر بما تحتويه قيمه الـaria-label وتتجاهل الكلام الذي يحتويه العنصر.

مثال:

   <button aria-label="close">X</button>

في هذا المثال سيري المستخدم العادي ان الـbutton يحتوي علي علامة X اى المقصود اغلاق ، ولكن عند استخدادم اى قارئ شاشه سيقرأ كلمه close ويتجاهل علامة الـX.

ستجد هنا مقاله كنت قد كتبتها عن هذا الموضوع:

وايضا ستجد هنا اسكريبت يقوم بفحص موقعك لتنبيهك علي الاخطاء في كود الـHTML :

بالنسبة لل data-*something هي خاصية جديدة في ال html5 تسمح لك بانشاء custom attributes لكي تستعملهم في وقت لاحق بالjavascript عن طريق الدالة data مثال لذلك

a href="#" data-target="#dropdown"> open dropdown/a

;div id="dropdown">.../div

وفي الجافاسكريبت

var target = $(this).data('target');

$('a').on('click', function(){

$(target).show();

});

يعني باختصار هي وسيلة لمساعدتك في جلب البيانات لتستخدمها في الجافاسكريبت

  • اما بخصوص ال aria فهى تساعد في مايخص ال accessibility يعني الناس الذين لديهم إعاقة ويستعملون اجهزة خاصة ك ال screen readers ستقوم تلك الاجهزة بقرائة تلك ال attributes الخاصة بال aria لتحسين تجربة الاستخدام لهم وتجعل الموقع اكثر قابلية للستعمال من طرفهم

وعليكم السلام ورحمة الله .

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

يجب ان تعرف التقنية التي تتعامل معها علي الاقل اسمها واختلاف كل تقنية او مكتبة او افريم وورك او لغة برمجة عن الأخري .

هذه الخصائص التي تكلمت عنها تابعة لأي فئة هل هي من لغة HTML ام جافاسكربت ام CSS ام مكتبة قمت باستخدامها في مشروعك !!! يجب ان تحدد ذالك لكي تجد الإجابة مفيدة :) .

هذه الخصائص التي ذكرتها لا اظنها موجودة في ال HTML بل هي خصائص خاصة ب افريم وورك bootstrap وتجد لها شرح هنا :http://getbootstrap.com/jav... .

فائدتها هو استخدام القيم في جافا سكربت ، وهي ليست اساسية في تطوير الويب لتجد لها شرح في كل مكان كما انك عندما تصل مراحل متقدمة لا تجد شروحات متقدمة في كل مكان بالتوفيق لك . .

اذا وصلت مرحلة متقدمة اذا تفضل

اقرأ المرجع الاول لمطوري الويب

شكراً للجميع فادتني تعليقاتكم كثيراً

تحياتي.