Ի՞նչ է սեմանտիկայի և հասանելիության (a11y) տարբերությունը։

Սեմանտիկան օգնում է մեքենաներին (բրաուզերներին, պարսկերներին, որոնողական ռոբոտներին) հասկանալ բովանդակության կառուցվածքը և իմաստը: Հասանելիությունը (a11y) նպատակ ունի, որ բովանդակությունը լինի հասկանալի և հարմար մարդկանց համար, ովքեր ունեն ֆիզիկական կամ կոգնիտիվ սահմանափակումներ և օգտագործում են օգնող տեխնոլոգիաներ:

Սեմանտիկ տեգեր

Սեմանտիկ HTML տեգերի օգտագործումը, ինչպիսիք են <article>, <nav>, <aside>, <footer>, <h1>-<h6>, տալիս է էջի տարրերին իմաստային նշանակություն: Օրինակ՝

<article>
  <h2>Հոդվածի վերնագիր</h2>
  <p>Հոդվածի տեքստը...</p>
</article>

Սա օգնում է բրաուզերներին ճիշտ մեկնաբանել փաստաթղթի կառուցվածքը:

Հասանելիություն (a11y)

Հասանելիությունը ներառում է բազմաթիվ аспектներ՝

• Սեմանտիկա: Սեմանտիկ տեգերի ճիշտ օգտագործումը արդեն մաս է կազմում հասանելիության, քանի որ օգնում է օգնական տեխնոլոգիաներին (սքրինռիդերներին) հասկանալ տարրերի կառուցվածքը և նշանակությունը:

• ARIA-ատրիբուտներ: Ավելացվող ատրիբուտներ, ինչպիսիք են aria-label, aria-describedby, aria-hidden, role, լրացուցիչ տեղեկություններ են տալիս օգնական տեխնոլոգիաներին, երբ HTML սեմանտիկան բավարար չէ:

  <button aria-label="Փակել երկխոսության պատուհանը">
    <img src="close.svg" alt="">
  </button>
  

• Կոնտրաստ: Պատկերների և տեքստի միջև բավարար կոնտրաստ՝ տեսողության խանգարում ունեցող մարդկանց համար:

• Կլավиатուրային նավիգացիա: Հնարավորություն է միայն ստեղնաշարով անցնել էջով և փոխազդել տարրերի հետ:

• Նկարների փոխարինող տեքստ (alt): Նկարագրություն՝ նկարների բովանդակության մասին՝ այն օգտատերերի համար, ովքեր չեն տեսնում:

  <img src="cat.jpg" alt="Սև կատու քնում է պատուհանի վրա">
  

• Վերնագրերի կառուցվածք: Լոգիկ վերնագրերի հիերարխիա (<h1> - <h6>)՝ հեշտ նավիգացիայի համար սքրինռիդերների միջոցով:

Հարաբերություն

Սեմանտիկան կարևոր հիմք է հասանելիության համար: Լավ կառուցված էջը՝ սեմանտիկ տարրերով, շատ ավելի հեշտ է դարձնել հասանելի: Սակայն միայն սեմանտիկան բավարար չէ՝ հաճախ անհրաժեշտ են լրացուցիչ միջոցառումներ՝ ARIA-ատրիբուտներ, ֆոկուսի կառավարում և բավարար կոնտրաստ ապահովելը:

Աспեկտ	Սեմանտիկա	Հասանելիություն (a11y)
Նպատակ	Տվյալ տարրերին իմաստային նշանակություն տալու	Համոզվել և ապահովել, որ բովանդակությունը հասանելի է բոլորի համար
Գործիքներ	HTML տեգեր (<nav>, <article>, <h1>...)	Սեմանտիկա, ARIA, կոնտրաստ, ֆոկուս, alt տեքստ և այլն
Օգտագործող	Բրաուզերներ, պարսկերներ, որոնողական համակարգեր	Մարդիկ տարբեր կարիքներով, օգնող տեխնոլոգիաներ