10.1 Accessibility
Çatımlılıq (accessibility) veb-məzmunun müasir dizaynın vacib bir hissəsidir. Bu, bütün istifadəçilərin, o cümlədən məhdud imkanları olan şəxslərin, veb-səhifələrlə asanlıqla qarşılıqlı əlaqə qurmasını təmin etməyə yönəlmişdir.
Bu məqsədə çatmaq üçün əsas vasitələrdən biri ARIA-attributlarıdır (Accessible Rich Internet Applications), bu da veb-məzmunun əlçatanlığını artırır, onu ekran oxuyucu proqramlar kimi dəstək texnologiyaları üçün daha anlaşıqlı və uyğun hala gətirir.
ARIA nədir?
ARIA (Accessible Rich Internet Applications) — HTML elementlərinə əlavə edilə bilən xüsusi attributlar dəstidir ki, onların əlçatanlığını artırır. Bu attributlar elementlərin strukturu və davranışı haqqında əlavə məlumat verir, bu da dəstək texnologiyalarının veb-məzmunu daha yaxşı başa düşməsinə və onunla qarşılıqlı əlaqə yaratmasına kömək edir.
Mətn oxumağa rahatlığı artıran əsas ARIA-attributları:
aria-label attributu
aria-label attributu ekrana oxuyucu tərəfindən oxunacaq elementə mətn etiketi təqdim etmək üçün istifadə olunur. Bu attribut, elementin görünən etiketi olmadığı zaman və ya daha ətraflı bir təsvir tələb olunduğunda faydalıdır.
İstifadə nümunəsi:
<button aria-label="Dialoq pəncərəsini bağla">X</button>
aria-labelledby attributu
aria-labelledby attributu elementi səhifədəki digər bir etiketlə id istifadə edərək əlaqələndirir. Bu, elementi artıq mövcud olan etiketlə əlaqələndirmək, kontekst və təsvir təmin etmək üçün faydalıdır.
İstifadə nümunəsi:
<h2 id="section-title">Bölmə Başlığı</h2>
<p aria-labelledby="section-title">Bu, bölmə başlığı ilə bağlı olan mətn abzasıdır.</p>
aria-describedby attributu
aria-describedby attributu bir və ya bir neçə təsviri elementi id istifadə edərək elementlə əlaqələndirir. Bu attribut elementə əlavə məlumat və ya kontekst təqdim etmək üçün faydalıdır.
İstifadə nümunəsi:
<input type="text" aria-describedby="input-description">
<p id="input-description">Adınızı daxil edin.</p>
10.2 Role
Role atributu
role atributu elementin rolunu müəyyən edir, yardıcı texnologiyalara həmin elementi necə şərh etməli olduğunu bildirir. button, navigation, main, article və bir çox başqa rollar mövcuddur.
İstifadə nümunəsi:
<nav role="navigation">
<ul>
<li><a href="#home">Əsas</a></li>
<li><a href="#about">Haqqımızda</a></li>
<li><a href="#contact">Əlaqə</a></li>
</ul>
</nav>
aria-live atributu
aria-live atributu dinamik yenilənən məzmun üçün istifadə olunur. Bu, ekran oxuyucusuna məzmunun dəyişdiyini və səsləndirilməli olduğunu bildirir. Dəyərlərə off, polite və assertive daxildir.
İstifadə nümunəsi:
<div aria-live="polite">
<p>Burada mühüm məlumat göstəriləcək.</p>
</div>
aria-hidden atributu
aria-hidden atributu yardıcı texnologiyalara elementin istifadəçilər üçün əlçatan olub-olmaması lazım olduğunu bildirir. true dəyəri elementi yardıcı texnologiyalar üçün gizlədir, false dəyəri isə əlçatan edir.
İstifadə nümunəsi:
<div aria-hidden="true">
<p>Bu mətn ekran oxuyuculardan gizlədiləcək.</p>
</div>
aria-expanded atributu
aria-expanded atributu elementin açıq və ya bağlı olduğunu göstərir. Bu atribut tez-tez "akkordeon" və açılan menyu kimi idarə elementlərində istifadə olunur.
İstifadə nümunəsi:
<button aria-expanded="false" aria-controls="menu">Menyu</button>
<ul id="menu" hidden>
<li><a href="#item1">Element 1</a></li>
<li><a href="#item2">Element 2</a></li>
<li><a href="#item3">Element 3</a></li>
</ul>
aria-controls atributu
aria-controls atributu cari elementin hansı elementi idarə etdiyini göstərir. Bu, aria-expanded kimi atributlarla birlikdə interaktiv idarə elementləri yaratmaq üçün istifadə olunur.
İstifadə nümunəsi:
<button aria-controls="content" aria-expanded="false">Göstər/Gizlə</button>
<div id="content" hidden>
<p>Gizli məzmun.</p>
</div>
GO TO FULL VERSION