<script src="https://cdn.engelsizwebsitesi.com/loader.js" data-license="LİSANS-ANAHTARINIZ"></script>

Widget Özellikleri

Engelsiz Web Widget, web sitenizi tüm kullanıcılar için erişilebilir hale getiren kapsamlı bir erişilebilirlik çözümüdür. Widget, 8 farklı kategori altında 45+ özellik ve 7 hazır profil sunarak görme, işitme, motor ve bilişsel engelli kullanıcıların sitenizi rahatça kullanabilmesini sağlar.

Hazır Profiller

Hazır profiller, belirli engel türleri için optimize edilmiş özellik kombinasyonlarıdır. Kullanıcılar tek tıkla ihtiyaçlarına uygun ayarları aktifleştirebilir. Profil seçildiğinde, o profile ait tüm özellikler otomatik olarak açılır.

Görme Engelli Profili

Az gören kullanıcılar için tasarlanmış bu profil, metinleri daha okunaklı hale getirir ve görsel kontrastı artırır. Kullanıcıların içeriği daha rahat ayırt edebilmesi için optimize edilmiştir.

Motor Engelli Profili

El titremesi, kas güçsüzlüğü veya koordinasyon bozukluğu yaşayan kullanıcılar için tasarlanmıştır. Yanlış tıklamaları önler ve hedeflere ulaşmayı kolaylaştırır.

Bilişsel Profil

Disleksi, öğrenme güçlüğü veya okuma zorluğu yaşayan kullanıcılar için optimize edilmiştir. Metinlerin daha kolay okunmasını ve anlaşılmasını sağlar.

Epilepsi Profili

Işığa duyarlı epilepsi hastalarını korumak için tasarlanmıştır. Ani parlamalar, yanıp sönen içerikler ve hızlı animasyonlar devre dışı bırakılır.

DEHB Profili

Dikkat Eksikliği ve Hiperaktivite Bozukluğu olan kullanıcılar için odaklanmayı kolaylaştırır. Dikkat dağıtıcı unsurları minimize eder ve okuma odağını artırır.

Körlük Profili

Tamamen görme engelli veya çok az gören kullanıcılar için sesli araçları aktifleştirir. Ekran okuyucu benzeri bir deneyim sunar.

Parkinson / Tremör Profili

Parkinson hastalığı veya el titremesi yaşayan kullanıcılar için geliştirilmiş en kapsamlı profildir. Mouse kontrolünü kolaylaştırır ve yanlış tıklamaları önler.

Okuma Deneyimi

Bu kategori, metinlerin okunabilirliğini artırmak için tasarlanmış özellikleri içerir. Yazı boyutu, satır aralığı, harf boşluğu gibi tipografik ayarlar ve okumayı kolaylaştıran özel araçlar bu kategoride yer alır.

Yazı Boyutu

Sayfadaki tüm metinlerin boyutunu artırır veya azaltır. Bu özellik özellikle az gören kullanıcılar için kritik öneme sahiptir.

• Aralık: %-50 ile %100 arası (10’ar birim artış)
• Varsayılan: %0 (orijinal boyut)
• Nasıl Çalışır: Her elementin orijinal font boyutu kaydedilir ve seçilen yüzdeye göre yeniden hesaplanır.
• Not: Widget’ın kendi arayüzü bu değişiklikten etkilenmez.

İçerik Boyutu (Zoom)

Tüm sayfayı yakınlaştırır veya uzaklaştırır. Yazı boyutundan farklı olarak, görseller ve diğer elementler de bu değişiklikten etkilenir.

• Aralık: %0 ile %50 arası (5’er birim artış)
• Varsayılan: %0 (orijinal boyut)
• Nasıl Çalışır: CSS zoom özelliği kullanılarak tüm sayfa ölçeklenir.
• Fark: Yazı boyutu sadece metinleri etkilerken, içerik boyutu her şeyi etkiler.

Satır Yüksekliği

Metin satırları arasındaki dikey boşluğu ayarlar. Daha geniş satır aralığı, özellikle disleksi ve okuma güçlüğü olan kullanıcılar için okumayı kolaylaştırır.

• Aralık: -5 ile +5 arası
• Değerler: 1.0 (en dar) ile 2.5 (en geniş) arası line-height
• Varsayılan: 0 (sitenin orijinal satır yüksekliği)
• Öneri: Uzun metinlerde +2 veya +3 değeri okunabilirliği önemli ölçüde artırır.

Harf Boşluğu

Harfler arasındaki yatay mesafeyi ayarlar. Dislektik kullanıcılar için harflerin birbirine karışmasını önler.

• Aralık: -5 ile +5 arası
• Değerler: -2px ile +3px arası letter-spacing
• Varsayılan: 0 (sitenin orijinal harf aralığı)
• Kullanım: Disleksi hastalarında +2 veya +3 değeri b-d, p-q gibi karışan harflerin ayırt edilmesini kolaylaştırır.

Yazı Hizalama

Tüm metinlerin hizalamasını değiştirir. Üç seçenek sunar: Sol, Orta ve Sağ.

• Sol Hizalama: Metinler sol kenara yaslanır. Batı dillerinde en yaygın ve okunaklı format.
• Orta Hizalama: Metinler ortaya hizalanır. Kısa başlıklar için uygundur.
• Sağ Hizalama: Metinler sağ kenara yaslanır. Arapça, İbranice gibi sağdan sola yazılan diller için.
• Not: Tekrar tıklandığında hizalama sıfırlanır ve sitenin orijinal hizalaması geri döner.

Disleksi Dostu Font

Sayfadaki tüm fontları “OpenDyslexic” fontuyla değiştirir. Bu font, disleksi hastaları için özel olarak tasarlanmıştır.

• Font: OpenDyslexic (açık kaynak)
• Özelliği: Harflerin alt kısımları daha kalın yapılarak b-d, p-q gibi karışan harfler ayırt edilebilir hale gelir.
• Yedek Font: OpenDyslexic yüklenemezse Comic Sans MS kullanılır.
• Bilimsel Destek: Araştırmalar, bu tür fontların dislektik bireylerde okuma hızını artırdığını göstermektedir.

Metin Büyüteci

Mouse ile üzerine gelinen metni, yanında açılan bir tooltip’te büyütülmüş olarak gösterir. Sayfanın genel görünümünü bozmadan belirli metinleri okumak için idealdir.

• Büyütme: 24px font boyutunda tooltip
• Konum: Mouse imlecinin yanında takip eder
• Maksimum: 500 karaktere kadar metin gösterilir
• Kullanım: Küçük yazılı dipnotlar, yasal metinler veya karmaşık tablolarda idealdir.

Bilişsel Okuma (Bionic Reading)

Her kelimenin ilk yarısını kalın yaparak beyni, kelimeyi tamamlamaya yönlendirir. Bu teknik, okuma hızını önemli ölçüde artırır.

• Çalışma Mantığı: “Merhaba” → “Merhaba”
• Bilimsel Temel: Beyin, kelimenin tamamını görmeden tanıyabilir. Kalın başlangıç bu tanımayı hızlandırır.
• Etkilenen Elementler: Paragraflar, listeler, başlıklar, tablolar ve linkler.
• Devre Dışı: Kapatıldığında orijinal metin formatı geri yüklenir.

Başlıkları Vurgula

H1’den H6’ya kadar tüm başlıkları mavi çerçeve ile belirginleştirir. Sayfa yapısını anlamayı ve içerikte gezinmeyi kolaylaştırır.

• Stil: 3px kalınlığında mavi (#0066CC) outline
• Offset: 3px boşluk bırakılır
• Faydası: Görme engelli kullanıcıların sayfa hiyerarşisini anlamasını sağlar.

Bağlantıları Vurgula

Sayfadaki tüm linkleri görsel olarak belirginleştirir. Renk körü veya az gören kullanıcılar için linklerin ayırt edilmesini sağlar.

• Stil: 2px mavi outline + altı çizili
• Offset: 2px boşluk
• Alt Çizgi Mesafesi: 3px
• Not: Sadece renge dayalı link gösterimi renk körleri için erişilebilir değildir. Bu özellik sorunu çözer.

Sesli Araçlar

Görme engelli kullanıcılar ve ekran okuyucu kullananlar için sesli asistan özellikleri. Metin-konuşma dönüşümü ve ses komutlarıyla navigasyon bu kategoride yer alır.

Metni Sesli Oku (Text-to-Speech)

Seçilen metni tarayıcının yerleşik ses sentezi ile sesli olarak okur. 30 farklı dilde destek sunar.

• Kullanım: Herhangi bir metni seçin, otomatik olarak okunmaya başlar.
• Dil Desteği: Widget’ın seçili diline göre doğru telaffuz kullanılır.
• Hız: 0.9x (normal hızın biraz altı, anlaşılırlık için)
• Durdurma: Yeni metin seçildiğinde önceki okuma durur.
• Tarayıcı Desteği: Chrome, Firefox, Safari, Edge (Web Speech API).

Sesli Navigasyon

Sesli komutlarla sayfayı ve widget’ı kontrol etmenizi sağlar. Eller serbest kullanım için idealdir.

• Aktivasyon: Widget’tan veya klavyede “B” tuşuna basarak
• Komut Paneli: Ekranda kullanılabilir komutları gösteren panel açılır
• 30 Dil: Her dil için yerel komutlar tanımlanmıştır

Görsel Ayarlar

Renk kontrastı, parlaklık ve renk şemaları ile ilgili ayarlar. Az gören, ışığa hassas veya belirli renk tercihlerine sahip kullanıcılar için önemlidir.

Koyu Kontrast (Dark Mode)

Sayfayı koyu temaya dönüştürür. Açık arkaplan koyu, koyu metin açık renge çevrilir.

• Nasıl Çalışır: CSS invert(1) hue-rotate(180deg) filtresi uygulanır
• Görseller: Resim ve videolar ters çevrilmez, orijinal renkleri korunur
• Faydası: Göz yorgunluğunu azaltır, karanlık ortamlarda kullanımı kolaylaştırır
• Not: Diğer kontrast modlarıyla birlikte kullanılamaz, biri seçilince diğerleri kapanır

Açık Kontrast (Light Mode)

Sayfayı maksimum açık temaya zorlar. Arkaplan beyaz, tüm metinler siyah yapılır.

• Arkaplan: Saf beyaz (#ffffff)
• Metin: Saf siyah (#000000)
• Faydası: Karmaşık renk şemalarını sadeleştirir
• Kullanım: Koyu temalı sitelerde okuma güçlüğü çekenler için

Tek Renkli (Monochrome)

Sayfadaki tüm renkleri gri tonlarına dönüştürür.

• Nasıl Çalışır: CSS grayscale(100%) filtresi
• Faydası: Dikkat dağıtıcı renkleri ortadan kaldırır
• Kullanım: DEHB, otizm veya aşırı uyaranlara hassas kullanıcılar için

Yüksek Kontrast

Renk kontrastını %40 oranında artırır. Açık ve koyu tonlar arasındaki fark belirginleşir.

• Nasıl Çalışır: CSS contrast(1.4) filtresi
• Faydası: Az gören kullanıcılar için içerik daha ayırt edilebilir hale gelir
• Not: Çok yüksek kontrast göz yorgunluğuna neden olabilir, dengeli kullanılmalıdır

Yüksek Doygunluk

Renk canlılığını %80 oranında artırır. Soluk renkler daha parlak görünür.

• Nasıl Çalışır: CSS saturate(1.8) filtresi
• Faydası: Renkleri ayırt etmekte güçlük çeken kullanıcılar için
• Not: Düşük doygunluk ile birlikte kullanılamaz

Düşük Doygunluk

Renk canlılığını %60 oranında azaltır. Renkler daha pastel ve sakin görünür.

• Nasıl Çalışır: CSS saturate(0.4) filtresi
• Faydası: Işığa hassas, epilepsi veya migren hastaları için rahatlatıcı
• Kullanım: Parlak reklamlar ve dikkat çekici renkler yumuşatılır

Metin Rengi

Başlıklar hariç tüm metinlerin rengini değiştirir. 8 renk seçeneği sunar.

• Renkler: Kırmızı, Turuncu, Sarı, Yeşil, Mavi, Mor, Siyah, Beyaz
• Kapsam: Paragraflar, listeler, tablolar (başlıklar hariç)
• İptal: Aynı renge tekrar tıklandığında orijinal renklere döner

Başlık Rengi

Sadece başlıkların (H1-H6) rengini değiştirir.

• Renkler: Kırmızı, Turuncu, Sarı, Yeşil, Mavi, Mor, Siyah, Beyaz
• Faydası: Başlıkları içerikten ayırt etmeyi kolaylaştırır
• Kombinasyon: Metin rengi ile birlikte kullanılabilir

Arka Plan Rengi

Sayfanın arkaplan rengini değiştirir. Pastel tonlar ve koyu seçenekler sunar.

• Renkler: Açık Kırmızı, Açık Turuncu, Açık Sarı, Açık Yeşil, Açık Mavi, Açık Mor, Koyu, Beyaz
• Faydası: Irlen Sendromu hastaları belirli arkaplan renklerinde daha rahat okur
• Yaygın Tercih: Açık sarı veya açık mavi arkaplan okuma güçlüğünü azaltabilir

Renk Körlüğü

Dünya nüfusunun yaklaşık %8’i (erkeklerde %12) bir tür renk körlüğüne sahiptir. Bu filtreler, renkleri renk körü kullanıcıların ayırt edebileceği şekilde dönüştürür.

Protanopia (Kırmızı Körlüğü)

Kırmızı ışığa duyarlı koni hücrelerin eksik olduğu veya çalışmadığı durum. Kırmızı ve yeşil tonları ayırt etmekte güçlük çekilir.

• Etkilenen Renkler: Kırmızı, turuncu, sarı-yeşil
• Görünüm: Kırmızılar kahverengimsi, yeşiller sarımsı görünür
• Filtre: SVG renk matrisi ile kırmızı kanalı yeniden dağıtılır
• Yaygınlık: Erkeklerin %1’i

Deuteranopia (Yeşil Körlüğü)

Yeşil ışığa duyarlı koni hücrelerin eksik olduğu durum. En yaygın renk körlüğü tipidir.

• Etkilenen Renkler: Yeşil, sarı, turuncu, açık kırmızı
• Görünüm: Yeşiller kahverengimsi, kırmızılar turuncumsu görünür
• Filtre: SVG renk matrisi ile yeşil kanalı yeniden dağıtılır
• Yaygınlık: Erkeklerin %6’sı

Tritanopia (Mavi Körlüğü)

Mavi ışığa duyarlı koni hücrelerin eksik olduğu nadir durum. Mavi ve sarı tonları ayırt etmekte güçlük çekilir.

• Etkilenen Renkler: Mavi, mor, sarı, turuncu
• Görünüm: Maviler yeşilimsi, sarılar pembemsi görünür
• Filtre: SVG renk matrisi ile mavi kanalı yeniden dağıtılır
• Yaygınlık: Nüfusun %0.01’inden az

Achromatopsia (Tam Renk Körlüğü)

Tüm koni hücrelerin çalışmadığı veya eksik olduğu çok nadir durum. Dünya tamamen gri tonlarında görünür.

• Görünüm: Siyah-beyaz film gibi, sadece parlaklık farklılıkları algılanır
• Ek Sorunlar: Genellikle ışığa aşırı hassasiyet ve düşük görme keskinliği eşlik eder
• Filtre: Grayscale + hafif kontrast artışı (%20)
• Yaygınlık: 30.000 kişide 1

Motor Engelli

El titremesi, kas güçsüzlüğü, koordinasyon bozukluğu veya felç sonrası hareket kısıtlılığı yaşayan kullanıcılar için mouse ve klavye kullanımını kolaylaştıran özellikler.

Çift Tıklama Koruması

Art arda yapılan hızlı tıklamaları engeller. Titreme nedeniyle oluşan yanlış çift tıklamaları önler.

• Gecikme: 500ms (yarım saniye)
• Çalışma: İlk tıklamadan sonra 500ms içindeki tıklamalar yoksayılır
• Faydası: Form gönderme, ödeme yapma gibi kritik işlemlerde çift işlem önlenir

Hover Gecikmesi

Hover (üzerine gelme) efektlerinin aktif olması için bekleme süresi ekler.

• Gecikme: 300ms
• Faydası: Yanlışlıkla açılan dropdown menüler ve tooltip’ler önlenir
• Kullanım: Mouse’u sabit tutmakta zorlanan kullanıcılar için

Yapışkan Hover

Tıklanan element, tıklanmış olarak vurgulanmış şekilde kalır.

• Görsel: Mavi kesikli çerçeve + açık mavi arkaplan
• Davranış: Başka bir yere tıklanana kadar vurgu kalır
• Faydası: Kullanıcı nereye tıkladığını takip edebilir

Mouse Vurgulama (Hover Highlight)

Mouse ile üzerine gelinen her elementi hafifçe vurgular.

• Görsel: Hafif arkaplan rengi değişimi
• Faydası: Mouse’un hangi element üzerinde olduğu net görülür
• Not: Yapışkan hover’dan farklı olarak mouse ayrıldığında vurgu kalkar

Mouse Kontrolü

Parkinson hastalığı, esansiyel tremor veya diğer hareket bozuklukları yaşayan kullanıcılar için gelişmiş mouse kontrol özellikleri. Bu kategori, titremeleri filtreler ve hedeflere tıklamayı kolaylaştırır.

Tremör Filtresi

Küçük el titremelerini algılayıp filtreler. Mouse hareketi daha stabil hale gelir.

• Algoritma: Son 5 mouse pozisyonunun ortalaması alınır
• Dead Zone: Stabilizasyon seviyesine göre 5-25 piksel
• Çalışma: Dead zone içindeki küçük hareketler yoksayılır
• Sonuç: İmleç titremeye rağmen sabit bir noktada durabilir

Stabilizasyon Seviyesi

Tremör filtresinin hassasiyetini ayarlar.

• Aralık: 1 ile 5 arası
• Seviye 1: 5 piksel dead zone (hafif titreme)
• Seviye 3: 15 piksel dead zone (orta titreme) – Varsayılan
• Seviye 5: 25 piksel dead zone (şiddetli titreme)
• Not: Yüksek seviyeler hassas kontrolü zorlaştırabilir

Görsel İşaretçi

Mouse konumunu gösteren büyük, renkli bir halka ekler.

• Boyut: 40×40 piksel
• Renk: Yarı saydam mavi halka
• Faydası: Mouse imlecini bulmak kolaylaşır
• Tremör Entegrasyonu: Tremör filtresi aktifse stabilize pozisyonu gösterir

Büyük Tıklama Alanları

Buton ve linklerin tıklanabilir alanını genişletir.

• Minimum Boyut: 48×48 piksel (WCAG önerisi)
• Görsel: Mavi kenarlık ile genişletilmiş alan gösterilir
• Padding: 12px dikey, 16px yatay
• Faydası: Küçük butonlara tıklamak kolaylaşır

Mıknatıslı Hedefler (Sticky Targets)

Mouse, tıklanabilir elementlere yaklaştığında otomatik olarak hedefe yapışır.

• Mıknatıs Mesafesi: 30 piksel
• Hedefler: Butonlar, linkler, form elemanları
• Görsel: Yapışılan element vurgulanır
• Faydası: Hassas hedeflemeye gerek kalmaz

Tıklama Onayı

Tıklamadan önce kısa bir onay süresi ekler. Yanlış tıklamalar önlenir.

• Bekleme Süresi: 500ms (yarım saniye)
• Görsel: Dönen ilerleme çemberi
• Çalışma: Tıklama yapılır, çember tamamlanınca işlem gerçekleşir
• İptal: Mouse hareket ettirilirse tıklama iptal edilir

Navigasyon

Sayfada gezinmeyi kolaylaştıran ve dikkat dağıtıcı unsurları azaltan özellikler. Okuma odaklarını artırır ve gereksiz içerikleri gizler.

Sesleri Kapat

Sayfadaki tüm video ve ses içeriklerini sessize alır.

• Etkilenenler: Video, audio elementleri ve iframe’ler
• Görsel: Video/iframe’ler hafif soldurulur (%70 opaklık)
• Faydası: Otomatik çalan videolar sessizleştirilir
• Kullanım: İşitme engelliler veya sessiz ortamda çalışanlar için

Resimleri Gizle

Sayfadaki tüm görsel içerikleri gizler.

• Etkilenenler: img, picture, video, background-image
• Yöntem: Opaklık sıfıra düşürülür (alan korunur)
• Faydası: Dikkat dağıtıcı görseller kaldırılır, sayfa daha hızlı yüklenir hissi
• Kullanım: Yalnızca metne odaklanmak isteyenler için

Okuma Kılavuzu

Mouse’u takip eden yatay sarı şerit. Satır takibini kolaylaştırır.

• Yükseklik: 40 piksel şeffaf sarı alan
• Kenarlık: Üst ve alt mavi çizgiler
• Pozisyon: Mouse’un dikey konumunu takip eder
• Faydası: Uzun metinlerde satır atlamayı önler

Okuma Maskesi

Ekranın üst ve alt kısmını karartarak sadece okunan satırı görünür bırakır.

• Görünür Alan: 100 piksel yüksekliğinde
• Maske Rengi: %75 opak siyah
• Takip: Mouse’un dikey konumuna göre hareket eder
• Faydası: DEHB ve dikkat dağınıklığı yaşayanlar için odaklanmayı artırır

Animasyonları Durdur

Sayfadaki tüm CSS animasyonlarını ve geçişleri devre dışı bırakır.

• Etkilenenler: CSS animation, transition, ::before, ::after animasyonları
• Yöntem: animation-duration ve transition sıfırlanır
• Faydası: Epilepsi tetikleyicileri, dikkat dağıtıcı hareketler engellenir
• Önemli: GIF animasyonları CSS ile durdurulamaz

Koyu İmleç

Standart mouse imlecini büyük, koyu renkli bir okla değiştirir.

• Boyut: 32×32 piksel
• Renk: Siyah dolgu, beyaz kenarlık
• Faydası: Açık arkaplanlar üzerinde imleç daha görünür olur
• Not: Açık imleç ile birlikte kullanılamaz

Açık İmleç

Standart mouse imlecini büyük, açık renkli bir okla değiştirir.

• Boyut: 32×32 piksel
• Renk: Beyaz dolgu, siyah kenarlık
• Faydası: Koyu arkaplanlar üzerinde imleç daha görünür olur
• Not: Koyu imleç ile birlikte kullanılamaz

Odak Vurgula (Focus Highlight)

Klavye ile gezinirken aktif (focused) elementi belirgin şekilde vurgular.

• Stil: 3px mavi outline
• Offset: 2px boşluk
• Etkilenenler: Tüm focusable elementler (link, buton, input vb.)
• Faydası: Klavye kullanıcıları için nerede olduklarını gösterir
• Erişilebilirlik: WCAG 2.1 AA standardı gereksinimi

Odaklanma

İçeriğe odaklanmayı artıran ve dikkat dağıtıcı unsurları gizleyen özellikler. DEHB, otizm spektrum bozukluğu veya dikkat güçlüğü yaşayan kullanıcılar için tasarlanmıştır.

Dikkat Dağıtıcıları Gizle

Reklamlar, sosyal medya widgetları, cookie banner’ları ve bildirim pop-up’larını gizler.

• Gizlenenler:
• YouTube, Facebook, Twitter iframe’leri
• Cookie banner ve uyarıları
• Newsletter pop-up’ları
• Sosyal paylaşım butonları
• “advertisement”, “ad” sınıfı içeren elementler
• Yöntem: display: none ile tamamen gizlenir
• Faydası: Saf içeriğe odaklanma sağlanır

Odak Modu

Ana içerik dışındaki alanları (sidebar, widget alanları) soluklaştırır.

• Soldurma: %10 opaklık
• Etkilenenler:
• aside elementleri
• .sidebar, .widget-area sınıfları
• [class*=”sidebar”], [id*=”sidebar”] seçicileri
• Reklam alanları
• Etkileşim: Soluklaştırılan alanlar tıklanamaz (pointer-events: none)
• Faydası: Ana makale veya içeriğe tam odaklanma

Okuma İlerlemesi

Sayfanın üst kısmında ne kadar içerik okunduğunu gösteren ilerleme çubuğu.

• Konum: Sayfa en üstünde, sabit (fixed)
• Yükseklik: 4 piksel
• Renk: Maviden yeşile gradient
• Hesaplama: Scroll pozisyonu / toplam scroll alanı
• Faydası: Uzun makalelerde ne kadar kaldığını gösterir, motivasyon sağlar

Dil Desteği

Widget, 30 farklı dili destekler. Kullanıcının tarayıcı dili otomatik algılanır veya manuel olarak değiştirilebilir.