Ayarlar bileşeni oluşturma

Kaydırma çubukları ve onay kutularından oluşan bir ayarlar bileşeninin nasıl oluşturulacağına dair temel bir genel bakış.

Adam Argyle

Bu gönderide, web için duyarlı, birden fazla cihaz girişini destekleyen ve tarayıcılarda çalışan bir Ayarlar bileşeni oluşturma konusundaki düşüncelerimi paylaşmak istiyorum. Demoyu deneyin.

Videoları tercih ediyorsanız veya geliştirdiğimiz kullanıcı arayüzü/kullanıcı deneyiminin önizlemesini görmek istiyorsanız YouTube'da kısa bir açıklamalı kılavuzu inceleyebilirsiniz:

Genel Bakış

Bu bileşenin özelliklerini aşağıdaki bölümlere ayırdık:

1. Düzenler
2. Renk
3. Özel aralık girişi
4. Özel onay kutusu girişi
5. Erişilebilirlikle ilgili dikkat edilmesi gereken noktalar
6. JavaScript

Düzenler

Bu, tamamen CSS Izgara kullanan ilk GUI Challenge demosu. Her ızgara, ızgara için Chrome Geliştirici Araçları ile vurgulanmıştır:

Sadece boşluk için

En yaygın düzen:

foo {
  display: grid;
  gap: var(--something);
}

Bu düzeni, bloklar arasına boşluk eklemek için yalnızca ızgara kullandığından "yalnızca boşluk için" olarak adlandırıyorum.

Bu strateji beş düzende kullanılıyor. Bunların tümü aşağıda gösterilmiştir:

Her bir giriş grubunu (.fieldset-item) içeren fieldset öğesi, öğeler arasında ince kenarlıklar oluşturmak için gap: 1px kullanıyor. Karmaşık kenarlık çözümü yok.

.grid {
  display: grid;
  gap: 1px;
  background: var(--bg-surface-1);

  & > .fieldset-item {
    background: var(--bg-surface-2);
  }
}

.grid {
  display: grid;

  & > .fieldset-item {
    background: var(--bg-surface-2);

    &:not(:last-child) {
      border-bottom: 1px solid var(--bg-surface-1);
    }
  }
}

Doğal ızgara kaydırma

En karmaşık düzen, <main> ile <form> arasındaki mantıksal düzen sistemi olan makro düzen oldu.

Sarmalayıcı içeriği ortalamayı

Hem Flexbox hem de ızgara, align-items veya align-content olanağı sunar. Sarmal öğelerle çalışırken content düzen hizalamaları, boşluğu alt öğeler arasında grup olarak dağıtır.

main {
  display: grid;
  gap: var(--space-xl);
  place-content: center;
}

Ana öğe, alt öğelerin hem bir hem de iki sütunlu düzenlerde dikey ve yatay olarak ortalanması için place-content: center hizalama kısayolunu kullanır.

Yukarıdaki videoda, sarmalama gerçekleşmiş olsa bile "içeriğin" nasıl ortada kaldığını izleyin.

Minimum otomatik sığdırma ayarını tekrarla

<form>, her bölüm için uyarlanabilir bir ızgara düzeni kullanır. Bu düzen, mevcut alana bağlı olarak bir sütundan iki sütuna geçer.

form {
  display: grid;
  gap: var(--space-xl) var(--space-xxl);
  grid-template-columns: repeat(auto-fit, minmax(min(10ch, 100%), 35ch));
  align-items: flex-start;
  max-width: 89vw;
}

Bu ızgara, duyarlı düzene özel bir dokunuş katmak amacıyla row-gap (--space-xl) için column-gap (--space-xxl) değerinden farklı bir değere sahiptir. Sütunlar yığıldığında büyük bir boşluk olmasını isteriz ancak bu boşluk geniş ekrandaki kadar büyük olmamalıdır.

grid-template-columns mülkü 3 CSS işlevi kullanır: repeat(), minmax() ve min(). Una Kravets'in bu konuyla ilgili harika bir sayfa düzeni blog yayını var. Bu yayında, RAM olarak adlandırılan bir düzenden bahsediliyor.

Una'nın düzeniyle karşılaştırıldığında, düzenimizde 3 özel ekleme var:

• Ek bir min() işlevi iletiyoruz.
• align-items: flex-start değerini belirtiriz.
• max-width: 89vw stili vardır.

Ek min() işlevi Evan Minto tarafından blog'unda, minmax() ve min() ile Doğan Olarak Duyarlı CSS Grid'i makalesinde iyi tanımlanmış. Bu işlevi okumanızı öneririm. flex-start Hizalama düzeltmesi, varsayılan esneme efektini kaldırmak içindir. Böylece bu düzenin alt öğelerinin eşit yüksekliklere sahip olması gerekmez, doğal ve doğal yüksekliklere sahip olabilirler. YouTube videosunda bu hizalama eklemesinin kısa bir dökümü yer alır.

max-width: 89vw, bu yayında kısaca ele alınmalıdır. Stil uygulanmış ve uygulanmamış haldeki düzeni göstereyim:

Neler oluyor? max-width belirtildiğinde, auto-fit düzen algoritmasının alana kaç tekrar sığdırabileceğini bilmesi için bağlam, açık boyutlandırma veya kesin boyutlandırma sağlanır. Alanın "tam genişlik"te olduğu açık olsa da CSS ızgara spesifikasyonuna göre belirli bir boyut veya maksimum boyut belirtilmelidir. Maksimum boyutu belirttim.

Peki neden 89vw? Çünkü düzenim için "işe yaradı". Birkaç Chrome çalışanıyla birlikte, 100vw gibi daha makul bir değerin neden yeterli olmadığını ve bunun gerçekten bir hata olup olmadığını araştırıyoruz.

Boşluk

Bu düzenin uyumunun büyük bir kısmı, tam olarak 7 tane olan sınırlı bir boşluk paletinden kaynaklanıyor.

:root {
  --space-xxs: .25rem;
  --space-xs:  .5rem;
  --space-sm:  1rem;
  --space-md:  1.5rem;
  --space-lg:  2rem;
  --space-xl:  3rem;
  --space-xxl: 6rem;
}

Bu akışların ızgara, CSS @nest ve seviye 5 söz dizimiyle @media ile güzel bir şekilde kullanılması. Aşağıda, tam <main> düzen stili grubu örneği verilmiştir.

main {
  display: grid;
  gap: var(--space-xl);
  place-content: center;
  padding: var(--space-sm);

  @media (width >= 540px) {
    & {
      padding: var(--space-lg);
    }
  }

  @media (width >= 800px) {
    & {
      padding: var(--space-xl);
    }
  }
}

Varsayılan olarak ortalanmış içeriğe sahip, orta düzeyde dolgu yapılmış bir ızgara (mobil cihazlarda olduğu gibi). Ancak daha fazla görüntü alanı kullanılabilir hale geldikçe dolgu artırılarak yayılırlar. 2021 CSS oldukça iyi görünüyor.

"Just for gap" (Boşluk için) adlı önceki düzeni hatırlıyor musunuz? Bu bileşendeki görünümlerinin daha kapsamlı bir versiyonunu aşağıda bulabilirsiniz:

header {
  display: grid;
  gap: var(--space-xxs);
}

section {
  display: grid;
  gap: var(--space-md);
}

Renk

Renklerin kontrollü kullanımı, bu tasarımın etkileyici ve minimalist bir şekilde öne çıkmasına yardımcı oldu. Şöyle yapıyorum:

:root {
  --surface1: lch(10 0 0);
  --surface2: lch(15 0 0);
  --surface3: lch(20 0 0);
  --surface4: lch(25 0 0);

  --text1: lch(95 0 0);
  --text2: lch(75 0 0);
}

Yüzey ve metin renklerimi surface-dark ve surface-darker gibi adların aksine sayıyla adlandırıyorum. Çünkü bir medya sorgusunda bunları çeviririm ve açık ve koyu renkler anlamlı olmaz.

Bunları şu şekilde bir tercih edilen medya sorgusuna çeviriyorum:

:root {
  ...

  @media (prefers-color-scheme: light) {
    & {
      --surface1: lch(90 0 0);
      --surface2: lch(100 0 0);
      --surface3: lch(98 0 0);
      --surface4: lch(85 0 0);

      --text1: lch(20 0 0);
      --text2: lch(40 0 0);
    }
  }
}

Renk söz dizimi ayrıntılarına geçmeden önce genel tabloya ve stratejiye hızlıca göz atmak önemlidir. Ancak biraz ileri gittim. Bu nedenle biraz geri döneceğim.

LCH?

Renk teorisi konusunda çok fazla bilgi vermeden LCH'nin, rengi matematikle (255 gibi) nasıl ölçtüğümüze değil, nasıl algıladığımıza odaklanan, kullanıcı odaklı bir söz dizimi olduğunu söyleyebiliriz. Bu, insanlar tarafından daha kolay yazılabilmesi ve diğer kullanıcıların bu düzenlemelere uyum sağlayabilmesi nedeniyle belirgin bir avantaj sağlar.

Bugünkü demoda, açık ve koyu renk oluşturmak için değiştirdiğim söz dizimi ve değerlere odaklanalım. 1 yüzey ve 1 metin rengine bakalım:

:root {
  --surface1: lch(10 0 0);
  --text1:    lch(95 0 0);

  @media (prefers-color-scheme: light) {
    & {
      --surface1: lch(90 0 0);
      --text1:    lch(40 0 0);
    }
  }
}

--surface1: lch(10 0 0), 10% açıklık, 0 renk doygunluğu ve 0 renk tonu anlamına gelir: çok koyu, renksiz gri. Ardından, açık mod için medya sorgusunda açıklık --surface1: lch(90 0 0); ile 90% olarak değiştirilir. Stratejinin ana fikri budur. Tasarımda gerekli olan veya erişilebilirliği koruyabilecek kontrast oranlarını koruyarak 2 tema arasında yalnızca açıklığı değiştirerek başlayın.

Buradaki lch() avantajı, hafifliğin kullanıcı odaklı olmasıdır. Bu nedenle, % değişikliğiyle ilgili olarak kendimizi iyi hissedebiliriz. Bu değişiklik, algısal olarak ve tutarlı bir şekilde % farklı olacaktır. Örneğin, hsl() güvenilir değildir.

Renk alanları ve lch() hakkında daha fazla bilgi edinebilirsiniz. Yakında kullanıma sunulacak.

CSS şu anda bu renklere hiç erişemiyor. Tekrar etmek istiyorum: Çoğu modern monitörde renklerin üçte birine erişimimiz yok. Bunlar sadece herhangi bir renk değil, ekranda gösterilebilecek en canlı renkler. Monitör donanımı, CSS özelliklerinden ve tarayıcı uygulamalarından daha hızlı geliştiğinden web sitelerimizde renklerin solması sorunu yaşanıyor.

Lea Verou

Renk şemasıyla uyarlanabilir form kontrolleri

Birçok tarayıcıda koyu tema kontrolleri bulunur (şu anda Safari ve Chromium). Ancak tasarımınızda bu kontrolleri kullanacağınızı CSS veya HTML'de belirtmeniz gerekir.

Yukarıda, DevTools'un Stiller panelinden mülkün etkisi gösterilmektedir. Demoda HTML etiketi kullanılıyor. Bu etiket, genel olarak daha iyi bir konumdur:

<meta name="color-scheme" content="dark light">

Thomas Steiner tarafından yazılan bu color-scheme makaleden konuyla ilgili her şeyi öğrenebilirsiniz. Karanlık onay kutusu girişlerinden çok daha fazlasını elde edebilirsiniz.

CSS accent-color

Tarayıcıların giriş öğesinde kullanılan renk tonunu değiştirebilen tek bir CSS stili olan form öğelerindeki accent-color ile ilgili yakın zamanda hareketlilik oldu. GitHub'da bu konu hakkında daha fazla bilgi edinin. Bu bileşen için stillerimize ekledim. Tarayıcılar bunu desteklediği için onay kutularım pembe ve mor renk vurgularıyla daha uyumlu olacak.

input[type="checkbox"] {
  accent-color: var(--brand);
}

Sabit renk geçişleri ve odak içi çarpıcı renk efektleri

Renkler, ölçülü bir şekilde kullanıldığında en çok öne çıkar. Bunu sağlamanın sevdiğim yollarından biri, renkli kullanıcı arayüzü etkileşimleridir.

Yukarıdaki videoda çok sayıda kullanıcı arayüzü geri bildirimi ve etkileşimi katmanı var. Bunlar, aşağıdakileri yaparak etkileşiminize kişiliği katmaya yardımcı olacaktır:

• Bağlamı vurgulama
• Değerin aralıktaki "ne kadar dolu" olduğuna dair kullanıcı arayüzü geri bildirimi sağlama.
• Bir alanın girişi kabul ettiğine dair kullanıcı arayüzü geri bildirimi sağlama.

CSS, bir öğeyle etkileşim kurulduğunu bildirmek için çeşitli öğelerin görünümünü değiştirmek üzere :focus-within sözde sınıfını kullanır. .fieldset-item'ı inceleyelim. Çok ilginç:

.fieldset-item {
  ...

  &:focus-within {
    background: var(--surface2);

    & svg {
      fill: white;
    }

    & picture {
      clip-path: circle(50%);
      background: var(--brand-bg-gradient) fixed;
    }
  }
}

Bu öğenin alt öğelerinden biri odaklandığında:

1. .fieldset-item arka planına daha yüksek kontrastlı bir yüzey rengi atanır.
2. İç içe yerleştirilmiş svg, daha yüksek kontrast için beyazla doldurulur.
3. İç içe yerleştirilmiş <picture> clip-path tam bir daireye genişler ve arka plan parlak sabit degrade ile doldurulur.

Özel aralık

Aşağıdaki HTML giriş öğesini kullanarak görünümünü nasıl özelleştirdiğimi göstereceğim:

<input type="range">

Bu öğenin özelleştirmemiz gereken 3 bölümü vardır:

1. Aralık öğesi/kapsülü
2. Takip etme
3. Thumb

Aralık öğesi stilleri

input[type="range"] {
  /* style setting variables */
  --track-height: .5ex;
  --track-fill: 0%;
  --thumb-size: 3ex;
  --thumb-offset: -1.25ex;
  --thumb-highlight-size: 0px;

  appearance: none;         /* clear styles, make way for mine */
  display: block;
  inline-size: 100%;        /* fill container */
  margin: 1ex 0;            /* ensure thumb isn't colliding with sibling content */
  background: transparent;  /* bg is in the track */
  outline-offset: 5px;      /* focus styles have space */
}

CSS'nin ilk birkaç satırı stillerin özel bölümleridir. Bunların açık bir şekilde etiketlenmesi işinize yarayacağını umuyorum. Stillerin geri kalanı, bileşenin zor kısımlarını oluşturmak için tutarlı bir temel sağlamak amacıyla çoğunlukla sıfırlanan stillerdir.

Parça stilleri

input[type="range"]::-webkit-slider-runnable-track {
  appearance: none; /* clear styles, make way for mine */
  block-size: var(--track-height);
  border-radius: 5ex;
  background:
    /* hard stop gradient:
        - half transparent (where colorful fill we be)
        - half dark track fill
        - 1st background image is on top
    */
    linear-gradient(
      to right,
      transparent var(--track-fill),
      var(--surface1) 0%
    ),
    /* colorful fill effect, behind track surface fill */
    var(--brand-bg-gradient) fixed;
}

Bunun için canlı dolgu rengini "göstermeniz" gerekir. Bu, en üstteki sabit durak gradyanı ile yapılır. Renk geçişi, dolgu yüzdesine kadar şeffaf olur ve bundan sonra doldurulmamış kanal yüzeyi rengi kullanılır. Bu doldurulmamış yüzeyin arkasında, şeffaflığın ortaya çıkarmasını bekleyen tam genişlikli bir renk vardır.

Parça dolgu stili

Tasarımımın, dolgu stilini koruması için JavaScript'e ihtiyacı var. Yalnızca CSS stratejileri vardır ancak bunlar, küçük resim öğesinin parçayla aynı yükseklikte olmasını gerektirir ve bu sınırlar içinde bir uyum bulamadım.

/* grab sliders on page */
const sliders = document.querySelectorAll('input[type="range"]')

/* take a slider element, return a percentage string for use in CSS */
const rangeToPercent = slider => {
  const max = slider.getAttribute('max') || 10;
  const percent = slider.value / max * 100;

  return `${parseInt(percent)}%`;
};

/* on page load, set the fill amount */
sliders.forEach(slider => {
  slider.style.setProperty('--track-fill', rangeToPercent(slider));

  /* when a slider changes, update the fill prop */
  slider.addEventListener('input', e => {
    e.target.style.setProperty('--track-fill', rangeToPercent(e.target));
  })
})

Bence bu, görsel açıdan iyi bir yükseltme. Kaydırma çubuğu JavaScript olmadan mükemmel çalışır. --track-fill özelliği gerekli değildir. Bu özellik yoksa doldurma stili olmaz. JavaScript kullanılabilir durumdaysa özel özelliği doldururken kullanıcı değişikliklerini de gözlemleyin ve özel özelliği değerle senkronize edin.

Ana Tudor tarafından CSS-Tricks'da yayınlanan bu mükemmel makalede, parça doldurma için yalnızca CSS'den oluşan bir çözüm gösterilmektedir. Ayrıca bu range öğesini çok ilham verici buldum.

Küçük resim stilleri

input[type="range"]::-webkit-slider-thumb {
  appearance: none; /* clear styles, make way for mine */
  cursor: ew-resize; /* cursor style to support drag direction */
  border: 3px solid var(--surface3);
  block-size: var(--thumb-size);
  inline-size: var(--thumb-size);
  margin-top: var(--thumb-offset);
  border-radius: 50%;
  background: var(--brand-bg-gradient) fixed;
}

Bu stillerin çoğu, güzel bir daire oluşturmak için kullanılır. Burada da baş parmakların, parçaların ve ilişkili SVG öğelerinin dinamik renklerini birleştiren sabit arka plan renk geçişini görürsünüz. Fareyle üzerine gelmeyle vurgulama için kullanılan box-shadow teknik

@custom-media --motionOK (prefers-reduced-motion: no-preference);

::-webkit-slider-thumb {
  …

  /* shadow spread is initally 0 */
  box-shadow: 0 0 0 var(--thumb-highlight-size) var(--thumb-highlight-color);

  /* if motion is OK, transition the box-shadow change */
  @media (--motionOK) {
    & {
      transition: box-shadow .1s ease;
    }
  }

  /* on hover/active state of parent, increase size prop */
  @nest input[type="range"]:is(:hover,:active) & {
    --thumb-highlight-size: 10px;
  }
}

Hedef, kullanıcı geri bildirimi vermek için kolayca yönetilebilen bir görselden oluşuyordu ve animasyonlu bir görselden oluşuyordu. Kutu gölgesi kullanarak efektle düzenlemeyi tetiklemeyi önleyebilirim. Bunu, bulanıklaştırılmamış ve baş parmak öğesinin dairesel şekliyle eşleşen bir gölge oluşturarak yapıyorum. Ardından, fareyle üzerine geldiğinizde yayılma boyutunu değiştirip geçiş yaparım.

Keşke onay kutularında da vurgulama efekti bu kadar kolay olsaydı…

Tarayıcılar arası seçiciler

Tarayıcılar arası tutarlılık elde etmek için şu -webkit- ve -moz- seçicilere ihtiyacım olduğunu fark ettim:

input[type="range"] {
  &::-webkit-slider-runnable-track {}
  &::-moz-range-track {}
  &::-webkit-slider-thumb {}
  &::-moz-range-thumb {}
}

Özel Onay Kutusu

Aşağıdaki HTML giriş öğesini kullanarak görünümünü nasıl özelleştirdiğimi göstereceğim:

<input type="checkbox">

Bu öğenin özelleştirmemiz gereken 3 bölümü vardır:

1. Onay kutusu öğesi
2. İlişkilendirilmiş etiketler
3. Vurgu efekti

Onay kutusu öğesi

input[type="checkbox"] {
  inline-size: var(--space-sm);   /* increase width */
  block-size: var(--space-sm);    /* increase height */
  outline-offset: 5px;            /* focus style enhancement */
  accent-color: var(--brand);     /* tint the input */
  position: relative;             /* prepare for an absolute pseudo element */
  transform-style: preserve-3d;   /* create a 3d z-space stacking context */
  margin: 0;
  cursor: pointer;
}

transform-style ve position stilleri, öne çıkan anlara stil uygulamak için daha sonra tanıtacağımız sözde öğeye hazırlanır. Aksi takdirde, çoğunlukla kendi tarzıma göre küçük şeyler yazıyorum. İşaretçinin işaretçi olmasını, ana hat ofsetlerini beğeniyorum. Varsayılan onay kutuları çok küçük. accent-color destekleniyorsa bu onay kutularını marka renk şemasına ekleyin.

Onay kutusu etiketleri

Onay kutuları için etiketler eklemek 2 nedenden dolayı önemlidir. İlki, onay kutusu değerinin ne için kullanıldığını temsil etmek ve "ne için açık veya kapalı?" sorusuna yanıt vermektir. İkincisi, kullanıcı deneyimi için. Web kullanıcıları, ilişkili etiketleri aracılığıyla onay kutularıyla etkileşime geçmeye alışmıştır.

<input
  type="checkbox"
  id="text-notifications"
  name="text-notifications"
>

<label for="text-notifications">
  <h3>Text Messages</h3>
  <small>Get notified about all text messages sent to your device</small>
</label>

Etiketinize, kimliğe göre onay kutusunu işaret eden bir for özelliği ekleyin: <label for="text-notifications">. Fare veya ekran okuyucu gibi çeşitli araç ve teknolojilerle bulunmasını sağlamak için onay kutunuzdaki adı ve kimliği iki kez girin: <input type="checkbox" id="text-notifications" name="text-notifications">. Bağlantı sayesinde :hover, :active ve diğer mülkler ücretsiz olarak sunulur. Böylece, formunuzla daha fazla etkileşim kurulmasını sağlayabilirsiniz.

Onay kutusu vurgulama

Arayüzlerimin tutarlı olmasını istiyorum ve kaydırma çubuğu öğesinde onay kutusuyla birlikte kullanmak istediğim güzel bir küçük resim vurgulanıyor. Küçük resimde gölgeyi artırmak ve azaltmak için box-shadow özelliği ve spread özelliği kullanıldı. Ancak onay kutularımız kare olduğu için ve olması gerektiği için bu efekt burada kullanılamaz.

Aynı görsel efekti bir sözde öğe ve maalesef çok sayıda karmaşık CSS kullanarak elde ettim:

@custom-media --motionOK (prefers-reduced-motion: no-preference);

input[type="checkbox"]::before {
  --thumb-scale: .01;                        /* initial scale of highlight */
  --thumb-highlight-size: var(--space-xl);

  content: "";
  inline-size: var(--thumb-highlight-size);
  block-size: var(--thumb-highlight-size);
  clip-path: circle(50%);                     /* circle shape */
  position: absolute;                         /* this is why position relative on parent */
  top: 50%;                                   /* pop and plop technique (https://web.dev/centering-in-css#5-pop-and-plop) */
  left: 50%;
  background: var(--thumb-highlight-color);
  transform-origin: center center;            /* goal is a centered scaling circle */
  transform:                                  /* order here matters!! */
    translateX(-50%)                          /* counter balances left: 50% */
    translateY(-50%)                          /* counter balances top: 50% */
    translateZ(-1px)                          /* PUTS IT BEHIND THE CHECKBOX */
    scale(var(--thumb-scale))                 /* value we toggle for animation */
  ;
  will-change: transform;

  @media (--motionOK) {                       /* transition only if motion is OK */
    & {
      transition: transform .2s ease;
    }
  }
}

/* on hover, set scale custom property to "in" state */
input[type="checkbox"]:hover::before {
  --thumb-scale: 1;
}

Dairesel bir sözde öğe oluşturmak basit bir iştir, ancak bağlı olduğu öğenin arkasına yerleştirmek daha zordur. Sorunu düzeltmeden önceki ve düzelttikten sonraki durum:

Bu kesinlikle mikro bir etkileşim ama benim için görsel tutarlılığı korumak önemli. Animasyon ölçeklendirme tekniği, diğer yerlerde kullandığımızla aynıdır. Özel bir özelliği yeni bir değere ayarlıyor ve CSS'nin hareket tercihlerine göre bu özelliği geçişine izin veriyoruz. Buradaki temel özellik translateZ(-1px)'tür. Üst öğe bir 3D alan oluşturdu ve bu sözde öğe alt öğe, kendisini z uzayında biraz geriye yerleştirerek bu alana dokundu.

Erişilebilirlik

Bu YouTube videosunda, bu ayarlar bileşeni için fare, klavye ve ekran okuyucu etkileşimleri mükemmel bir şekilde gösteriliyor. Burada bazı ayrıntıları belirteceğim.

HTML Öğe Seçenekleri

<form>
<header>
<fieldset>
<picture>
<label>
<input>

Bunların her biri, kullanıcının tarama aracıyla ilgili ipuçları ve öneriler içerir. Bazı öğeler etkileşim ipuçları sağlar, bazıları etkileşimi birbirine bağlar, bazıları ise ekran okuyucunun gezindiği erişilebilirlik ağacını şekillendirmeye yardımcı olur.

HTML Özellikleri

Ekran okuyucuların ihtiyaç duymadığı öğeleri (bu durumda kaydırma çubuğunun yanındaki simge) gizleyebilirsiniz:

<picture aria-hidden="true">

Yukarıdaki videoda, Mac OS'teki ekran okuyucu akışı gösterilmektedir. Giriş odağının bir kaydırma çubuğundan diğerine doğru nasıl gittiğine dikkat edin. Bunun nedeni, bir sonraki kaydırma çubuğunun önünde durduğunuz simgeyi gizlemiş olmamızdır. Bu özellik olmadan kullanıcının durup, dinlemesi ve göremeyecekleri resmi aşması gerekir.

SVG, matematikten başka bir şeydir. Fareyle üzerine gelindiğinde açılan bir başlık için bir <title> öğesi ve matematiğin neden olduğuna ilişkin olarak okunabilir bir yorum ekleyelim:

<svg viewBox="0 0 24 24">
  <title>A note icon</title>
  <path d="M12 3v10.55c-.59-.34-1.27-.55-2-.55-2.21 0-4 1.79-4 4s1.79 4 4 4 4-1.79 4-4V7h4V3h-6z"/>
</svg>

Bunun dışında, formun fare, klavye, video oyunu kumandaları ve ekran okuyucularda gerçekten iyi test edilebilmesi için yeterince net işaretlenmiş HTML kullandık.

JavaScript

Parça dolgu renginin JavaScript'ten nasıl yönetildiğini daha önce ele aldık. Şimdi <form> ile ilgili JavaScript'e göz atalım:

const form = document.querySelector('form');

form.addEventListener('input', event => {
  const formData = Object.fromEntries(new FormData(form));
  console.table(formData);
})

Formla her etkileşimde bulunulduğunda ve form değiştirildiğinde konsol, formu bir sunucuya gönderilmeden önce kolayca incelenebilmesi için tabloya bir nesne olarak kaydeder.

Sonuç

Şimdi bunu nasıl yaptığımı biliyorsun, şimdi nasıl yaparsın? Bu, bileşen mimarisini eğlenceli hale getirir. En sevdiği çerçevede slotlarla ilk sürümü kim yapacak? 🙂

Yaklaşımlarımızı çeşitlendirelim ve web'de uygulama geliştirmenin tüm yollarını öğrenelim. Bir demo oluşturup bana tweetleyin. Bağlantıları aşağıdaki Topluluk remiksleri bölümüne ekleyeceğim.

Topluluk remiksleri

• @tomayac, onay kutusu etiketlerinin fareyle üzerine gelme alanı ile ilgili stiliyle Bu sürümde, demo ve source öğeleri arasında fareyle üzerine gelme boşluğu yoktur.