Türkiye’ye özgü hizmet · Accessibility menu
Erişilebilirlik menüsü TR
Kullanıcının yazı boyutunu, karşıtlığı ve temayı değiştirmesini sağlar.
- CSS
- kararlı
- JavaScript
- ayar saklama
- React
- kararlı
- Vue
- kararlı
Örnekler
HTML kodunu göster
<div class="trds-erisim" data-trds="erisim-menusu">
<button class="trds-erisim__dugme" type="button" aria-expanded="false" aria-controls="erisim-panel">Görünüm ayarları</button>
<div class="trds-erisim__panel" id="erisim-panel" hidden>
<fieldset class="trds-erisim__grup">
<legend>Yazı boyutu</legend>
<button class="trds-erisim__secenek" type="button" data-yazi="normal" aria-pressed="true">Normal</button>
<button class="trds-erisim__secenek" type="button" data-yazi="buyuk" aria-pressed="false">Büyük</button>
<button class="trds-erisim__secenek" type="button" data-yazi="cok-buyuk" aria-pressed="false">Çok büyük</button>
</fieldset>
<fieldset class="trds-erisim__grup">
<legend>Tema</legend>
<button class="trds-erisim__secenek" type="button" data-tema="acik" aria-pressed="true">Açık</button>
<button class="trds-erisim__secenek" type="button" data-tema="koyu" aria-pressed="false">Koyu</button>
<button class="trds-erisim__secenek" type="button" data-tema="yuksek" aria-pressed="false">Yüksek karşıtlık</button>
</fieldset>
</div>
</div>
Ne zaman kullanılır
- Her sayfada başlık çubuğunun içinde kullanın.
- Ayarları kullanıcının tarayıcısında saklayın. Sunucuya göndermeyin.
Erişilebilirlik
- Yazı boyutu üç kademedir ve sayfayı bozmadan yüzde 200 büyür.
- Yüksek karşıtlık kipi 7 üzerinde kontrast sağlar.
- Ayar
localStorageiçinde saklanır. Erişilemezse sayfa yine çalışır. - Bu menü erişilebilirlik yükümlülüğünün yerine geçmez. Sayfa menü kapalıyken de uyumludur.
Karşılanan WCAG 2.2 ölçütleri 1.4.41.4.61.4.12
Neden bu bileşen var
Yazı boyutu ve tema tercihlerini tek menüde toplar. Bu tercihler, sayfanın temel erişilebilirlik özelliklerinin yerine geçmez.
Kaynak
Benzer bir bileşen şu ülkelerin tasarım sistemlerinde de var: FR, KR.