HTML5 Attributes: data- iyo aria
HTML5 waxay la timid sifooyin cusub oo awood badan, kuwaas oo fududeeya horumarka webka iyo is-dhexgalka isticmaalaha. Labo ka mid ah sifooyinkaas muhiimka ah waa data-* iyo aria-*, kuwaas oo ka caawiya horumariyeyaasha inay si fiican u maareeyaan xogta iyo helitaanka (accessibility) ee bogagga webka.
 |
| HTML5 Attributes |
1. data- Attributes*
Sifooyinka data-* waa hab lagu kaydiyo xog gaar ah oo aan la xirin HTML caadiga ah ama CSS, si loo isticmaalo JavaScript. Waxay u oggolaanayaan horumariyeyaasha inay kaydiyaan macluumaad gaar ah oo la xiriira walxaha (elements) ee HTML.
 |
| HTML5 Attributes |
Qaab-dhismeedka data- attribute:*
Sifooyinka data-* waxay bilaabmaan erayga data-, waxaana lagu darayaa magac gaar ah oo uu horumariyuhu u bixiyo. Tusaale ahaan:
<div id="product" data-id="1234" data-category="electronics">
Laptop cusub
</div>
Xogtan waxaa si fudud looga heli karaa JavaScript iyadoo la adeegsanayo dataset:
const product = document.getElementById("product");
console.log(product.dataset.id); // 1234
console.log(product.dataset.category); // electronics
Faa'iidooyinka data- attributes:*
- Waxay fududeeyaan kaydinta xogta aan toos ugu jirin HTML.
- Waxay gacan ka geystaan in si sahlan loola falgalo JavaScript.
- Uma baahna wax raad ah oo ku saabsan styles ama muuqaalka bogga.
2. aria- Attributes*
Sifooyinka aria-* (Accessible Rich Internet Applications) waa qayb muhiim ah oo ka mid ah HTML5, waxaana loo isticmaalaa in lagu hagaajiyo helitaanka (accessibility) dadka laxaadka la'. Sifooyinkaan waxaa loogu talagalay in ay caawiyaan dadka isticmaala qalabka akhrinta codka (screen readers) si ay u fahmaan macluumaadka bogga.
 |
| HTML5 Attributes |
Tusaale aria- attributes:*
<button aria-label="Xiro menu">☰</button>
Sifada aria-label waxay sheegaysaa sharaxaad rasmi ah oo screen readers u akhrin karaan, taasoo u sahlaysa dadka indhoolayaasha ah inay fahmaan waxa button-ka sameynayo.
Waxaa kale oo jira aria-expanded oo muujinaya in menu uu furan yahay ama xiran yahay:
<button aria-expanded="false">Show More</button>
Haddii menu la furo, waxaa loo beddeli karaa true si screen readers u ogaadaan in menu-ga la furay.
Faa'iidooyinka aria- attributes:*
- Waxay ka dhigaan website-ka mid heli kara (accessible) dadka laxaadka la’.
- Waxay caawiyaan screen readers si ay u fahmaan nuxurka bogga.
- Waxay wanaajiyaan waayo-aragnimada isticmaalaha ee dadka naafada ah.
Gabagabo
Sifooyinka data-* iyo aria-* waxay muhiim u yihiin horumarka casriga ah ee HTML5. Sifooyinka data-* waxay fududeeyaan kaydinta xogta si sahlan loogu isticmaalo JavaScript, halka aria-* ay wanaajiso helitaanka dadka isticmaala qalabka akhriska codka. Isticmaalka saxda ah ee sifooyinkan wuxuu hagaajin karaa waayo-aragnimada isticmaalaha iyo shaqeynta bogagga webka.