Əlçatanlığı təmin etmək üçün hansı CSS xüsusiyyətindən istifadə edərdiniz?

aria-hidden: Gizlədir elementi köməkçi texnologiyalardan (ekran oxuyucuları) əgər onun mövcudluğu vizual olsa da, semantik baxımdan artıq və ya məzmunun anlaşılmasına zərərli olarsa.

tabindex: Klaviatura ilə naviqasiya zamanı interaktiv elementlərin fokus sırasını idarə edir. -1 elementi standart sıralamadan çıxarır, 0 onu daxil edir və müsbət dəyərlər açıq bir sıralama təyin edir (əksər hallarda tövsiyə edilmir).

outline: Element fokusda olduqda onun ətrafında çərçivə təyin edir. Bu, istifadəçilərin aktiv elementi görə bilməsi üçün vacibdir və ya stilizə edilməlidir.

visually-hidden: Elementi vizual olaraq gizlədir, lakin ekran oxuyucuları üçün əlçatanlığını saxlayır. Adətən, forma etiketlərini (label) gizlətmək üçün istifadə olunur, element görünəndə (məsələn, ikon düymə).

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

pointer-events: none: Elementlə qarşılıqlı əlaqəni mouse vasitəsilə deaktiv edir, lakin klaviatura və ekran oxuyucuları üçün əlçatanlığı təsir etmir. Aktiv sahələr üzərində dekorativ elementlər üçün istifadə edilə bilər.

cursor: pointer: İstifadəçi interaktiv elementlərin üzərinə gəldikdə kursor görünüşünü dəyişir, klik edilə biləcəyini göstərir.

color və background-color: Mətn və fon arasında kifayət qədər kontrast təmin etmək üçün vacibdir, bu, görmə qabiliyyəti zəif istifadəçilər üçün kritikdir. WCAG standartlarına uyğun kontrast yoxlama vasitələrindən istifadə etmək tövsiyə olunur.