ERİŞİLEBİLİR WEB BİLEŞENLERİ İNŞA ETME REHBERİ İyi çalışan ve erişilebilir web bileşenleri oluşturmak istiyorsunuz. İşte bunu yapmanıza yardımcı olacak bir rehber.
- Temiz bir API sunan, yeniden kullanılabilir bir web bileşeni oluşturun.
- ARIA öznitelikleri ve klavye desteği ile erişilebilirliği sağlayın.
- Shadow DOM ve lazy rendering ile performansı optimize edin.
- Bir framework'e bağımlı kalmadan temalandırma ve duyarlılık sağlayın.
- Yerel olarak çalıştırılabilecek testler ve küçük bir build kurulumu ekleyin.
Temel çıktılar:
- Birden fazla uygulamada kullanabileceğiniz, doğrudan entegre edilebilir bir profil kartı (profile-card) web bileşeni.
- Bileşen mantığı, stil ve veri arasında net bir ayrım.
- Bileşeni ek slotlar, prop'lar veya mikro etkileşimlerle genişletmek için bir rehber.
Bu bileşeni HTML'inizde şu şekilde kullanabilirsiniz:
<profile-card id="pc" name="Alex" title="Engineer">
<span slot="bio">Custom bio here.</span>
<span slot="social">Twitter: @alex</span>
</profile-card>
Bu bileşen, stilleri kapsüllemek ve sızıntıları önlemek için Shadow DOM kullanır. Ayrıca temalandırma için CSS değişkenlerini ve erişilebilirlik için ARIA özniteliklerini kullanır.