Birçok girişimci, dijital erişilebilirliğin otomatik olarak bir web sitesinin tüm kodunun yeniden yazılması anlamına geldiğini düşünür. Tam bir yeniden tasarımın zaman ve bütçe gerektirmesi nedeniyle iyileştirmeleri erteler. Oysa çoğu erişilebilirlik sorunu hiçbir şekilde yeniden inşa gerektirmez. Genellikle yapıdaki küçük hatalar, eksik HTML özellikleri veya CSS'te yanlış ayarlanmış görsel öğelerle ilgilidir.
Platformunuzun temeli teknik olarak hâlâ iyi işliyorsa, mevcut koddaki hedefe yönelik müdahalelerle büyük adımlar atabilirsiniz. Bu, yalnızca ekran okuyuculara veya klavye navigasyonuna bağımlı ziyaretçiler için daha iyi bir deneyim sağlamakla kalmaz, aynı zamanda mobil ekranlarda ve daha yavaş bağlantılarda genel kullanılabilirliği de artırır.
Bu yazıda, mevcut bir ortamda doğrudan uygulayabileceğiniz somut eylem noktalarını ele alıyoruz. Karmaşık bir teori değil, web sitenizi herkes için daha kullanılabilir kılan pratik, uygulanabilir ayarlamalar.
Temel olarak anlamsal HTML
Erişilebilirlik karmaşık komut dosyalarıyla veya ekstra yazılım katmanlarıyla başlamaz. Temel, temiz, anlamsal HTML'de yatar. Yıllar içinde büyümüş birçok web sitesi, aslında belirli HTML etiketlerinin bulunması gereken yerlerde div gibi genel toplama öğeleriyle doludur. Bir ekran okuyucu veya arama motoru sayfanızı analiz ettiğinde, içeriği anlamak için anlamlı öğelere ihtiyaç duyar.
Genel kapsayıcıları `<header>`, `<nav>`, `<main>`, `<article>` ve `<footer>` gibi anlamsal öğelerle değiştirmek az zaman alır, ancak gezilebilirliği anında değiştirir. Yardımcı teknoloji kullanan bir ziyaretçi, böylece önce tüm menüde gezinmek zorunda kalmadan doğrudan ana içeriğe atlayabilir.
Eylemler için doğru öğeleri kullanın
Sık yapılan bir hata, tıklanabilir bir buton oluşturmak için `<div>` veya `<span>` kullanmaktır. Biraz CSS ile görsel olarak aynı görünse de, tarayıcı bunun etkileşimli bir öğe olduğunu anlamaz. Bir klavye kullanıcısı bu tür bir butona Tab tuşuyla ulaşamaz ve bir ekran okuyucu öğeyi bir eylem olarak seslendirmez.
Bir navigasyon bağlantısı için her zaman geçerli bir `href` özelliğine sahip `<a>` öğesini kullanın. Bir menü açmak veya form göndermek gibi sayfa üzerindeki eylemler için bir `<button>` öğesi kullanın. Standart bir HTML butonu otomatik olarak klavye odağı alır ve Enter tuşuna ile boşluk tuşuna tepki verir. Bunu mevcut şablonlarda düzeltmek genellikle bileşen başına sadece birkaç dakika sürer.
Mantıklı bir başlık yapısı sağlayın
Başlıklar, içeriği hiyerarşik olarak düzenlemek içindir, metni görsel olarak büyütmek için değil. Bir sayfada ana konuyu açıklayan tam olarak bir `<h1>` bulunmalıdır. Ardından ana bölümler için `<h2>`, bunların altındaki alt bölümler için `<h3>` kullanırsınız.
Asla seviye atlamayın. Belirli bir sınıfın tasarımı işinize geldiği için bir `<h2>`'den doğrudan bir `<h4>`'e geçmeyin. Bunun yerine, daha küçük bir yazı tipi istiyorsanız CSS'i ayarlayın, ancak HTML'deki mantıksal hiyerarşiyi koruyun. Ekran okuyucu kullanıcıları, sayfa hakkında hızlıca fikir sahibi olmak için sıklıkla başlıktan başlığa gezinir. Dağınık bir yapı bu navigasyonu gereksiz yere zorlaştırır.
Kontrast ve görsel destek
Erişilebilir bir site, görme engeli veya azalmış görüşü olan ziyaretçiler için de iyi okunabilir olmalıdır. Bu genellikle renk kullanımıyla ve etkileşimli öğelerin seçildiklerinde nasıl tepki verdiğiyle ilgilidir.
Daha iyi bir sonuç için mevcut sayfaları yeniden ele almaya baktığımızda, tasarımın ziyaretçilerin site içinde nasıl hareket ettiği üzerinde doğrudan bir etkisi vardır. UX/UI ve dönüşüm kapsamında hedefe yönelik ayarlamalarla, net bir görsel yapının yalnızca kurallara uymasını değil, aynı zamanda her etkileşimin isabetliliğini de artırmasını sağlarsınız.
Metinlerde yeterli renk kontrastı
Beyaz bir arka plan üzerindeki açık gri metin, bilinen bir tasarım tuzağıdır. Bir tasarım programında bazen şık görünebilir, ancak bir telefon ekranında tam güneş ışığında neredeyse okunamaz. Uluslararası yönergeler, normal metin için minimum 4,5:1 ve büyük metin için 3:1 kontrast oranı öngörür.
Bunun için tüm marka paletinizi bir kenara atmanıza gerek yok. Genellikle, gövde metninin CSS renk değerini biraz daha koyu bir tona ayarlamak yeterlidir. Tarayıcı araçlarıyla sitenizdeki herhangi bir metnin kontrast oranını bir bakışta kontrol edip ayarlayabilirsiniz.
Klavye kullanıcıları için görünür odak göstergeleri
Biri bir web sitesinde Tab tuşuyla gezinirken, o anda hangi öğenin seçili olduğu her zaman net olmalıdır. Bir tarayıcı bunu varsayılan olarak aktif öğenin etrafında ince bir kenarlıkla gösterir. Ancak birçok stil sayfasında, bu varsayılan kenarlığı kaldırmak için ayarlanmış `outline: none` CSS kuralını görürsünüz.
Bu kenarlığı bir alternatif sunmadan kaldırırsanız, site faresiz gezinen herkes için kullanılamaz hale gelir. Çözüm basittir: `outline: none` kuralını kaldırın veya CSS'te net, özel bir `:focus-visible` stiliyle değiştirin. Aktif öğenin, sayfanın geri kalanından belirgin şekilde ayrışan dikkat çekici bir kenarlık veya arka plan rengi almasını sağlayın.
Formları ve etkileşimli öğeleri sadeleştirmek
Formlar, ziyaretçilerin müşteriye dönüştüğü veya iletişime geçtiği yerdir. Bir form erişilebilir değilse, doğrudan talep kaybedersiniz. Neyse ki çoğu form hatası mevcut kodda hızla düzeltilebilir.
Etiketleri giriş alanlarına açıkça bağlayın
Bir giriş alanının buna ait bir açıklamaya ihtiyacı vardır. Bir kutunun üzerine ayrı bir metin yerleştirmek yeterli değildir. Bir ekran okuyucu bu durumda hangi metin bloğunun hangi giriş alanına ait olduğunu bilemez.
`<label>` öğesini `for` özelliğini kullanarak `<input>` öğesine açıkça bağlayın. `for` özelliğinin değeri, giriş alanının `id` değeriyle tam olarak eşleşmelidir. Bunun ekstra bir pratik faydası vardır: bir ziyaretçi metin etiketine tıkladığında, imleç otomatik olarak ilgili giriş alanına atlar. Bu, formu fare kullanıcıları için de daha kolay kullanılır kılar.
Ayrıca giriş alanlarının içindeki geçici placeholder metnine tamamen güvenmeyin. Biri yazmaya başlar başlamaz bu metin kaybolur. Bu nedenle temel talimatları ve alan adlarını her zaman kalıcı olarak görünür bir etikete yerleştirin.
Hata mesajlarını anlaşılır hale getirmek
Bir kullanıcı zorunlu bir alanı unuttuğunda veya yanlış bir e-posta adresi girdiğinde, hata mesajı hemen net olmalıdır. Hataları yalnızca kutunun etrafındaki kırmızı bir kenarlıkla belirtmeyin. Renk körlüğü olan ziyaretçiler genellikle yeşil ile kırmızı arasındaki farkı göremez.
Her zaman ilgili giriş alanının hemen yanında net bir metinsel hata mesajı kullanın. Hata mesajını `aria-describedby` özelliğiyle giriş alanına bağlayın. Böylece ziyaretçi alanı seçer seçmez bir ekran okuyucu hata mesajını hemen seslendirir.
Modern CSS ve kademeli iyileştirme
Web geliştirme standartları yenilenmeye devam ediyor. Öğeleri esnek biçimde biçimlendirmek veya karmaşık ızgaralar oluşturmak için dinamik işlevler gibi sürekli yeni CSS özellikleri ekleniyor. İyi inşa edilmiş bir web sitesinin sanatı, kademeli iyileştirmeyi (progressive enhancement) uygulamaktır: temel, ziyaretçinin hangi tarayıcıyı veya yardımcı teknolojiyi kullandığından bağımsız olarak her zaman çalışmalıdır.
Kodunuzu modernleştirmek, kullanılabilirlik pahasına en yeni özellikleri eklemeniz gerektiği anlamına gelmez. Ancak erişilebilirliği ince bir şekilde iyileştirmek için modern CSS kullanabilirsiniz.
prefers-reduced-motion'ın akıllıca kullanımı
Birçok modern web sitesi animasyonlar, hareketli arka planlar ve akıcı geçişler kullanır. Ancak denge bozukluğu veya konsantrasyon güçlüğü olan ziyaretçiler için bu hareketler mide bulantısına veya dikkat dağınıklığına neden olabilir.
CSS'te `prefers-reduced-motion` medya sorgusunu kullanabilirsiniz. Bu, tarayıcının, ziyaretçinin işletim sisteminde gereksiz animasyonları görmek istemediğini belirtip belirtmediğini algılamasını sağlar. Birkaç satır CSS ile bu belirli grup için ağır geçişleri ve animasyonları devre dışı bırakırsınız:
@media (prefers-reduced-motion: reduce) {
*, ::before, ::after {
animation-duration: 0.01ms !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
}Stil sayfanıza yapılan bu tek ekleme ile, sayfanın işleyişini etkilemeden ziyaretçinizin tercihlerine saygı gösterirsiniz.
Görselleri ve medyayı doğru şekilde metinle etiketlemek
Bilgi aktaran görsellerin, görselde neyin göründüğünü belirten bir `alt` özelliğine ihtiyacı vardır. Ekran okuyucular bu metni görme engelli veya az gören ziyaretçilere seslendirir. Bir görsel, bir arka plan deseni veya atmosfer simgesi gibi tamamen dekoratif mi? O zaman `alt` özelliğini atlamayın, ancak değerini boş bırakın (`alt=""`). Boş bir değer, ekran okuyucuya görselin atlanabileceği sinyalini verir.
Sitedeki video içeriği tercihen alt yazıya sahip olmalıdır. Bu kısa vadede mümkün değilse, en azından videonun altında kısa bir metinsel özet sağlayın.
Hızlı bir denetim ve düzeltme için adım adım plan
Tüm siteyi tek seferde ele almanıza gerek yok. Adım adım bir yaklaşım, iş sürecinizi durdurmadan hızlı sonuç verir.
Tab tuşuyla manuel bir kontrol yaparak başlayın. Farenizi bir kenara bırakın ve bir talep göndermeyi veya sitenizdeki makalelere göz atmayı deneyin. Her butona ulaşabiliyor musunuz? Odak her zaman görünür mü? Herhangi bir yerde takılıp kalıyor musunuz? Bu basit test genellikle on dakika içinde en büyük sorunlu noktaları ortaya çıkarır.
Ardından, kalan kontrast hatalarını, eksik etiketleri veya hatalı başlık yapılarını tespit etmek için tarayıcınızdaki otomatik analiz araçlarını kullanın. Mevcut koddaki şablonları en çok etkiyi yaratacak noktalarda ayarlayın: ana navigasyon, formlar ve en önemli açılış sayfaları.
Bu hedefe yönelik iyileştirmeleri gerçekleştirerek, mevcut bir web sitesini erişilebilir bir platforma dönüştürürsünüz. Bu, bir yeniden tasarımın bütçesinin yalnızca bir kısmına mal olurken, aynı anda daha geniş bir kitleye profesyonel bir şekilde hizmet vermenizi sağlar.
Mevcut web sitenizi daha erişilebilir hale getirecek somut ayarlamaların hangileri olduğunu öğrenmek ister misiniz? ferhat.io/contact üzerinden ücretsiz otuz dakikalık bir görüşme planlayın. O zaman mevcut kodunuza ve iyileştirmeleri uygulamanın en hızlı yoluna birlikte bakarız.
