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

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

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

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

مثال:

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

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

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

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