Ana içeriğe geç
TRDS Türkiye Kamu Tasarım Sistemi

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

Temel Canlı örnek
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

Erişilebilirlik

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.