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 yayında, web için duyarlı, çoklu cihaz girişini destekleyen ve tarayıcılarda çalışan bir Ayarlar bileşeni oluşturma konusunda düşüncelerimizi paylaşmak istiyorum. Demoyu deneyin.

Videoyu tercih ediyorsanız veya geliştirmekte olduğumuz şeylerin kullanıcı arayüzü/kullanıcı deneyimi önizlemesini görmek istiyorsanız YouTube'da daha kısa bir açıklamalı kılavuza göz atabilirsiniz:

Genel bakış

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

1. Yerleşimler
2. Renk
3. Özel aralık girişi
4. Özel onay kutusu girişi
5. Erişilebilirlikle ilgili dikkat edilmesi gerekenler
6. JavaScript

Düzenler

Bu, tüm CSS ızgarası olan ilk GUI Meydan Okuması demosudur! Burada Izgara için Chrome Geliştirici Araçları ile vurgulanan ızgaraları görebilirsiniz:

Boşluğa mahsus

En yaygın düzen:

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

Bu düzene "sadece boşluk için" diyorum çünkü sadece bloklar arasına boşluk eklemek için ızgara kullanıyor.

Bu stratejiyi kullanan beş düzen aşağıda belirtilmiştir:

Her bir giriş grubunu (.fieldset-item) içeren fieldset öğesi, öğeler arasında kısa çizgi kenarlıkları oluşturmak için gap: 1px değerini kullanır. Karmaşık bir sınır çö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 sarmalama

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

Sarma içeriği ortalama

Hem esnek kutu hem de ızgara, align-items veya align-content için yetenekler sağlar. Öğeleri sarmalama işlemi yapılırken content düzen hizalamaları, alanı bir grup olarak alt öğeler arasında dağıtır.

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

Ana öğe, place-content: center hizalama kısayolu kullanmaktır. Böylece, alt öğeler hem bir hem de iki sütun düzeninde dikey ve yatay olarak ortalanır.

Yukarıdaki videoda sarmalama olsa bile "içeriğin" nasıl ortalandığını izleyin.

Minimum maksimum değeri otomatik sığdırma işlemini tekrarla

<form>, her bölüm için uyarlanabilir ızgara düzeni kullanır. Bu düzen, kullanılabilir alana göre bir sütundan iki sütuna geçiş yapar.

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, row-gap (--space-xl) için column-gap (--space-xxl) değerinden farklı bir değere sahiptir. Bu değer, duyarlı düzene özel bir dokunuş sağlar. Sütunlar üst üste geldiğinde, boşlukların büyük olması istiyoruz, ancak bu boşluk geniş bir ekranda olduğu kadar büyük olmamalıdır.

grid-template-columns özelliği 3 CSS işlevi kullanır: repeat(), minmax() ve min(). Una Kravets'in bu konuyla ilgili RAM adlı mükemmel bir blog yayını var.

Düzenimizde 3 özel ekleme var. Bunu Una'nınkiyle karşılaştırırsanız:

• Fazladan bir min() işlevi iletiriz.
• align-items: flex-start değerini belirtiyoruz.
• max-width: 89vw tarzı var.

Ek min() işlevi, Evan Minto tarafından blog'unda, minmax() ve min() ile Intrinsically responsive CSS Grid adlı yayında ayrıntılı bir şekilde açıklanmıştır. Bu işlevi okumanızı öneririm. flex-start hizalama düzeltmesi, varsayılan uzatma efektini kaldırmaktır. Böylece bu düzenin alt öğelerinin eşit yüksekliklere sahip olmasına gerek kalmaz ve doğal, doğal yüksekliklere sahip olabilirler. Bu hizalama eklemesinin kısa bir dökümü YouTube videosunda bulunmaktadır.

max-width: 89vw, bu gönderide yer alan küçük bir döküme değer. Şimdi size stilin uygulandığı veya uygulanmadığı düzeni göstereyim:

Sorun nedir? max-width belirtildiğinde, alana kaç tekrarın sığabileceğini bilmek için auto-fit düzen algoritmasına bağlam, açık boyutlandırma veya belirgin boyutlandırma sağlar. Alanın "tam genişlik" olduğu açıkça görülse de, CSS ızgara spesifikasyonuna göre belirli bir boyut veya maksimum boyut sağlanmalıdır. Bir maksimum beden değeri sağladım.

Neden 89vw? Çünkü benim düzenimde "işe yaradı". Ben ve diğer Chrome arkadaşlarımız 100vw gibi daha makul bir değerin neden yeterli olmadığını ve bu gerçekten bir hata olup olmadığını araştırıyoruz.

Boşluk

Bu düzenin uyumunun büyük kısmı, tam olarak vermek gerekirse sınırlı bir aralık 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 kullanımı; ızgara, CSS @nest ve 5. düzey @media söz dizimi ile çok güzel bir şekilde kullanılır. Burada, tam olarak <main> düzeniyle oluşturulmuş bir stil grubu 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);
    }
  }
}

Ortalanmış içeriğin bulunduğu, varsayılan olarak orta düzeyde dolgulu bir ızgara (mobilde olduğu gibi). Ancak daha fazla görüntü alanı kullanılabilir olduğunda dolguyu artırarak yayılır. 2021 CSS oldukça iyi görünüyor.

Önceki "sadece boşluk için" düzeni hatırlıyor musunuz? Aşağıda, bu bileşenlerin bu bileşende nasıl göründüklerini daha ayrıntılı bir şekilde görebilirsiniz:

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

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

Renk

Renklerin kontrollü kullanımı, bu tasarımın etkileyici ancak minimal olarak öne çıkmasına yardımcı oldu. Bunu şö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 yerine rakamlarla adlandırıyorum. Çünkü bir medya sorgusunda bunları çevireceğim ve açık ve koyu değerleri anlamlı olmayacak.

Bunları şöyle bir tercih medya sorgusunda ç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 girmeden önce genel resme ve stratejiye hızlıca göz atmak önemlidir. Ama kendimden önde olduğum için kendimi toparlamam lazım.

LCH mi?

Renk teorisi konusuna fazla girmeden LCH, insan odaklı bir söz dizimidir. Matematik kullanarak rengi ölçtüğümüze değil, rengi algılama şeklimize yöneliktir (ör. 255). Bu, insanların yazıları daha kolay yazabilmesi ve diğer insanların da bu ayarlamalara uyum sağlayabilmesi nedeniyle belirgin bir avantaj sağlar.

Bugünkü demoda, açık ve koyu yapmak için kullandığım söz dizimine ve değerlere odaklanalım. 1 yüzeye 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 ve 0 ton (çok koyu renksiz gri) anlamına gelir. Daha sonra, açık mod için yapılan medya sorgusunda ışık, --surface1: lch(90 0 0); ile 90% değerine döndürülür. Stratejinin özeti de budur. 2 tema arasında ışığı değiştirerek tasarımın gerektirdiği veya erişilebilirliği koruyabilecek zıtlık oranlarını koruyarak başlayın.

Burada lch() ile ilgili bonus, ışığın insan odaklı olması ve % oranında değişiklik yapıldığında düşünülen ve tutarlı bir şekilde % oranında farklı olacağı düşünülürse sevindirici olmasıdır. Örneğin, hsl() o kadar güvenilir değildir.

İsterseniz renk alanları ve lch() hakkında daha fazla bilgi edinebilirsiniz. Çok yakında!

CSS şu anda bu renklere hiç erişemiyor. Tekrar edeyim: Çoğu modern monitördeki renklerin üçte birine erişimimiz yoktur. Üstelik bunlar yalnızca 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ği için web sitelerimiz geçerliliğini yitirdi.

Lea Verou

Renk şemalı uyarlanabilir form kontrolleri

Şu anda Safari ve Chromium dahil olmak üzere birçok tarayıcı koyu tema denetimleri sunar, ancak tasarımınızda bunları CSS veya HTML'de belirtmeniz gerekir.

Yukarıda, Geliştirici Araçları'nın Stiller panelindeki özelliğin etkisi gösterilmektedir. Demoda HTML etiketi kullanılmaktadır. Benim düşünceme göre bu etiket genellikle daha iyi bir konumdur:

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

Thomas Steiner'ın hazırladığı bu color-scheme makaleyi okuyarak konu hakkında her şeyi öğrenebilirsiniz. Koyu onay kutusu girişlerinden çok daha fazlasını kazandırabilirsiniz.

CSS accent-color

Tarayıcı giriş öğesinde kullanılan tonlama rengini değiştirebilen tek bir CSS stili olan form öğelerinde accent-color ile ilgili son zamanlarda etkinlikler bulunmaktadır. Daha fazla bilgiyi GitHub'da bulabilirsiniz. Bunu, bu bileşene ilişkin stillerime ekledim. Tarayıcılar desteklediği için, onay kutularım pembe ve mor renklerde daha belirgin bir temaya sahip olacak.

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

Sabit renk geçişleri ve odaklanma özelliğiyle öne çıkan renkler

Renkler tutumlu bir şekilde kullanıldığında ortaya çıkıyor. Bunu başarmanın yollarından biri de renkli kullanıcı arayüzü etkileşimleri.

Yukarıdaki videoda çok sayıda kullanıcı arayüzü geri bildirimi ve etkileşimi katmanı yer almaktadır. Bunlar, kullanıcı etkileşimine kişilik katmaya yardımcı olur. Bunun için:

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

Bir öğeyle etkileşimde bulunulduğunda geri bildirim sağlamak amacıyla CSS, çeşitli öğelerin görünümünü değiştirmek için :focus-within sözde sınıfını kullanır. .fieldset-item özelliğini ayrıntılı olarak inceleyelim. Bu yöntem son derece ilginçtir:

.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 birinde odak-içinde:

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

Özel aralık

Aşağıdaki HTML giriş öğesine göre, 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 / kapsayıcısı
2. İzleme
3. Küçük resim

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 parçalarıdır. Bunları açık bir şekilde etiketlemenin işe yarayacağını umuyorum. Bileşenin zorlu parçalarını oluşturmak için tutarlı bir temel sağlamak amacıyla geri kalan stiller çoğunlukla sıfırlanan stillerdir.

Parkur 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 sırrı, canlı dolgu rengini "ortaya çıkarmaktır". Bu, üstte sabit durdurma gradyanı ile yapılır. Renk geçişi, dolgu yüzdesine kadar şeffaf olur ve bundan sonra, doldurulmamış parkur yüzeyi rengini kullanır. Doldurulmayan yüzeyin arkasında tam genişlikte bir renk vardır. Şeffaflığın bunu ortaya çıkarmasını bekler.

İzleme dolgu stili

Tasarımım, dolgu stilini korumak için JavaScript gerektiriyor. Sadece CSS stratejileri var ama baş parmak öğenin parça ile aynı yükseklikte olması gerekiyor ve bu sınırlar dahilinde 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üzel bir görsel güncelleme. Kaydırma çubuğu, JavaScript olmadan da sorunsuz çalışır; --track-fill özelliği gerekli değildir; mevcut değilse dolgu stili olmaz. JavaScript kullanılabiliyorsa özel mülkü doldururken aynı zamanda kullanıcı değişikliklerini gözlemleyerek özel özelliği değerle senkronize edin.

AnaTudor'un CSS Püf Noktaları ile ilgili, parça dolgusu için yalnızca CSS çözümünü gösteren bu harika bir yayını burada bulabilirsiniz. Ayrıca bu range öğesini de ç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 çevre oluşturmak içindir. Yine orada, küçük resimlerin, parkurların ve ilişkili SVG öğelerinin dinamik renklerini birleştiren sabit arka plan gradyanını görürsünüz. Fareyle üzerine gelmeyi vurgulamada kullanılan box-shadow tekniğini ayırmaya yardımcı olması için etkileşim stillerini ayırdım:

@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;
  }
}

Kolayca yönetilebilen ve kullanıcı geri bildirimlerine yönelik animasyonlu bir görsel vurgulamayı amaçlayan Kutu gölgesi kullanarak, efektle düzeni tetiklemekten kaçınabilirim. 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 gelindiğinde dağılım boyutunu değiştirip geçiş yapıyorum.

Yalnızca vurgulama efekti onay kutularında bu kadar kolay olsaydı...

Tarayıcılar arası seçiciler

Tarayıcılar arası tutarlılık sağlamak 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ş öğesine göre, 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şkili 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, vurgunun stilini belirlemek için daha sonra tanıtacağımız sözde öğeye hazırlanır. Aksi takdirde, benden bu tür şeyler çoğunlukla ufak tefek düşüncelere dayalı olur. İmlecin işaretçi olmasını seviyorum. Dış çizgileri ve varsayılan onay kutuları çok küçük. accent-color destekleniyorsa bu onay kutularını markanın renk şemasına dahil edin.

Onay kutusu etiketleri

Onay kutuları için etiket sağlamak 2 nedenden dolayı önemlidir. İlki, onay kutusu değerinin ne için kullanıldığını, "ne için açık mı yoksa kapalı mı?" sorusunu yanıtlamak için İkincisi ise kullanıcı deneyimi açısından, web kullanıcıları, ilişkili etiketleri üzerinden onay kutularıyla etkileşime geçmeye alışkındı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, <label for="text-notifications"> kimliğine göre bir onay kutusunu işaret eden bir for özelliği ekleyin. Onay kutunuzda hem adı hem de kimliği iki kez göstererek bu bilginin fare veya ekran okuyucu gibi çeşitli araçlar ve teknolojilerle bulunabilmesini sağlayın: <input type="checkbox" id="text-notifications" name="text-notifications">. Bağlantı sayesinde :hover, :active ve daha fazlası ücretsiz sunulur. Bu da formunuzla etkileşim kurma yollarını artırır.

Onay kutusunu 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 vurgusu var. Küçük resim, gölgeyi yukarı ve aşağı ölçeklendirmek için box-shadow ve spread özelliği kullanabildi. Ancak onay kutularımız kare biçiminde olduğundan ve olması gerektiğinden bu efekt burada işe yaramaz.

Aynı görsel efekti yapay bir öğe ve talihsiz bir CSS ile de elde etmeyi başardım:

@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;
}

Daire sözde öğe oluşturmak basit bir iştir, ancak öğeyi ekli olduğu öğenin arkasına yerleştirmek daha zordu. Ben bunu düzeltmeden önce ve sonra şunları söylüyorum:

Kesinlikle mikro bir etkileşim, ancak görsel tutarlılığı sağlamak benim için önemli. Animasyon ölçekleme tekniği, diğer yerlerde kullandığımızla aynıdır. Özel bir özelliği yeni bir değere ayarlar ve CSS'nin bunu hareket tercihlerine göre geçiş yapmasına izin veririz. Buradaki en önemli özellik translateZ(-1px). Üst öğe 3D bir alan oluşturdu ve bu sözde öğe alt öğesi, kendini z alanına yavaşça geri yerleştirerek ona dokundu.

Erişilebilirlik

YouTube videosunda bu ayarlar bileşeninin fare, klavye ve ekran okuyucu etkileşimleri çok başarılı bir şekilde gösteriyor. Bazı ayrıntıları burada vereceğim.

HTML Öğesi Seçimleri

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

Bunların her biri, kullanıcının göz atma aracıyla ilgili ipuçları ve ipuçları içerir. Bazı öğeler etkileşim ipuçları sağlar, bazıları etkileşimi bağlar ve bazıları da ekran okuyucunun gezindiği erişilebilirlik ağacının şekillenmesine yardımcı olur.

HTML Özellikleri

Ekran okuyucuların ihtiyaç duymadığı öğeleri gizleyebiliriz. Bu örnekte, kaydırma çubuğunun yanındaki simge:

<picture aria-hidden="true">

Yukarıdaki videoda Mac OS'taki ekran okuyucu akışı gösterilmektedir. Giriş odağının doğrudan bir kaydırma çubuğundan diğerine nasıl hareket ettiğine dikkat edin. Bunun nedeni, sonraki kaydırıcıya geçerken durma olan simgeyi gizlemiş olmamızdır. Bu özellik olmadığında, kullanıcının göremeyeceği resmi durdurması, dinlemesi ve geçmesi gerekir.

SVG çok ayrıntılı bir şekilde hesaplanır. Fareyle üzerine gelmeyle ilgili serbest bir başlık için bir <title> öğesi ve matematiğin neler oluşturduğuna dair kullanıcıların okuyabileceği 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 okuyucular üzerinde gerçekten iyi bir test yapmasını sağlayacak kadar açıkça işaretlenmiş HTML kullandık.

JavaScript

Kanal dolgu renginin JavaScript'ten nasıl yönetildiğini önceden anlattım. Şimdi de <form> ile ilgili JavaScript'e bakalım:

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

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

Formla her etkileşime geçildiğinde ve form her değiştirildiğinde konsol, formu sunucuya gönderilmeden önce kolayca incelenmesi için nesne olarak bir nesne olarak kaydeder.

Sonuç

Nasıl yaptığımı artık bildiğine göre sen ne yaparsın? Bu da bileşen mimarisini eğlenceli hale getirir. En sevdiği çerçevedeki slotlarla 1. sürümü kim yapacak? 🙂

Yaklaşımlarımızı çeşitlendirelim ve web'de geliştirme yapmanın tüm yollarını öğrenelim. Bir demo oluşturun, bana tweet atın ve bağlantıları aşağıdaki Topluluk remiksleri bölümüne ekleyeceğim.

Topluluk remiksleri

• @tomayac adresini ziyaret edebilirsiniz. Bu sürümde öğeler arasında fareyle üzerine gelme boşluğu yoktur: demo ve source.