Cactus UI — Erişilebilirlik Odaklı React Komponent Kütüphanesi

English version: here

Herkese selam, bu yazıda sizlere CsTech olarak geliştirdiğimiz erişilebilirlik odaklı react komponent kütüphanesi Cactus UI’ı tanıtacağım.

Kütüphaneyi anlatmaya başlamadan önce üstünden geçmek istediğim bir kaç konuyla birlikte yazının akışı şöyle olacak:

1. Web erişilebilirliği nedir?
2. Neden erişilebilirlik odaklı komponent kütüphanesi geliştirdik?
3. Cactus UI’ı tanıyalım.

Hadi başlayalım…

Web erişilebilirliği nedir?

Erişilebilirlik, herhangi bir ürünün, servisin, hizmetin engelliler ve yaşlılar dâhil olmak üzere herkes tarafından ulaşılabilir ve kullanılabilir olmasını ifade eder.

Dünya Sağlık Örgütü’nün raporuna göre, dünya nüfusunun yaklaşık %15'inin (1,2 milyar insan) bir tür engel ile yaşamına devam etmektedir.

Bu sebeple biz geliştiriciler olarak, bir web sitesi geliştirirken herkesin rahatça ulaşabileceği ve kullanabileceği ürünler ortaya çıkarmaya özen göstermeliyiz.

Konumuz özelinde ise erişilebilirlik, tüm insanların geliştirdiğimiz ürünü rahatlıkla kullanabilmesini, sahip olunan herhangi bir engelin geliştirdiğimiz ürünün kullanımına engel teşkil etmemesini temsil etmektedir.

Bunu sağlayabilmek için World Wide Consortium’un (W3C) Web Erişilebilirlik Girişimi (WAI), Web İçeriği Erişilebilirlik Yönergelerini (WCAG) oluşturdu. Biz geliştiriciler, web erişilebilirliği icin bu yönergeleri takip ederek oluşturduğumuz ürünü engel sahibi insanların da herhangi bir sorun yaşamadan, cihazlarındaki erişilebilirlik araçlarının da yardımıyla, rahatça deneyimlemesini/kullanabilmesini sağlayabiliriz.

Web erişilebilirliği için daha detaylı ve farklı bilgiler için, CsTech ekibinden Osman Akar’in Huge Missing Part: Web Accessibility makalesine de göz atmanızı tavsiye ederim.

Neden erişilebilirlik odaklı komponent kütüphanesi geliştirdik?

Aslında geliştiriciler olarak biz, bir internet sitesi oluştururken amacımıza uygun çeşitli HTML elemanlarını stillendirerek bir araya getiriyor, böylece gördüğümüz/kullandığımız internet sitelerini oluşturuyoruz.

Bu sebeple, geliştirme yaparken belli amaçlar için özelleştirilmiş bu elemanları bir araya toplayan komponent kütüphaneleri kullanıyor veya oluşturuyoruz. Bu kütüphanelerin birçoğu belirli bir tasarım diline kolayca ulaşmak ve hızlı geliştirme yapmak için kullanılıyor olsa da, bazı kütüphaneler farklı amaçlar için stillendirme içermeden oluşturulmuş olabiliyor.

Bizim de Cactus UI’ı oluştururken motivasyonumuz: CsTech olarak geliştirdiğimiz tüm web sitelerinde kullanabileceğimiz, erişilebilirlik konusunda gerekli yönetmeliklere uygun web siteleri ortaya çıkarmamıza olanak tanıyacak bir komponent kütüphanesine sahip olmaktı.

Bu ihtiyaclarımızı giderecek kütüphaneyi oluştururken geliştirici topluluğuna katkıda bulunmak istediğimiz için Cactus UI’ı açık kaynak olarak geliştirdik. 🥳

Şimdi bu amaçlarla geliştirdiğimiz Cactus UI’ı gelin daha yakından tanıyalım.

Cactus UI

Cactus UI, Web İçeriği Erişilebilirlik Yönergeleri (WCAG)’ne uygun şekilde geliştirilmiş 13 komponent ile birlikte çeşitli custom-hook’lar içeren, minimum stillendirmeye sahip bir React kütüphanesidir.

Temel odak, erişilebilirlik konusunda ilkelere uygun bir kütüphane geliştirmek olduğu için, Cactus UI komponentleri doğru çalışma için gerekli minimum stillendirmeler dışında özel bir tasarım dili benimsenmeden, kullanan geliştiricinin ihtiyacı olan tasarıma göre kolayca stillendirebileceği şekilde geliştirildi. İsterseniz farklı kütüphanelerle birlikte kullanarak (styled-components vb.) isterseniz de CSS yardımıyla tüm komponentleri tasarımınıza göre stillendirebilirsiniz.

Tüm komponentlerin ve hookların kullanımı için dökümantasyonu inceleyebilir, herhangi bir sorunuzun olması durumunda Github üzerinden sorularınızı bize iletebilirsiniz.

Cactus UI geliştirilirken geliştirici deneyimi yüksek, implementasyonu kolay ve mümkün olduğunca esnek olması için özen gösterildi. Cactus UI’a ait bir komponenti kullanmanın ne kadar kolay olduğunu hadi bir örnekle görelim.

Hadi birlikte Cactus UI — Listbox komponentini projemize implement edelim.

1. Cactus UI’i projenize ekleyin:

// Bütün kütüphaneyi import edebilirsiniz:

  // Npm kullanıcıları için:
  npm install @ciceksepeti/cui

  // Yarn kullanıcıları için:
  yarn add @ciceksepeti/cui

// ya da sadece Listbox'ı import edebilirsiniz:

  // Npm kullanıcıları için:
  npm install @ciceksepeti/cui-listbox

  // Yarn kullanıcıları için:
  yarn add @ciceksepeti/cui-listbox

2. Projenizde ilgili yerde Listbox ve ListboxItem’i import edip, çağırın:

import React from "react";
import { Listbox, ListboxItem } from "@ciceksepeti/cui-listbox";

// CactusUI'dan gelen temel stillendirmeler:
import "@ciceksepeti/cui-listbox/styles.css";

// Projemize ait, özel stillendirmelerimizi iceren css dosyasi:
import "./styles.css";

export function OurListbox() {
  return (
    <div className="App">
      <p className="title">Cactus UI Listbox</p>
      <Listbox aria-labelledby="listbox-example">
        <ListboxItem value="listbox Item 1">Listbox Item 1</ListboxItem>
        <ListboxItem value="listbox Item 2">Listbox Item 2</ListboxItem>
        <ListboxItem value="listbox Item 3">Listbox Item 3</ListboxItem>
        <ListboxItem value="Listbox Item 4">Listbox Item 4</ListboxItem>
      </Listbox>
    </div>
  );
}

export default OurListbox;

Tebrikler! Listbox komponentiniz hazır ve su şekilde görünüyor:

Daha önce bahsettiğim gibi, Cactus UI sadece komponentin çalışması için gerekli temel stilleri içerdiği için görünüşü çok güzel olmasa da erişilebilirlik için gerekli tüm özellikleri barındırıyor. Örnek olarak; klavyedeki yön tuşlarıyla listbox içinde gezinebilir, enter ile seçim yapabilirsiniz. Bu hareketleriniz ekran okuyucu tarafından algılanır, focus edilen elamanın değeri sesli olarak okunabilir!

Peki bu komponenti istediğimiz tasarıma göre nasıl stillendirebiliriz? Bunun cevabı dokümantasyon sitemizde bulunan stillendirme başlığında mevcut. Tüm komponentleri kolayca stillendirmeniz için size bir çok css-selector sunmaktayız, Listbox komponenti için bunlar:

Bu css-selector’leri kullanarak bir .css dosyası ile komponentimizi özelleştirelim:

[data-cui-listbox-button] {
  width: 350px;
  height: 48px;
  font-size: 16px;
  font-weight: 600;
  color: #93b74d;
  background-color: #48625b;
}

[data-cui-listbox-arrow] {
  color: white;
  font-size: 16px;
  margin-right: 4px;
}

[data-cui-listbox-popover] {
  overflow: hidden;
  border-radius: 4px;
  background-color: #48625b;
  border: 1px solid rgb(171, 202, 171);
}

[data-cui-listbox-item] {
  color: #9bc14f;
  font-weight: 600;
  padding: 12px 10px;
}

[data-cui-listbox-item][data-active="true"] {
  color: #1c7450;
  background-color: #d6dfc3;
}

Css ile stillendirme sonrası komponentimizin son hali:

İşte bu kadar kolay! Cactus UI’da bulunan bir komponentin nasıl kullanılacağını, stillendirme ile ilgili detayları ve örnekleri ilgili komponentin dokümantasyon sayfasında bulabilirsiniz.

Komponente ait dokümantasyon sayfasında komponenti test etmeniz için bir test ortamı da bulunmakta!

Açık Kaynak Kod — Katkı

Herkesin eşit şekilde faydalanabildiği internet siteleri yaratmak için erişilebilirlik odaklı geliştirilen Cactus UI geliştirici topluluğuna değer katmayı, sizlerin katkılarıyla birlikte bu değeri büyütmeyi amaçlıyor.

Bu sebeple yaşadığınız problemlerle ilgili soruların yanısıra, fikirlerinizi, eksik gördüğünüz veya geliştirmek istediğiniz yerlerle ilgili katkılarınızı da bekliyoruz.

Cactus UI — Github: https://github.com/ciceksepetitech/cactus-ui

Tekrar görüşünceye dek, teknoloji ile kalın.

Oğuzhan Sofuoğlu

Frontend Developer

Kaynaklar:

1. https://www.w3.org/TR/WCAG21/
2. https://www.freecodecamp.org/news/web-accessibility-best-practices-and-checklist/
3. https://medium.com/cstech/huge-missing-part-web-accessibility-7951724158da
4. https://cactus-ui.ciceksepeti.dev/

---

Cactus UI — Erişilebilirlik Odaklı React Komponent Kütüphanesi was originally published in ÇSTech on Medium, where people are continuing the conversation by highlighting and responding to this story.