Daha Fazla Erişilebilirlik

Published in

Sahibinden Technology

4 min readJan 9, 2024

Web sitelerindeki erişilebilirlik konusu sitenin tasarımcısından yazılım geliştiricisine ve hatta ekip yöneticisine kadar tüm kişiler tarafından anlaşılması ve üzerinde çalışılması gereken bir konudur. Bu yazıda genel hatlarıyla ARIA kullanımını ele alıp daha erişilebilir bir HTML kodlama için basit ama etkili birkaç noktaya değineceğiz.

ARIA Nedir?

Accessible Rich Internet Applications, ekran okuyuculara kod aracılığıyla ekstra bilgi sağlayarak uygulamaların erişilebilirliğini artırmak için W3C tarafından oluşturulmuş bir özelliktir. Ekran okuyucular bir web sayfasını anlamada zaten oldukça iyidir, ancak ARIA rolleri eklemek, ekran okuyucu kullanıcılarına daha fazla bilgi, daha fazla bağlam ve daha fazla etkileşim sağlar.

Ekran okuyucular, bir sayfadaki bilgileri kullanıcılarına ses ya da Braille alfabesi üzerinden aktaran yazılımlardır.

Bir ekran okuyucu ile sitenizin verimli çalışmasını sağlayabilirseniz, sitenizi ziyaret eden neredeyse tüm görme engelli kullanıcıların sitede rahatça gezinebilmelerini ve siteyi verimli bir şekilde kullanabilmelerini sağlamış olursunuz.

ARIA role

Basit bir örnekle başlayacak olursak;

<div role="banner">
<div role="search">
<div role="navigation">

Yukarıdaki div örneklerinde tanımlayıcı role attribute’leri kullandık ve kullanıcıların o anda sitenin neresinde olduklarını ve neyle etkileşimde bulunduklarını anlamasına yardımcı olmaya çalıştık. Burada alternatif olarak HTML5 etiketlerinden <nav>, div etiketine eklenmiş olan role=”navigation” ile aynı tanımlama görevini görecek ve ekran okuyucularını da buna göre yönlendirecektir.

Aynı şekilde <header>, <footer> ve <main> gibi HTML5 etiketlerinde de role kullanımına ihtiyaç yoktur.

ARIA label, labelledby ve required

Formlarda sıklıkla kullanılan input’lar için aşağıdaki örnekleri verebiliriz.

<label id="tbLabel">Ad Soyad*</label>
<input type="text" aria-labelledby="tbLabel" aria-required="true" />

Label kullanmıyorsak;

<input
  type="text"
  placeholder="Ad Soyad"
  aria-label="Ad Soyad"
  aria-required="true"
/>

İlk örnekte ekran okuyucuyu, tanımlama bilgisi için <label> etiketine yönlendirdik. Sadece input’un olduğu örnekte ise “aria-label” üzerinden input’u tanımlayan bilgiyi iletmiş olduk. Ayrıca her iki örnekte de bu alanın zorunlu olduğunu “aria-required” ile bildirmiş olduk.

ARIA çok güçlü bir araçtır. Dikkatli ve doğru kullanılması gerekir. Örneğin menü olmayan bir alanı menü gibi tanımlamak kafa karışıklığına ve sitenizin etkili bir şekilde kullanılamamasına neden olacaktır.

Modal’lar için de aşağıdaki şekilde bir kullanım sağlayabiliriz.

<div 
  role="alertdialog"
  aria-modal="true"
  aria-labelledby="dialog_label"
  aria-describedby="dialog_desc"
>

  <h2 id="dialog_label">Onay</h2>

  <div id="dialog_desc">
    <p>Seçilen kayıt silinecektir, onaylıyor musunuz?</p>
  </div>

  <button type="button">Onaylamıyorum</button>
  <button type="button">Onaylıyorum</button>
</div>

Yukarıdaki modal örneğinde role=”alertdialog” özelliğini ekleyerek ekran okuyuculara bu alanda kullanıcıya iletilecek önemli, yanıt gerektiren bir mesaj olduğunu ve sitedeki akışın kesileceğini bildirmekteyiz. Kullanıcıdan herhangi bir yanıt beklenmiyorsa ve sadece bilgi amaçlı bir modal ise role=”alert” kullanımı daha doğru olacaktır.

“aria-labelledby” ve “aria-describedby” attribute’leri ile tanımlayıcı ve açıklayıcı etiketleri işaret edebileceğimiz gibi bunların yerine “aria-label” ve “aria-description” attribute’leri ile tanım ve açıklama bilgilerini doğrudan ekran okuyuculara iletebiliriz.

ARIA valuemin, valuemax ve valuenow

Aşağıdaki örnekte kullanıcı slider değerini değiştirdikçe, hem value hem de ARIA değerleri otomatik olarak güncellenecektir. Böylece kullanıcı seçtiği değer hakkında anında geri bildirim alabilecektir.

<label for="slider">Miktar</label>

<input 
  type="range" 
  id="slider"
  min="1"
  max="100"
  value="50"
  step="1" 
  aria-valuemin="1"
  aria-valuemax="100"
  aria-valuenow="50"
/>

ARIA hidden

Bazen bir içeriği gizlemek, onu etiketlemek veya ön plana çıkartmak kadar önemli olabilir. aria-hidden, sayfada dekoratif amaçlı kullanılan görselleri gizlemek için kullanılabilir. Böylece ekran okuyucu kullanan kişiler gereksiz yere zaman harcamadan sayfadaki içeriği daha verimli ve hızlı bir şekilde okuyabilirler.

<p aria-hidden="true">Bu alan ekran okuyuculardan gizlenmiştir.</p>

Yukarıdaki içeriği aria-hidden=”true” ile gizlemeden önce ekran okuyucu kullanan kullanıcılar için kesinlikle hiçbir önemli bilgi sağlamadığından emin olunması gereklidir. Bu özellik kullanıldığında ekran okuyucular onu okumak için herhangi bir girişimde bulunmayacaktır.

Başlıkların Kullanımı

Görme engelli kullanıcılar başlıkları kullanarak hem sayfa içeriği hakkında fikir edinip hem de o anda sayfanın neresinde olduklarını anlayabilirler. Bunu mümkün olduğunca kolaylaştırmak için bir web sayfasındaki tüm başlıkları, en önemli başlıktan başlayarak aşağıya doğru uzanan bir hiyerarşi içerisinde konumlandırmak gerekmektedir. HTML’de en önemli başlık <h1> etiketidir. Bu genellikle sayfanın başlığıdır. Bu numaralandırılmış başlık etiketleri önem sırasına göre <h6>’ya kadar gidebilir.

Ana İçerik Alanına Kolay Ulaşım için Yönlendirme

<a class="skip-to-content" href="#content">Ana içerik alanına yönlendir</a>
<main id="content">Ana içerik alanı</main>

.skip-to-content {
  position: absolute;
  top: -400px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

Yukarıdaki örnekte olduğu gibi kullanıcıları, sayfadaki belirli alanlara hızlıca yönlendirebilmek için sadece ekran okuyucular için tasarlanmış gizli linkler kullanabiliriz. Bu kullanımı menü ya da search alanları gibi sayfadaki önemli alanlar için de yapabiliriz.

“alt” Özelliğinin Kullanımı

“alt” attribute’ü eklendiği imaj hakkında görme engelli kullanıcılara açıklayıcı bir metin sunmalıdır.

Örneğin;

<img src="images/stock-graph.jpg" alt="Hisse senedi grafiği"/>

Bunun yerine aşağıdaki gibi açıklayıcı bir metin kullanmak, ekran okuyucu kullanan kullanıcıların sayfada yer alan görselleri daha iyi anlayıp yorumlamasına yardımcı olacaktır.

<img
  src="images/stock-graph.jpg" 
  alt="Son 3 ayda A firmasının hisse senedi fiyatındaki artışını gösteren bir grafik"
/>

“lang” Özelliğinin Kullanımı

<html lang="tr"></html>

Web sitesi kodlanırken bu attribute gözden kaçabilmekte çünkü sayfaya eklendiğinde görsel bir fark oluşturmamakla birlikte metninizin dilini de değiştirmemektedir. Bu attribute’ü kullanarak hem görme engelli kullanıcılara sayfa dili hakkında doğru bilgi vermiş oluruz hem de sayfa içeriğinin kullanıcının belirttiği dille eşleşmemesi durumunda, tarayıcı tarafından içeriğin “lang” attribute’ünde belirtilen dile çevrilmesi için kullanıcıya teklif edilmesini sağlamış oluruz.

Formlarda “tabindex” Kullanımı

Özellikle formlar üzerindeki doğru sıralama ile numaralandırılmış tabindex kullanımı, veri girişi sırasında kullanıcılara kolaylık sağlamakta ve form üzerindeki alanlar arasında hızlıca geçiş imkanı sunmaktadır.