Eri\u015filebilirlik, web sitelerinin herkes taraf\u0131ndan, engel durumuna bak\u0131lmaks\u0131z\u0131n kullan\u0131labilir olmas\u0131n\u0131 sa\u011flayan temel bir ilkedir. Bir eri\u015filebilirlik eklentisi geli\u015ftiricisi olarak, \u00fcr\u00fcn\u00fcm\u00fcn bu standartlara ne kadar uydu\u011funu test etmek i\u00e7in yap\u0131lan bir denetimde, beklenenden \u00e7ok daha fazla WCAG (Web \u0130\u00e7eri\u011fi Eri\u015filebilirlik Y\u00f6nergeleri) hatas\u0131yla kar\u015f\u0131la\u015ft\u0131m. Ba\u015flang\u0131\u00e7ta sadece \u00fc\u00e7 kritik hata bildirilirken, kendi detayl\u0131 incelemem sonucunda bu say\u0131n\u0131n sekize \u00e7\u0131kt\u0131\u011f\u0131n\u0131 g\u00f6rd\u00fcm. Bu durum, otomatik denetim ara\u00e7lar\u0131n\u0131n s\u0131n\u0131rl\u0131l\u0131klar\u0131n\u0131 ve manuel, kapsaml\u0131 bir incelemenin vazge\u00e7ilmezli\u011fini bir kez daha g\u00f6zler \u00f6n\u00fcne serdi. Peki, bu hatalar nelerdi ve onlar\u0131 nas\u0131l giderdim? Bu makale, eri\u015filebilirlik denetim s\u00fcre\u00e7lerini, s\u0131k kar\u015f\u0131la\u015f\u0131lan WCAG hatalar\u0131n\u0131 ve bu hatalara y\u00f6nelik pratik \u00e7\u00f6z\u00fcm \u00f6nerilerini ad\u0131m ad\u0131m ele alarak, web geli\u015ftiricilerine ve i\u00e7erik \u00fcreticilerine yol g\u00f6stermeyi ama\u00e7lamaktad\u0131r.<\/p>\n
Web Content Accessibility Guidelines (WCAG), yani Web \u0130\u00e7eri\u011fi Eri\u015filebilirlik Y\u00f6nergeleri, World Wide Web Consortium (W3C) taraf\u0131ndan yay\u0131nlanan ve web i\u00e7eri\u011finin engelli bireyler taraf\u0131ndan daha eri\u015filebilir hale getirilmesi i\u00e7in bir dizi \u00f6neri ve standart sunan uluslararas\u0131 bir k\u0131lavuzdur. Bu y\u00f6nergeler, g\u00f6rme, i\u015fitme, fiziksel, bili\u015fsel ve n\u00f6rolojik engelleri olan ki\u015filer dahil olmak \u00fczere geni\u015f bir kitleye hitap eder. WCAG\u2019nin temelinde d\u00f6rt ana prensip yatar: Alg\u0131lanabilirlik (Perceivable), \u00c7al\u0131\u015fabilirlik (Operable), Anla\u015f\u0131labilirlik (Understandable) ve Sa\u011flaml\u0131k (Robust). Bu prensipler, web i\u00e7eri\u011finin nas\u0131l tasarlanmas\u0131 ve geli\u015ftirilmesi gerekti\u011fine dair temel bir \u00e7er\u00e7eve sunar.<\/p>\n
Alg\u0131lanabilirlik, kullan\u0131c\u0131lar\u0131n sundu\u011funuz bilgiyi alg\u0131layabilmesini ifade eder. \u00d6rne\u011fin, bir g\u00f6rselin alternatif metni olmal\u0131 ki g\u00f6rme engelli bir kullan\u0131c\u0131 ekran okuyucu arac\u0131l\u0131\u011f\u0131yla g\u00f6rselin i\u00e7eri\u011fini anlayabilsin. Ya da bir videonun altyaz\u0131lar\u0131 olmal\u0131 ki i\u015fitme engelli kullan\u0131c\u0131lar i\u00e7eri\u011fi takip edebilsin. \u00c7al\u0131\u015fabilirlik ise, kullan\u0131c\u0131 aray\u00fcz\u00fc bile\u015fenlerinin ve navigasyonun herkes taraf\u0131ndan kullan\u0131labilir olmas\u0131 anlam\u0131na gelir. Bu, \u00f6zellikle klavye ile navigasyonun sorunsuz \u00e7al\u0131\u015fmas\u0131, fare kullanamayan ki\u015filer i\u00e7in b\u00fcy\u00fck \u00f6nem ta\u015f\u0131r. Anla\u015f\u0131labilirlik prensibi, bilginin ve aray\u00fcz\u00fcn anla\u015f\u0131l\u0131r olmas\u0131n\u0131 gerektirir. Karma\u015f\u0131k dil yerine sade ve anla\u015f\u0131l\u0131r bir dil kullanmak, tutarl\u0131 navigasyon sa\u011flamak ve form hatalar\u0131n\u0131 a\u00e7\u0131k\u00e7a belirtmek bu kapsama girer. Son olarak, Sa\u011flaml\u0131k prensibi, i\u00e7eri\u011fin \u00e7e\u015fitli kullan\u0131c\u0131 arac\u0131lar\u0131 (taray\u0131c\u0131lar, ekran okuyucular vb.) taraf\u0131ndan yorumlanabilecek kadar sa\u011flam olmas\u0131n\u0131 vurgular. Bu, standartlara uygun HTML kullanmak ve eri\u015filebilirlik API’lerini do\u011fru \u015fekilde uygulamakla sa\u011flan\u0131r.<\/p>\n
WCAG, genellikle \u00fc\u00e7 uyumluluk seviyesinde tan\u0131mlan\u0131r: A (en d\u00fc\u015f\u00fck), AA (orta) ve AAA (en y\u00fcksek). \u00c7o\u011fu yasal d\u00fczenleme ve kurumsal politika, AA seviyesinde uyumlulu\u011fu zorunlu k\u0131lar veya tavsiye eder. Bu seviye, geni\u015f bir kullan\u0131c\u0131 kitlesi i\u00e7in \u00f6nemli eri\u015filebilirlik iyile\u015ftirmeleri sa\u011flarken, geli\u015ftirme maliyetleri a\u00e7\u0131s\u0131ndan da makul bir denge sunar. Eri\u015filebilirli\u011fin \u00f6nemi sadece yasal y\u00fck\u00fcml\u00fcl\u00fcklerden ibaret de\u011fildir; ayn\u0131 zamanda etik bir sorumluluktur. Dijital d\u00fcnyaya eri\u015fimin temel bir insan hakk\u0131 oldu\u011fu g\u00fcn\u00fcm\u00fczde, herkesin bilgiye ve hizmetlere e\u015fit \u015fekilde ula\u015fabilmesi gerekir. Ayr\u0131ca, eri\u015filebilir web siteleri daha geni\u015f bir kitleye ula\u015farak potansiyel m\u00fc\u015fteri taban\u0131n\u0131 geni\u015fletir, arama motoru optimizasyonuna (SEO) katk\u0131da bulunur ve marka itibar\u0131n\u0131 g\u00fc\u00e7lendirir. Eri\u015filebilir bir tasar\u0131m, asl\u0131nda herkes i\u00e7in daha iyi bir kullan\u0131c\u0131 deneyimi sunar, \u00e7\u00fcnk\u00fc basit ve anla\u015f\u0131l\u0131r aray\u00fczler t\u00fcm kullan\u0131c\u0131lar i\u00e7in daha kolayd\u0131r. Bu nedenle, WCAG standartlar\u0131na uymak, sadece bir zorunluluk de\u011fil, ayn\u0131 zamanda ak\u0131ll\u0131 bir i\u015f stratejisidir.<\/p>\n
Her \u015fey, eklentimin ilk versiyonu i\u00e7in ba\u011f\u0131ms\u0131z bir eri\u015filebilirlik denetimi talebiyle ba\u015flad\u0131. Bu denetim, genellikle otomatik ara\u00e7lar ve y\u00fczeysel bir manuel inceleme kombinasyonuyla yap\u0131l\u0131r. Gelen rapor, \u00fc\u00e7 \u00f6nemli WCAG hatas\u0131 tespit etti\u011fini belirtiyordu. \u0130lk ba\u015fta bu say\u0131n\u0131n nispeten d\u00fc\u015f\u00fck olmas\u0131 beni rahatlatm\u0131\u015f olsa da, i\u00e7g\u00fcd\u00fclerim daha derinlemesine bir incelemenin gerekli oldu\u011funu f\u0131s\u0131ld\u0131yordu. Sonu\u00e7ta, bu benim eklentimdi ve kullan\u0131c\u0131lar\u0131m i\u00e7in en iyi deneyimi sunmak benim sorumlulu\u011fumdayd\u0131. Bu d\u00fc\u015f\u00fcnceyle, kendi detayl\u0131 denetim s\u00fcrecimi ba\u015flatt\u0131m.<\/p>\n
Denetim s\u00fcrecime, otomatik eri\u015filebilirlik denetim ara\u00e7lar\u0131n\u0131 kullanarak ba\u015flad\u0131m. Bu ara\u00e7lar, sayfa yap\u0131s\u0131ndaki temel sorunlar\u0131, renk kontrast\u0131 eksikliklerini veya eksik alt niteliklerini h\u0131zl\u0131ca tespit edebilir. Lighthouse, Axe DevTools ve WAVE gibi ara\u00e7lar, bu a\u015famada olduk\u00e7a faydal\u0131d\u0131r. Ancak, bu ara\u00e7lar\u0131n s\u0131n\u0131rl\u0131l\u0131klar\u0131 vard\u0131r; genellikle bir sayfan\u0131n %20-30’unu kapsayan sorunlar\u0131 bulabilirler. \u00d6rne\u011fin, bir d\u00fc\u011fmenin odakland\u0131\u011f\u0131nda g\u00f6r\u00fcn\u00fcr bir halkas\u0131 olup olmad\u0131\u011f\u0131n\u0131 veya klavye navigasyonunun mant\u0131kl\u0131 bir s\u0131ray\u0131 takip edip etmedi\u011fini otomatik ara\u00e7lar tam olarak anlayamaz. Bu t\u00fcr karma\u015f\u0131k etkile\u015fimler ve ba\u011flamsal sorunlar i\u00e7in manuel test vazge\u00e7ilmezdir.<\/p>\n
Manuel denetim a\u015famas\u0131na ge\u00e7ti\u011fimde, kendimi farkl\u0131 kullan\u0131c\u0131 profillerinin yerine koymaya \u00e7al\u0131\u015ft\u0131m. \u0130lk olarak, sadece klavye kullanarak eklentinin t\u00fcm \u00f6zelliklerini test ettim. Tab tu\u015fuyla gezinme, Enter ve Space tu\u015flar\u0131yla etkile\u015fim kurma, odak s\u0131ras\u0131n\u0131n mant\u0131kl\u0131 olup olmad\u0131\u011f\u0131n\u0131 kontrol etme gibi ad\u0131mlar\u0131 uygulad\u0131m. Bu, \u00f6zellikle motor beceri engeli olan kullan\u0131c\u0131lar i\u00e7in kritik bir testtir. Ard\u0131ndan, bir ekran okuyucu (\u00f6rne\u011fin NVDA veya JAWS) kullanarak eklentiyi deneyimledim. Bu, g\u00f6rme engelli kullan\u0131c\u0131lar\u0131n eklentiyle nas\u0131l etkile\u015fim kurdu\u011funu anlamam\u0131 sa\u011flad\u0131. Ekran okuyucu, eksik alternatif metinleri, yanl\u0131\u015f ARIA etiketlerini veya anlams\u0131z ba\u015fl\u0131k hiyerar\u015filerini an\u0131nda ortaya \u00e7\u0131kar\u0131r. Ayr\u0131ca, renk k\u00f6rl\u00fc\u011f\u00fc sim\u00fclat\u00f6rleri kullanarak renk kontrast\u0131 sorunlar\u0131n\u0131 daha detayl\u0131 inceledim ve farkl\u0131 ekran boyutlar\u0131nda ve cihazlarda (mobil, tablet) eklentinin tepkiselli\u011fini ve eri\u015filebilirli\u011fini kontrol ettim.<\/p>\n
Bu kapsaml\u0131 manuel testler sonucunda, ilk raporda belirtilen \u00fc\u00e7 hatan\u0131n \u00f6tesinde, be\u015f yeni ve kritik hata daha tespit ettim. Bu durum, otomatik ara\u00e7lar\u0131n yaln\u0131zca buzda\u011f\u0131n\u0131n g\u00f6r\u00fcnen k\u0131sm\u0131n\u0131 yakalad\u0131\u011f\u0131n\u0131 ve ger\u00e7ek d\u00fcnya senaryolar\u0131nda kullan\u0131c\u0131 deneyimini etkileyen bir\u00e7ok n\u00fcans\u0131n g\u00f6zden ka\u00e7abilece\u011fini bir kez daha kan\u0131tlad\u0131. Buldu\u011fum sekiz hata, sadece teknik bir liste olmaktan \u00f6te, farkl\u0131 engel t\u00fcrlerine sahip kullan\u0131c\u0131lar\u0131n eklentimi kullan\u0131rken kar\u015f\u0131la\u015fabilece\u011fi ger\u00e7ek zorluklar\u0131 temsil ediyordu. Bu ke\u015fif, eklentimin eri\u015filebilirlik seviyesini \u00f6nemli \u00f6l\u00e7\u00fcde art\u0131rmak i\u00e7in bana net bir yol haritas\u0131 sundu ve her geli\u015ftiricinin \u00fcr\u00fcnlerini benzer bir titizlikle denetlemesi gerekti\u011fi inanc\u0131m\u0131 peki\u015ftirdi.<\/p>\n
Kapsaml\u0131 denetimim sonucunda ortaya \u00e7\u0131kan sekiz WCAG hatas\u0131, genellikle web geli\u015ftirme s\u00fcre\u00e7lerinde g\u00f6zden ka\u00e7abilen ancak kullan\u0131c\u0131 deneyimi \u00fczerinde ciddi etkileri olan sorunlard\u0131. Her bir hatay\u0131 detayl\u0131ca inceleyelim ve \u00e7\u00f6z\u00fcm yollar\u0131n\u0131 ad\u0131m ad\u0131m a\u00e7\u0131klayal\u0131m.<\/p>\n
Problem:<\/strong> Eklentimin aray\u00fcz\u00fcnde kullan\u0131lan baz\u0131 ikonlar ve k\u00fc\u00e7\u00fck g\u00f6rseller i\u00e7in \u00c7\u00f6z\u00fcm:<\/strong> Her g\u00f6rselin veya ikonun amac\u0131n\u0131 ve i\u00e7eri\u011fini do\u011fru bir \u015fekilde a\u00e7\u0131klayan anlaml\u0131 Bu d\u00fczeltme, g\u00f6rme engelli kullan\u0131c\u0131lar\u0131n eklentinin g\u00f6rsel aray\u00fcz\u00fcn\u00fc “duyarak” anlamalar\u0131n\u0131 ve i\u015flevselli\u011fi tam olarak kullanabilmelerini sa\u011flad\u0131.<\/p>\n Problem:<\/strong> Eklentinin baz\u0131 metin ve arka plan renk kombinasyonlar\u0131, WCAG AA seviyesi i\u00e7in belirtilen minimum kontrast oranlar\u0131n\u0131 kar\u015f\u0131lam\u0131yordu. \u00d6zellikle a\u00e7\u0131k gri metinlerin beyaz arka plan \u00fczerinde veya baz\u0131 d\u00fc\u011fmelerdeki metinlerin arka planlar\u0131yla olan kontrast\u0131 yetersizdi. Bu durum, d\u00fc\u015f\u00fck g\u00f6rme yetene\u011fi olan veya renk k\u00f6rl\u00fc\u011f\u00fc ya\u015fayan kullan\u0131c\u0131lar i\u00e7in metinleri okumay\u0131 son derece zorla\u015ft\u0131r\u0131yordu.<\/p>\n \u00c7\u00f6z\u00fcm:<\/strong> Kontrast oranlar\u0131n\u0131 kontrol etmek i\u00e7in WebAIM Contrast Checker gibi ara\u00e7lar\u0131 kullanarak, metin ve arka plan renklerini WCAG 2.1 AA seviyesi i\u00e7in \u00f6nerilen minimum oranlara (normal metin i\u00e7in 4.5:1, b\u00fcy\u00fck metin i\u00e7in 3:1) uyacak \u015fekilde ayarlamak. Bu, genellikle daha koyu metin renkleri veya daha a\u00e7\u0131k arka plan renkleri se\u00e7meyi gerektirir.<\/p>\n \u00d6rne\u011fin, orijinalde kullan\u0131lan bir a\u00e7\u0131k gri metin rengi ( Problem:<\/strong> Eklentideki baz\u0131 etkile\u015fimli bile\u015fenler (\u00f6zellikle \u00f6zel olarak tasarlanm\u0131\u015f d\u00fc\u011fmeler veya sekmeler), klavye ile odaklan\u0131lam\u0131yor veya odaklan\u0131ld\u0131\u011f\u0131nda g\u00f6r\u00fcn\u00fcr bir odak halkas\u0131 g\u00f6stermiyordu. Ayr\u0131ca, odak s\u0131ras\u0131 bazen mant\u0131ks\u0131z bir ak\u0131\u015f\u0131 takip ediyordu, bu da klavye kullan\u0131c\u0131lar\u0131n\u0131n eklenti i\u00e7inde gezinmesini zorla\u015ft\u0131r\u0131yordu.<\/p>\n \u00c7\u00f6z\u00fcm:<\/strong> T\u00fcm etkile\u015fimli elementlerin klavye ile odaklanabilir olmas\u0131n\u0131 sa\u011flamak i\u00e7in Bu de\u011fi\u015fiklikler, klavye kullanan veya motor beceri engeli olan kullan\u0131c\u0131lar\u0131n eklentinin t\u00fcm i\u015flevlerine kolayca eri\u015febilmesini garantiledi.<\/p>\n Problem:<\/strong> Eklentideki form alanlar\u0131 (input, textarea, select) genellikle g\u00f6rsel olarak bir metinle ili\u015fkilendirilmi\u015f olsa da, bu ili\u015fkilendirme HTML d\u00fczeyinde \u00c7\u00f6z\u00fcm:<\/strong> Her form eleman\u0131n\u0131, Bu d\u00fczeltme, formlar\u0131n t\u00fcm kullan\u0131c\u0131lar i\u00e7in anla\u015f\u0131l\u0131r ve doldurulabilir olmas\u0131n\u0131 sa\u011flayarak, eklentinin etkile\u015fimli k\u0131s\u0131mlar\u0131n\u0131n eri\u015filebilirli\u011fini art\u0131rd\u0131.<\/p>\n Problem:<\/strong> Eklenti, AJAX veya JavaScript kullanarak dinamik olarak i\u00e7erik g\u00fcncelliyordu (\u00f6rne\u011fin, bir ayar kaydedildikten sonra g\u00f6sterilen ba\u015far\u0131 mesaj\u0131 veya bir liste g\u00fcncellendi\u011finde). Ancak bu g\u00fcncellemeler, ekran okuyuculara duyurulmuyordu, bu da g\u00f6rme engelli kullan\u0131c\u0131lar\u0131n sayfa i\u00e7eri\u011findeki de\u011fi\u015fikliklerden haberdar olamamas\u0131na neden oluyordu.<\/p>\n \u00c7\u00f6z\u00fcm:<\/strong> Dinamik olarak g\u00fcncellenen i\u00e7erik alanlar\u0131n\u0131 Bu uygulama, dinamik aray\u00fczlerin de eri\u015filebilir olmas\u0131n\u0131 sa\u011flayarak, kullan\u0131c\u0131lar\u0131n eklentinin g\u00fcncel durumundan her zaman haberdar olmas\u0131na olanak tan\u0131d\u0131.<\/p>\n Problem:<\/strong> Eklenti, birden fazla dil deste\u011fi sunuyordu veya baz\u0131 \u00f6zel terimler farkl\u0131 bir dilde kullan\u0131l\u0131yordu (\u00f6rne\u011fin, \u0130ngilizce bir terim T\u00fcrk\u00e7e metin i\u00e7inde). Ancak bu dil de\u011fi\u015fiklikleri, HTML’de \u00c7\u00f6z\u00fcm:<\/strong> Sayfan\u0131n veya i\u00e7eri\u011fin ana dilini Bu k\u00fc\u00e7\u00fck ama \u00f6nemli d\u00fczeltme, ekran okuyucu kullan\u0131c\u0131lar\u0131n\u0131n metinleri do\u011fru telaffuzla ve anla\u015f\u0131l\u0131r bir \u015fekilde dinlemesini sa\u011flayarak, \u00e7ok dilli i\u00e7eri\u011fin eri\u015filebilirli\u011fini art\u0131rd\u0131.<\/p>\n Problem:<\/strong> Eklentinin ayar sayfalar\u0131nda veya panellerinde ba\u015fl\u0131klar kullan\u0131l\u0131rken, hiyerar\u015fik yap\u0131ya uyulmam\u0131\u015ft\u0131. \u00d6rne\u011fin, bir \u00c7\u00f6z\u00fcm:<\/strong> Ba\u015fl\u0131k etiketlerini ( Bu d\u00fczeltme, sayfa yap\u0131s\u0131n\u0131 hem g\u00f6rsel olarak hem de semantik olarak daha anla\u015f\u0131l\u0131r hale getirerek, t\u00fcm kullan\u0131c\u0131lar\u0131n i\u00e7erikte daha kolay gezinmesini sa\u011flad\u0131.<\/p>\n Problem:<\/strong> Eklenti i\u00e7inde otomatik olarak kayan bir karusel veya belirli bir s\u00fcre sonra kapanan bir bildirim mesaj\u0131 gibi zaman s\u0131n\u0131rl\u0131 i\u00e7erikler bulunuyordu. Bu t\u00fcr i\u00e7erikler i\u00e7in kullan\u0131c\u0131lara duraklatma, oynatma veya s\u00fcreyi uzatma se\u00e7enekleri sunulmuyordu. Bu durum, bili\u015fsel engelli kullan\u0131c\u0131lar veya okumak i\u00e7in daha fazla zamana ihtiya\u00e7 duyan ki\u015filer i\u00e7in sorun yarat\u0131yordu.<\/p>\n \u00c7\u00f6z\u00fcm:<\/strong> Otomatik olarak hareket eden veya zaman a\u015f\u0131m\u0131 olan t\u00fcm i\u00e7erikler i\u00e7in kullan\u0131c\u0131lara kontrol mekanizmalar\u0131 sa\u011flamak. Karuseller i\u00e7in “Duraklat\/Oynat” d\u00fc\u011fmeleri, zaman a\u015f\u0131m\u0131 olan oturumlar i\u00e7in “S\u00fcreyi Uzat” se\u00e7enekleri veya bildirimler i\u00e7in manuel kapatma d\u00fc\u011fmeleri eklemek.<\/p>\n Bu iyile\u015ftirmeler, kullan\u0131c\u0131lar\u0131n kendi h\u0131zlar\u0131nda i\u00e7erikle etkile\u015fim kurmas\u0131na olanak tan\u0131yarak, eklentinin kullan\u0131labilirli\u011fini ve eri\u015filebilirli\u011fini \u00f6nemli \u00f6l\u00e7\u00fcde art\u0131rd\u0131.<\/p>\n Bir eri\u015filebilirlik eklentisinin denetimi s\u0131ras\u0131nda kar\u015f\u0131la\u015ft\u0131\u011f\u0131m bu sekiz hata, asl\u0131nda web geli\u015ftirme d\u00fcnyas\u0131nda s\u0131k\u00e7a rastlanan sorunlard\u0131r. Bu deneyim, bana kapsaml\u0131 bir eri\u015filebilirlik denetiminin sadece otomatik ara\u00e7larla s\u0131n\u0131rl\u0131 kalmamas\u0131 gerekti\u011fini, manuel testlerin ve farkl\u0131 kullan\u0131c\u0131 perspektiflerinden de\u011ferlendirmelerin ne kadar kritik oldu\u011funu bir kez daha g\u00f6sterdi. Peki, geli\u015ftiriciler ve \u00fcr\u00fcn sahipleri, kendi \u00fcr\u00fcnlerinin eri\u015filebilirli\u011fini sa\u011flamak i\u00e7in hangi ileri d\u00fczey teknikleri ve ipu\u00e7lar\u0131n\u0131 kullanabilirler?<\/p>\n \u00d6ncelikle, manuel testin \u00f6nemini asla k\u00fc\u00e7\u00fcmsemeyin. Otomatik ara\u00e7lar, h\u0131zl\u0131 ve y\u00fczeysel sorunlar\u0131 tespit etmekte harikad\u0131r, ancak bir kullan\u0131c\u0131n\u0131n ger\u00e7ek deneyimini sim\u00fcle edemezler. Klavyeyle gezinme, ekran okuyucu kullanarak i\u00e7erikle etkile\u015fim kurma ve farkl\u0131 taray\u0131c\u0131larda test etme gibi manuel kontroller, otomatik ara\u00e7lar\u0131n g\u00f6z\u00fcnden ka\u00e7an bir\u00e7ok ince detay\u0131 ortaya \u00e7\u0131kar\u0131r. Bu testleri yaparken, kendinizi farkl\u0131 engel t\u00fcrlerine sahip kullan\u0131c\u0131lar\u0131n yerine koymaya \u00e7al\u0131\u015f\u0131n. \u00d6rne\u011fin, fare kullanamayan bir ki\u015finin sadece klavye ile sitenizde nas\u0131l gezindi\u011fini veya g\u00f6rme engelli bir ki\u015finin ekran okuyucuyla i\u00e7eri\u011fi nas\u0131l alg\u0131lad\u0131\u011f\u0131n\u0131 deneyimleyin. Bu empati, tasar\u0131m ve geli\u015ftirme kararlar\u0131n\u0131z\u0131 do\u011frudan etkileyecektir.<\/p>\n \u0130leri d\u00fczey bir denetim i\u00e7in, farkl\u0131 cihaz ve platformlarda test yapmak da hayati \u00f6neme sahiptir. Mobil cihazlarda, tabletlerde ve farkl\u0131 i\u015fletim sistemlerinde (Windows, macOS, Linux) eklentinizin veya web sitenizin nas\u0131l davrand\u0131\u011f\u0131n\u0131 kontrol edin. Her platformun kendine \u00f6zg\u00fc eri\u015filebilirlik \u00f6zellikleri ve ekran okuyucular\u0131 olabilir. Ayr\u0131ca, kullan\u0131c\u0131 testleri d\u00fczenlemek, eri\u015filebilirlik s\u00fcrecinin en de\u011ferli ad\u0131mlar\u0131ndan biridir. Ger\u00e7ek engelli bireyleri \u00fcr\u00fcn\u00fcn\u00fcz\u00fc test etmeye davet etmek, size paha bi\u00e7ilmez geri bildirimler sunar. Bu geri bildirimler, teknik uyumlulu\u011fun \u00f6tesine ge\u00e7erek, ger\u00e7ek d\u00fcnya kullan\u0131labilirlik sorunlar\u0131n\u0131 ve kullan\u0131c\u0131 ihtiya\u00e7lar\u0131n\u0131 anlaman\u0131z\u0131 sa\u011flar.<\/p>\n Eri\u015filebilirli\u011fi sadece bir “sonradan d\u00fc\u015f\u00fcn\u00fclm\u00fc\u015f” bir ad\u0131m olarak de\u011fil, geli\u015ftirme s\u00fcrecinin ba\u015f\u0131ndan itibaren entegre edilmesi gereken bir ilke olarak g\u00f6rmek (Shift-Left yakla\u015f\u0131m\u0131) \u00e7ok \u00f6nemlidir. Tasar\u0131m a\u015famas\u0131nda eri\u015filebilirlik d\u00fc\u015f\u00fcn\u00fclmeye ba\u015fland\u0131\u011f\u0131nda, sorunlar\u0131 d\u00fczeltmek \u00e7ok daha kolay ve maliyetsiz olur. Tasar\u0131mc\u0131lar, renk kontrast\u0131, odak s\u0131ras\u0131 ve etkile\u015fimli bile\u015fenlerin eri\u015filebilirli\u011fi gibi konular\u0131 en ba\u015f\u0131ndan planlamal\u0131d\u0131r. Geli\u015ftiriciler ise semantik HTML kullanmaya, ARIA niteliklerini do\u011fru uygulamaya ve klavye etkile\u015fimlerini dikkatlice kodlamaya \u00f6zen g\u00f6stermelidir. Son olarak, e\u011fer b\u00fct\u00e7eniz varsa, sertifikal\u0131 bir eri\u015filebilirlik uzman\u0131ndan yard\u0131m almak, en kapsaml\u0131 ve do\u011fru denetimi sa\u011flaman\u0131n en etkili yollar\u0131ndan biridir. Bu uzmanlar, en g\u00fcncel WCAG standartlar\u0131na ve en iyi uygulamalara hakimdir ve \u00fcr\u00fcn\u00fcn\u00fcz\u00fc en \u00fcst d\u00fczeyde eri\u015filebilir hale getirmenize yard\u0131mc\u0131 olabilirler. Unutmay\u0131n ki eri\u015filebilirlik, s\u00fcrekli bir \u00e7aba ve iyile\u015ftirme s\u00fcrecidir; tek seferlik bir proje de\u011fildir.<\/p>\n Eri\u015filebilirlik eklentim \u00fczerinde yapt\u0131\u011f\u0131m denetim, ba\u015flang\u0131\u00e7ta bildirilen \u00fc\u00e7 hatan\u0131n \u00f6tesinde sekiz kritik WCAG hatas\u0131 bulmamla sonu\u00e7land\u0131. Bu deneyim, otomatik ara\u00e7lar\u0131n faydalar\u0131na ra\u011fmen, manuel ve kapsaml\u0131 bir denetimin ne kadar hayati oldu\u011funu a\u00e7\u0131k\u00e7a ortaya koydu. Eksik alternatif metinlerden yetersiz renk kontrast\u0131na, klavye odak y\u00f6netimi sorunlar\u0131ndan dinamik i\u00e7erik g\u00fcncellemelerindeki eksik ARIA deste\u011fine kadar uzanan bu hatalar, web geli\u015ftirme s\u00fcre\u00e7lerinde eri\u015filebilirli\u011fin genellikle g\u00f6zden ka\u00e7an ancak kullan\u0131c\u0131 deneyimini derinden etkileyen y\u00f6nlerini temsil etmektedir. Her bir hatan\u0131n tespiti ve \u00e7\u00f6z\u00fcm\u00fc, sadece eklentimin kalitesini art\u0131rmakla kalmad\u0131, ayn\u0131 zamanda eri\u015filebilirlik bilincimi de peki\u015ftirdi.<\/p>\n WCAG standartlar\u0131na uyum sa\u011flamak, g\u00fcn\u00fcm\u00fcz dijital d\u00fcnyas\u0131nda sadece yasal bir zorunluluk de\u011fil, ayn\u0131 zamanda etik bir sorumluluk ve ak\u0131ll\u0131 bir i\u015f stratejisidir. Eri\u015filebilir bir web sitesi veya eklenti, daha geni\u015f bir kitleye ula\u015f\u0131r, marka itibar\u0131n\u0131 g\u00fc\u00e7lendirir ve herkes i\u00e7in daha iyi bir kullan\u0131c\u0131 deneyimi sunar. Bu nedenle, geli\u015ftiricilere ve \u00fcr\u00fcn sahiplerine tavsiyem, eri\u015filebilirli\u011fi geli\u015ftirme s\u00fcrecinin ayr\u0131lmaz bir par\u00e7as\u0131 haline getirmeleridir. Tasar\u0131m a\u015famas\u0131ndan ba\u015flayarak, manuel testler, ekran okuyucu denemeleri ve m\u00fcmk\u00fcnse ger\u00e7ek kullan\u0131c\u0131larla testler yaparak \u00fcr\u00fcnlerinizi s\u00fcrekli olarak denetleyin ve iyile\u015ftirin. Unutmay\u0131n, eri\u015filebilirlik bir var\u0131\u015f noktas\u0131 de\u011fil, s\u00fcrekli bir yolculuktur. Herkes i\u00e7in kapsay\u0131c\u0131 ve eri\u015filebilir bir dijital d\u00fcnya in\u015fa etmek, hepimizin ortak sorumlulu\u011fudur. Bu makalede ele ald\u0131\u011f\u0131m\u0131z \u00e7\u00f6z\u00fcm \u00f6nerileri, bu yolculukta size rehberlik edecek pratik ad\u0131mlar sunmaktad\u0131r.<\/p>\n Hay\u0131r, otomatik ara\u00e7lar eri\u015filebilirlik sorunlar\u0131n\u0131n yakla\u015f\u0131k %20-30’unu tespit edebilir. Renk kontrast\u0131, eksik alt metinler gibi temel sorunlar\u0131 h\u0131zl\u0131ca bulsalar da, klavye navigasyonu, odak y\u00f6netimi, anlaml\u0131 ba\u015fl\u0131k hiyerar\u015fisi ve ARIA niteliklerinin do\u011fru kullan\u0131m\u0131 gibi karma\u015f\u0131k etkile\u015fim ve ba\u011flamsal sorunlar\u0131 tespit etmek i\u00e7in manuel testler ve ekran okuyucu denemeleri vazge\u00e7ilmezdir.<\/p>\n Kesinlikle hay\u0131r. Eri\u015filebilirlik, engelli bireylerin yan\u0131 s\u0131ra ya\u015fl\u0131lar, ge\u00e7ici engeli olanlar (\u00f6rne\u011fin, kolu k\u0131r\u0131k bir ki\u015fi) veya mobil cihazlarda k\u0131s\u0131tl\u0131 internet ba\u011flant\u0131s\u0131yla kullananlar gibi geni\u015f bir kullan\u0131c\u0131 kitlesi i\u00e7in fayda sa\u011flar. Eri\u015filebilir bir tasar\u0131m, herkes i\u00e7in daha iyi bir kullan\u0131c\u0131 deneyimi sunar, \u00e7\u00fcnk\u00fc daha basit, anla\u015f\u0131l\u0131r ve esnek aray\u00fczler demektir.<\/p>\n \u00c7o\u011fu yasal d\u00fczenleme ve kurumsal politika, WCAG 2.1 AA seviyesinde uyumlulu\u011fu zorunlu k\u0131lar veya tavsiye eder. AA seviyesi, geni\u015f bir kullan\u0131c\u0131 kitlesi i\u00e7in \u00f6nemli eri\u015filebilirlik iyile\u015ftirmeleri sa\u011flarken, geli\u015ftirme maliyetleri a\u00e7\u0131s\u0131ndan da makul bir denge sunar. AAA seviyesi en y\u00fcksek uyumluluktur ancak t\u00fcm web siteleri i\u00e7in pratik veya ula\u015f\u0131labilir olmayabilir.<\/p>\n Mevcut bir projeyi eri\u015filebilir hale getirmek, projenin b\u00fcy\u00fckl\u00fc\u011f\u00fcne ve mevcut eri\u015filebilirlik sorunlar\u0131n\u0131n ciddiyetine ba\u011fl\u0131 olarak de\u011fi\u015febilir. Ancak, eri\u015filebilirli\u011fi geli\u015ftirme s\u00fcrecinin ba\u015f\u0131ndan itibaren entegre etmek (Shift-Left yakla\u015f\u0131m\u0131) her zaman daha kolay ve maliyeti daha d\u00fc\u015f\u00fckt\u00fcr. B\u00fcy\u00fck \u00f6l\u00e7ekli d\u00fczeltmeler zaman ve kaynak gerektirse de, uzun vadede yasal riskleri azalt\u0131r, kullan\u0131c\u0131 taban\u0131n\u0131 geni\u015fletir ve marka itibar\u0131n\u0131 art\u0131r\u0131r.<\/p>\n Eri\u015filebilirlik ve SEO aras\u0131nda g\u00fc\u00e7l\u00fc bir ili\u015fki vard\u0131r. \u00d6rne\u011fin, anlaml\u0131 alternatif metinler, d\u00fczg\u00fcn ba\u015fl\u0131k hiyerar\u015fisi, temiz ve semantik HTML yap\u0131s\u0131, iyi organize edilmi\u015f i\u00e7erik ve klavye ile gezinebilirlik gibi WCAG uygulamalar\u0131, arama motorlar\u0131n\u0131n i\u00e7eri\u011finizi daha iyi anlamas\u0131na ve dizine eklemesine yard\u0131mc\u0131 olur. Bu da daha iyi arama motoru s\u0131ralamalar\u0131na ve daha fazla organik trafi\u011fe yol a\u00e7abilir.<\/p>\n #WebEri\u015filebilirli\u011fi #WCAG #EklentiGeli\u015ftirme #Eri\u015filebilirlikDenetimi #WebGeli\u015ftirme<\/p>\nalt<\/code> niteli\u011fi (alternative text) eksikti. Bu durum, ekran okuyucu kullanan g\u00f6rme engelli kullan\u0131c\u0131lar\u0131n bu g\u00f6rsellerin ne anlama geldi\u011fini veya ne i\u015fe yarad\u0131\u011f\u0131n\u0131 anlamas\u0131n\u0131 engelliyordu. \u00d6rne\u011fin, bir “ayarlar” ikonu sadece g\u00f6rsel olarak mevcutken, ekran okuyucu kullan\u0131c\u0131ya “resim” veya “ikon” gibi anlams\u0131z bir ifade iletiyordu.<\/p>\nalt<\/code> metinleri eklemek. E\u011fer g\u00f6rsel sadece dekoratif bir ama\u00e7 ta\u015f\u0131yorsa ve i\u00e7eri\u011fe bilgi katm\u0131yorsa, alt=\"\"<\/code> \u015feklinde bo\u015f bir alt<\/code> niteli\u011fi kullanmak, ekran okuyucular\u0131n bu g\u00f6rselleri atlamas\u0131n\u0131 sa\u011flar. Bu, gereksiz ve kafa kar\u0131\u015ft\u0131r\u0131c\u0131 bilgiyi \u00f6nler.<\/p>\n\n<!-- Hatal\u0131 Kullan\u0131m -->\n<img src=\"ayarlar-ikonu.png\">\n\n<!-- Do\u011fru Kullan\u0131m (Anlaml\u0131 \u0130\u00e7erik \u0130\u00e7in) -->\n<img src=\"ayarlar-ikonu.png\" alt=\"Ayarlar men\u00fcs\u00fcn\u00fc a\u00e7\">\n\n<!-- Do\u011fru Kullan\u0131m (Dekoratif \u0130\u00e7erik \u0130\u00e7in) -->\n<img src=\"dekoratif-\u00e7izgi.png\" alt=\"\">\n <\/code><\/pre>\n<\/p><\/div>\n2. Yetersiz Renk Kontrast\u0131 (WCAG 1.4.3 Contrast (Minimum))<\/h3>\n
#AAAAAA<\/code>) beyaz arka plan \u00fczerinde yetersiz kontrast sa\u011flarken, daha koyu bir gri (#555555<\/code>) se\u00e7imi bu sorunu \u00e7\u00f6zebilir. Bu de\u011fi\u015fiklikler, eklentinin g\u00f6rsel olarak daha okunakl\u0131 olmas\u0131n\u0131 ve daha geni\u015f bir kullan\u0131c\u0131 kitlesi taraf\u0131ndan rahat\u00e7a kullan\u0131labilmesini sa\u011flad\u0131.<\/p>\n3. Klavye Odak Y\u00f6netimi Sorunlar\u0131 (WCAG 2.1.1 Keyboard)<\/h3>\n
tabindex=\"0\"<\/code> niteli\u011fini kullanmak ve odakland\u0131klar\u0131nda belirgin bir g\u00f6rsel odak g\u00f6stergesi (outline<\/code> veya box-shadow<\/code> ile) sa\u011flamak. Odak s\u0131ras\u0131n\u0131n mant\u0131ksal ve beklenen bir ak\u0131\u015f\u0131 takip etti\u011finden emin olmak i\u00e7in HTML yap\u0131s\u0131n\u0131 ve tabindex<\/code> de\u011ferlerini d\u00fczenlemek.<\/p>\n\n<!-- Hatal\u0131 Kullan\u0131m (Odaklan\u0131lamaz) -->\n<span onclick=\"doSomething()\">Ayarlar\u0131 A\u00e7<\/span>\n\n<!-- Do\u011fru Kullan\u0131m (Odaklanabilir ve G\u00f6rsel Odakl\u0131) -->\n<button type=\"button\" class=\"my-custom-button\">Ayarlar\u0131 A\u00e7<\/button>\n<!-- Veya, e\u011fer button etiketi kullan\u0131lam\u0131yorsa -->\n<span tabindex=\"0\" role=\"button\" class=\"my-custom-span-button\">Ayarlar\u0131 A\u00e7<\/span>\n\n<!-- CSS ile odak halkas\u0131 \u00f6rne\u011fi (temadan miras alaca\u011f\u0131 i\u00e7in inline style kullan\u0131lmamal\u0131d\u0131r) -->\n<style>\n .my-custom-button:focus, .my-custom-span-button:focus {\n outline: 2px solid blue; \/* Temadan miras al\u0131nacak bir renk olmal\u0131 *\/\n outline-offset: 2px;\n }\n<\/style>\n <\/code><\/pre>\n<\/p><\/div>\n4. Form Elemanlar\u0131nda Eksik Etiketler (WCAG 3.3.2 Labels or Instructions)<\/h3>\n
<label><\/code> etiketi ile yap\u0131lmam\u0131\u015ft\u0131. Ekran okuyucular i\u00e7in bu, form alan\u0131n\u0131n amac\u0131n\u0131 anlamay\u0131 imkans\u0131z hale getiriyordu.<\/p>\n<label><\/code> etiketi ve for<\/code> niteli\u011fi ile benzersiz bir id<\/code> niteli\u011fine sahip olan form eleman\u0131 aras\u0131nda a\u00e7\u0131k bir ili\u015fki kurarak do\u011fru \u015fekilde etiketlemek. Bu, ekran okuyucular\u0131n form alan\u0131n\u0131n ne i\u00e7in oldu\u011funu kullan\u0131c\u0131ya bildirmesini sa\u011flar.<\/p>\n\n<!-- Hatal\u0131 Kullan\u0131m -->\n<p>Kullan\u0131c\u0131 Ad\u0131:<\/p>\n<input type=\"text\" name=\"username\">\n\n<!-- Do\u011fru Kullan\u0131m -->\n<label for=\"username\">Kullan\u0131c\u0131 Ad\u0131:<\/label>\n<input type=\"text\" id=\"username\" name=\"username\">\n <\/code><\/pre>\n<\/p><\/div>\n5. Dinamik \u0130\u00e7erik G\u00fcncellemelerinde Yetersiz ARIA Deste\u011fi (WCAG 4.1.2 Name, Role, Value)<\/h3>\n
aria-live<\/code> b\u00f6lgeleri olarak i\u015faretlemek. Bu, ekran okuyucular\u0131n bu b\u00f6lgelerdeki de\u011fi\u015fiklikleri otomatik olarak kullan\u0131c\u0131ya duyurmas\u0131n\u0131 sa\u011flar. aria-live=\"polite\"<\/code>, acil olmayan g\u00fcncellemeler i\u00e7in, aria-live=\"assertive\"<\/code> ise kritik ve acil durumlar i\u00e7in kullan\u0131l\u0131r.<\/p>\n\n<div id=\"status-message\" aria-live=\"polite\"><\/div>\n\n<script>\n function showSuccessMessage(message) {\n document.getElementById('status-message').textContent = message;\n }\n\n \/\/ \u00d6rne\u011fin, bir i\u015flem sonras\u0131 mesaj g\u00f6sterme\n \/\/ showSuccessMessage(\"Ayarlar ba\u015far\u0131yla kaydedildi!\");\n<\/script>\n <\/code><\/pre>\n<\/p><\/div>\n6. Dil De\u011fi\u015fikli\u011finin Bildirilmemesi (WCAG 3.1.2 Language of Parts)<\/h3>\n
lang<\/code> niteli\u011fi ile belirtilmiyordu. Bu, ekran okuyucular\u0131n metni yanl\u0131\u015f telaffuz etmesine veya farkl\u0131 dillerdeki s\u00f6zl\u00fcklerini kullanamamas\u0131na yol a\u00e7\u0131yordu.<\/p>\n<html lang=\"tr\"><\/code> olarak belirtmek ve farkl\u0131 bir dildeki belirli metin par\u00e7alar\u0131n\u0131 ilgili lang<\/code> niteli\u011fi ile i\u015faretlemek.<\/p>\n7. Ba\u015fl\u0131k Hiyerar\u015fisi Sorunlar\u0131 (WCAG 2.4.6 Headings and Labels)<\/h3>\n
<h2><\/code> ba\u015fl\u0131\u011f\u0131ndan sonra do\u011frudan <h4><\/code> ba\u015fl\u0131\u011f\u0131 kullan\u0131lm\u0131\u015ft\u0131 veya ba\u015fl\u0131klar sadece g\u00f6rsel olarak b\u00fcy\u00fck g\u00f6r\u00fcnmeleri i\u00e7in kullan\u0131lm\u0131\u015ft\u0131 (<p><\/code> etiketine stil vererek). Bu, ekran okuyucu kullan\u0131c\u0131lar\u0131n\u0131n sayfa yap\u0131s\u0131n\u0131 anlamas\u0131n\u0131 ve belirli b\u00f6l\u00fcmlere h\u0131zl\u0131ca atlamas\u0131n\u0131 engelliyordu.<\/p>\n<h1><\/code>‘den <h6><\/code>‘ya kadar) mant\u0131ksal bir hiyerar\u015fi i\u00e7inde kullanmak. Sayfa ba\u015f\u0131na sadece bir <h1><\/code> etiketi kullanmak ve di\u011fer ba\u015fl\u0131klar\u0131 seviyelerine g\u00f6re s\u0131ralamak (<h2><\/code> alt\u0131nda <h3><\/code>, vb.). Ba\u015fl\u0131klar\u0131 sadece g\u00f6rsel ama\u00e7larla kullanmaktan ka\u00e7\u0131nmak.<\/p>\n\n<!-- Hatal\u0131 Kullan\u0131m -->\n<h2>Genel Ayarlar<\/h2>\n<h4>Dil Se\u00e7enekleri<\/h4>\n<h2>Geli\u015fmi\u015f Ayarlar<\/h2>\n\n<!-- Do\u011fru Kullan\u0131m -->\n<h2>Genel Ayarlar<\/h2>\n<h3>Dil Se\u00e7enekleri<\/h3>\n<h2>Geli\u015fmi\u015f Ayarlar<\/h2>\n <\/code><\/pre>\n<\/p><\/div>\n8. Zaman S\u0131n\u0131rl\u0131 \u0130\u00e7eriklerde Yetersiz Kontrol (WCAG 2.2.1 Timing Adjustable)<\/h3>\n
\n<div class=\"carousel\">\n <!-- Karusel \u0130\u00e7eri\u011fi -->\n <button type=\"button\" aria-label=\"Karuseli duraklat\">Duraklat<\/button>\n <button type=\"button\" aria-label=\"Karuseli oynat\">Oynat<\/button>\n<\/div>\n\n<div class=\"notification\" role=\"alert\" aria-live=\"assertive\">\n <p>Bu bildirim 10 saniye i\u00e7inde kapanacakt\u0131r.<\/p>\n <button type=\"button\" aria-label=\"Bildirimi kapat\">X<\/button>\n<\/div>\n <\/code><\/pre>\n<\/p><\/div>\nKapsaml\u0131 Bir Eri\u015filebilirlik Denetimi \u0130\u00e7in \u0130pu\u00e7lar\u0131 ve \u0130leri D\u00fczey Teknikler<\/h2>\n
Eri\u015filebilir Bir Gelecek \u0130n\u015fa Etmek: Sonu\u00e7 ve \u00d6neriler<\/h2>\n
S\u0131k\u00e7a Sorulan Sorular (SSS)<\/h2>\n
Otomatik eri\u015filebilirlik denetim ara\u00e7lar\u0131 tek ba\u015f\u0131na yeterli midir?<\/h3>\n
Eri\u015filebilirlik sadece engelli bireyler i\u00e7in mi \u00f6nemlidir?<\/h3>\n
WCAG hangi seviyeye uyumlu olmal\u0131y\u0131m?<\/h3>\n
Mevcut bir web sitesini veya eklentiyi eri\u015filebilir yapmak zor mudur?<\/h3>\n
Eri\u015filebilirlik standartlar\u0131na uymak SEO’ya nas\u0131l katk\u0131 sa\u011flar?<\/h3>\n