HTML'de ARIA

by trustix


Eklenme Tarihi : 22 Aralık 2020 22:31 Views:     325



 

HTML web sayfaları yapmak için kullanılan istemci veya istemci bilgisayar ve tarayıcı tarafından çalıştırılan bir işaretlem dilidir. Bir web sayfasının tüm iskeletini oluşturmak için kullanılabilir. Ama en nihayetinden HTML'de de birtakım sınırlar bulunmaktadır. Öyle ki çoğunlukla kullanıcılar ve geliştiriciler HTML'de bulunması gereken birtakım özelliklerin ya da işlevlerin olmadığı HTML ile uğraştıkça anlayabilirler. Bu ihtiyaçların büyük bir kısmı extradan Javascript az bir kısmı da CSS ile giderilmeye çalışılır. Bu eksikliklerin tamamlanması 'semantik' ya da diğer bir ifade ile anlamsal web'in oluşmasını sağlar. Bu durumlar kullanıcı erişimlerini kolaylaştıran ya da web sayfalarını kullanıcılar ile daha iyi ve estetik etkileşimler gerçekleştirmesini sağlayan durumlardır.

Sıklıkla web sayfalarında denk geldiğiniz bir yapıyı örnek gösterebiliriz. Bir web sayfasının kullanıcı oturumunu sonlandırmadan birkaç dakika önce kullanıcıyı uyarmasını ele alalım. Bu uyarı verilmediği zaman kullanıcı bir süre sayfada hareketsiz kaldığında otomatik olarak oturumu sonlanacaktır. Ancak bu durumu kullanıcıya birkaç dakika öncesinden de haber verebiliriz. Bu uyarı genelde bir uyarı penceresi ya da açılır pencere şeklinde olur. Kullanıcıya oturumunun kısa sürede sonlanması ile ilgili bir teklif sunulur. Kullanıcı sitede daha fazla durmayacaksa onaylar ve başka tarafa yönelir. Ancak bir süre daha web sayfasında dolaşacak ise bunu reddeder. Her iki durumda da web sayfası kullanıcı ile insan-sistem etkileşimi bakımından ideal ve beklenen bir etkileşim kurmuş olur. Ama elbette bu uyarı penceresi HTML ile sağlanamaz bu sebeble Javascript yardımı ile sağlanır.

Bu durum elbette sadece normal web sayfası-kullanıcı etkileşimi kapsamında değerlendirilemez. Başka durumları da değerlendirmek gerekmektedir. İşitme bozukluğu olan ya da görme bozukluğu olan bireyleri ele alalım. Görme bozukluğu olan biri ekran okuyucu üçüncü parti araçlarla web sayfalarında dolaşabilir. Ancak pekala bunu yapabilmesi için ekran okuyucunun okuması gereken bölümleri bilmesi gerekir. Eğer web sayfası gerekli ARIA öznitelikleri ve değerleri dikkate alınarak tasarlanmamış ise bu durumda ekran okuyucu kullanıcıya yardımcı olamayacak ve görme bozukluğu olan kullanıcı da web sayfalarında dilediğince dolaşamayacaktır.

Bu ve bunun gibi birçok durum ele alınabilir. ARIA'nın amacı ya da yapısı bu durum için geçerlidir. ARIA ya da diğer bir ifade ile Erişilebilir Zengin İnternet Uygulamaları temelde web sayfalarının içeriğini tüm kullanıcılar için en ideal erişilebilirlik durumuna getirmek için kullanılan bir yapıdır.

ARIA bir tür HTML tamamlayıcısı gibi yorumlanabilir. Bu tamamlayıcılık durumu ne yazık ki bütün tarayıcılar ya da işletim sistemleri tarafından desteklenmez. Ancak ARIA desteği düzenli ve sürekli olarak elbette ki artmaktadır. Bu durumda web sayfalarının tasarlanmasında ARIA önemli bir noktaya sahiptir. Bu sebeble de üzerinden durulması gereken bir alandır.

ARIA'nın ne olduğunu anlamak için bu alanda sık kullanılan bir örnek kullanabiliriz.

Normal kullanım yapısı:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="js.js"></script>
    <title>HTML'de ARIA</title>

</head>

<body>
<!-- 
    Bir liste etiketi kullanarak checkbox
    ya da diğer bir ifade ile 
    onay kutusu dediğimiz bir yapı
    kullanalım. Bu onay kutusu liste yapısı
    olarak görünecektir. 
    Elbette herhangi bir CSS 
    kodu kullanmadığımız için
    estetik olmayacaktır.
    Ama tasarım başka bir konu.
    Biz kendi konumuza dönelim.
    Bu onay kutusunu herhangi bir ekran koruyucu
    okuyamayaktır. Bu sebeble görmel engelli biri
    bu onay kutusunu göremeyecek
    ve dolayısı ile web sayfası ile doğru 
    bir etkileşime giremeyecektir.

 -->
    <li tabindex="0" class="checkbox" checked>
        İlgili Metin
      </li>
</div>
</body>
</html>

 

ARIA ile birlikte kullanım yapısıı

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="js.js"></script>
    <title>HTML'de ARIA</title>

</head>

<body>
<!-- 
    Şimdi ise ARIA ile birlikte kullanalım.
    role özniteliğini veriyoruz. Daha sonra
    bu özniteliğie checkbox yani onay kutusu diyoruz.
    Bu şekilde  ekran okuyucu bunun bir onay kutusu olduğunu
    anlayacak ve görme engelli birisi için bu metni okuyacaktır. 
    Bununla da kalmıyoruz. 
    aria-checked özniteliğine de true
    diyoruz. Bu şekilde onay kutususunun
    varsayılan olarak işaretlenmiş olduğunu da ayrıca
    ekran okuyucuya bildiyoruz. 
    Bu şekilde checkbox yapısı ile ilgili anlamsal
    bir yapı sağlamış oluyoruz.
 -->
 <li tabindex="0" class="checkbox" role="checkbox" checked aria-checked="true">
        İlgili Metin
      </li>
</div>
</body>
</html>

 

Yukarıdaki örneği iyi anlamamız gerekiyor. Burada bir liste yapısı içerisinde onay kutusu tanımladığımız için bu ARIA yapısını kullandık. Örneğin eğer onay kutusu yapısını direkt <input> etiketi ile kullansaydık bu durumda bu öznitelikleri kullanmamıza gerek kalmayacaktı. Ekran okuyucu bunu direkt olarak algılayacaktı. Ancak her zaman onay kutusu yapısı bir <input> etiketi ile kullanılmayabilir. Bu web sayfasının tasarımına ya da geliştiricinin tasarım planına uygun olmayabilir. Bu nedenle bir liste yapısı kullanabilir.

Özetle ARIA yapısının ne zaman kullanılması gerekitği hangi durumlarda nasıl kullanılabileceği gibi durumlar HTML'de biraz daha detay yapılardır. ARIA'yı anlamak ve doğru kullanmak ise web tasarım teorisi açısında bir zorunluluktur.

ARIA'nın ne olduğunu incelemeye çalıştık. Sonraki zamanlara bu yapı ile ilgili birçok örnek yapmaya çalışacağız.

Herkese İyi Kodlamalar.

 





0

Yorum Formu

vikikod.com    © 2019