Tarih Meydan Okuması Web'de Giriş

Tarih seçimi web'deki en yaygın henüz sinir bozucu etkileşimlerin biridir. Yerli tarayıcı tarihi seçiciler cihaz, giriş yöntemi veya yardımcı teknolojiden bağımsız olarak hizmet eden kapsayıcı bir bileşen haline gelir.

erişilebilir bir tarih seçici sadece WCAG yönergelerine uygun değildir. Doğrudan gerçek kullanıcıları etkiler: Ekran okuyucularına, cihazlar kullanan kişiler, net görsel culardan yararlanan motor bozuklukları ile bireyler.Burada bulunan teknikler herhangi bir JavaScript çerçevesine uygulanır, ancak örnekler onlara Reaktör Vue veya başka bir ortama adapte olabilirsiniz.

Date Pickers için erişilebilirlik Vakıfları

WCAG Başarı Kriterleri Anlamak

Birkaç WCAG 2.1 başarı kriteri doğrudan tarih seçicileri için geçerlidir. [SC 2.4.7)Keyboard erişilebilirliği) (SC 2.1.1) tüm işlevselliğin klavye üzerinden opera olmasını gerektirir.[/FONTD][3][FONT) görünürlüğün açık göstergesini talep eder.[FONT=D)[D)[D)[Ddd|Ddd|Ddd|Ddd|D)[FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FO

Semantic HTML Back Bone

Ana Sayfa: 2) Net olarak HTML öğeleri ile başlayın.Etmenliksel olarak tabular veriyi temsil etmek için bir araya gelmeniz gerekir.Her tarih hücresi, yardımcı teknolojiler aracılığıyla doğal olarak odaklanılabilir ve aktive edilebilir bir deneyim oluşturmanız gerekir.Internal klavye desteğinden yoksundur ve ağarmalıdır.

Tarih Picker Kombinasyonu

Core User Interface Elements

Tam bir tarih seçicileyicinin bu görsel ve işlevsel bileşenlere ihtiyacı vardır:

  • Seçilen tarihi gösteren ve takvim popupını tetikleyen bir metin girişi alanı
  • Bir ay/yıl başlığı içeren bir takvim popup, değişen aylar boyunca navigasyon düğmeleri ve bir gün ızgara
  • Bugünün tarihi görsel yönelim için vurgulandı
  • Seçilen tarih açıkça farklı bir stil ile işaretlendi
  • Net bir düğme veya Takvimi seçmeden kaçınma anahtarı

Devlet Yönetimi

İç olarak, tarih seçici birkaç devlet parçası takip etmelidir: şu anda odaklanmış tarih (bu, seçilen tarihten farklı olabilir), görünür ay ve yıl, seçilmiş tarih değeri ve takvim popup açık olup olmadığını ve DOM ve ARIA özelliklerini devlet değişikliklerine geri yükleyin. Sepa state display from make the component to debug and expand with features like date ranges or multiple months.

HTML Yapısını Accessability için Yapın

Giriş Alanı

Giriş alanı, kullanıcının birincil etkileşim noktasıdır. ARIA özelliklerini kullanarak takvim popup ile ilişkisini iletişim kurması gerekir:

[FONT=0) Erişilebilir giriş örneği:[Dönem:[Dönemli giriş örneği:[Dönem:0)

<label for="date-picker-input">Departure date</label>
<input type="text"
 id="date-picker-input"
 role="combobox"
 aria-haspopup="dialog"
 aria-expanded="false"
 aria-controls="datepicker-calendar"
 aria-autocomplete="none"
 readonly
 placeholder="MM/DD/YYYY">

[[Dind|Bind|Dint V V V V V V V B V V B V V FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FO

Takvim Dialog

Takvim popup, [[0.dialog[DÜT:1) ARIA Authoring Practices'ten gelen deseni takip eder.Brezilya'da giriş alanına bir ayak uydurma olarak verilmelidir, genellikle konumlandırmaya yarayan bir konteynere bağlanır:

<div id="datepicker-calendar"
 role="dialog"
 aria-modal="true"
 aria-label="Choose a date"
 hidden>
 <div class="calendar-header">
 <button class="prev-month" aria-label="Previous month">&lsaquo;</button>
 <h3 id="calendar-month-year" aria-live="polite">January 2025</h3>
 <button class="next-month" aria-label="Next month">&rsaquo;</button>
 </div>
 <table class="calendar-grid" role="grid" aria-labelledby="calendar-month-year">
 <thead>
 <tr>
 <th scope="col"><abbr title="Sunday">Sun</abbr></th>
 <th scope="col"><abbr title="Monday">Mon</abbr></th>
 <th scope="col"><abbr title="Tuesday">Tue</abbr></th>
 <th scope="col"><abbr title="Wednesday">Wed</abbr></th>
 <th scope="col"><abbr title="Thursday">Thu</abbr></th>
 <th scope="col"><abbr title="Friday">Fri</abbr></th>
 <th scope="col"><abbr title="Saturday">Sat</abbr></th>
 </tr>
 </thead>
 <tbody>
 <!-- Date rows rendered dynamically -->
 </tbody>
 </table>
 <div class="calendar-footer">
 <button class="today-button">Today</button>
 </div>
</div>

Tabloda ekran okuyucuları için uygun bir navigasyon sağlar.Her tarih hücresi, kullanıcıyı kesmeden ay değişiklikleri ilan eder. ”

Uygulamalı Klavye Navigasyon

Focus Management Stratejik

Takvim açıldığında, şu anda seçilmiş tarihe veya bugün seçimin olmadığı tarihte hareket eder.Bu, diyalog içinde ilk ve son odak noktası unsurları takip eder.).

Klavye Event Mapping

Tarih seçiciler tutarlı bir klavye arayüzü talep eder.TheurFLT:0)ARIA ağ modeli[DKT:1) standart anahtar haritalarını navigating tabular için tanımlar:

  • [FONT:0]Arrow anahtarları[Dönetici:0) Bir gün şu anda hareket eder. Mevcut ayın ötesine hareket ederken, takvim otomatik olarak bitişik ayya geçer.
  • [FONT:0]Home ve End[DÜDÜDÜDÜDÜDÜDÜDÜDÜDÜDÜDÜŞÜNÜDÜŞÜNÜDÜŞÜNÜŞÜNÜDÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜye Devam Eden Ayların ilk veya son gününe odaklanıyor.
  • [0]Page Up ve Page Down[[Dönetici:0] ayın gününü korurken önceki veya sonraki ay (gömün son gününe kadar tıkanır).
  • [FONT=0)Enter veya Uzay[[Dönetici:0) şu anda odaklanmış tarihi ve takvimi kapatıyor.
  • [FONT:0]Escape[Dönetici:0) Takvime yakın ve giriş alanına geri döner.
  • [FONT:0)Tab[DÜDÜT:1) diyalog bileşenleri (ayda navigasyon düğmeleri, ızgara, bugün düğmeleri) içinde odaklanır.

roving tabindex

Sayfanın tamamının tekrar tekrar ağladığı ve tekrar el basması gerektiği anlamına gelir.Sadece bir tarih düğmesi herhangi bir zamanda, diğer tarih düğmeleri ile ilgili olarak, başka tarih düğmeleri ile ilgili olarak, Tab'a bir kez basarak, bir sonraki odak noktasının dışına doğru hareket ettirilebilir bir şekilde hareket eder.

ARIA Attributes for Ekran Okuyucu Destek

Dinamik ARIA Devlet Yönetimi

Ekran okuyucuları, devlet değişiklikleri ile iletişim kurmak için ARIA özelliklerine güveniyor. Bu özellikleri gerçek zamanlı olarak kullanıcı tarih seçici ile etkileşime girer:

  • [FONT:0] ([Dönemli) ve ([Döncü))))))))))))))))))))))))))))))))))))))))
  • [FONT=0] ([Dönetici)))))))))))) ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇
  • [FONT=0]([Dönetici) seçilen tarih düğmesine basarak, diğer tüm diğerlerinde bulunan (Ücretsiz) doğru bir şekilde destek veren, ancak doğru bir şekilde destek veren bir durumdur.
  • [FONT:0]aria-aktifler, girişte : şu anda odaklanmış tarih hücresinin kimliğine işaret edin.
  • [FONT=0] [FONT=0}[Dönetici:0] [FONT=0]

Context Changes

Kullanıcı yeni bir ay boyunca ilerlerken, bir canlı bölge kullanarak ay ve yıl ilan eder.Birçok uygulama, bildirimde belirtilen veya aydaki değişiklikler gibi daha az acil güncellemeler için bölgeyi güncellemek için "15 Ocak 2025" seçilir.

JavaScript Ayrıntıları Uygulamalı JavaScript

İlkleme ve Yapılandırma

Yapılama seçeneklerini kabul eden bir tarihPicker sınıfı veya fabrika işlevi oluşturun: giriş elemanı, tarih formatı, minimum ve maksimum tarihler ve tarih seçimi için çağrı işlevleri. ilk olarak, girişte dinleyicileri ayarlayarak ve ilk takvim ayını gerçekleştirin:

class AccessibleDatePicker {
 constructor(input, options = {}) {
 this.input = input;
 this.options = Object.assign({
 format: 'MM/DD/YYYY',
 minDate: null,
 maxDate: null,
 onDateSelect: () => {}
 }, options);

 this.selectedDate = null;
 this.focusedDate = null;
 this.currentMonth = new Date().getMonth();
 this.currentYear = new Date().getFullYear();
 this.isOpen = false;

 this.calendar = this.buildCalendarElement();
 this.setupEventListeners();
 }
 // ... methods
}

Takvim Grid'i yazdırmak

Form fonksiyonu ayın ilk gününü hesaplar, aydaki gün sayısı ve bir sonraki aydan itibaren ağ doldurmanız için herhangi bir iz alır.Her tarih düğmesi, insan hazır tarihi ile ilgili veri özellikleri alır:

renderMonth() {
 const firstDay = new Date(this.currentYear, this.currentMonth, 1).getDay();
 const daysInMonth = new Date(this.currentYear, this.currentMonth + 1, 0).getDate();
 const daysInPrevMonth = new Date(this.currentYear, this.currentMonth, 0).getDate();

 let cells = [];
 // Add trailing days from previous month
 for (let i = firstDay - 1; i >= 0; i--) {
 cells.push(this.createDateButton(daysInPrevMonth - i, this.currentMonth - 1, this.currentYear, true));
 }
 // Add days of current month
 for (let day = 1; day <= daysInMonth; day++) {
 cells.push(this.createDateButton(day, this.currentMonth, this.currentYear));
 }
 // Add leading days of next month
 const remaining = 42 - cells.length; // 6 rows × 7 columns
 for (let day = 1; day <= remaining; day++) {
 cells.push(this.createDateButton(day, this.currentMonth + 1, this.currentYear, true));
 }
 // Render into table body...
}

Dinamik İçerik için Olay Delegasyon

Olayı her tarih düğmesine ayrı olarak dinlemek yerine, kanal konteynerinde olay delegasyonu kullanın.GÖRÜŞÜNCÜŞÜNCÜŞÜNCÜŞÜNCÜŞÜNCÜŞÜNCÜŞÜNCÜŞÜNCÜŞÜNCÜŞÜNCÜŞÜNCÜŞÜNCÜŞÜNLEŞİMLER İÇİNDEKİLERİNİNLİKLER İÇİNDEŞEKLER İÇİNDEKİLERİNİN BÜYÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞ

Date Selection Flow

Bir kullanıcı bir tarih seçtiğinde, anahtarlama formatına göre tarih, giriş değerini günceller ve seçilen tarihi iç içe saklar ve [[DeltD12|Döneticileri ve giriş noktalarına geri dönerler.Rezervasyonlar için diğer takvimler ve odaklar geri dönülebilir.Daha önce seçilen hücreyi güncellemek için aşağıdaki özellikleri döndürür.

Accessability için Görsel Styling

Contrast ve Color Bağımsızlık

Renk asla devletin tek göstergesi olmamalıdır. Arka renkli, metin rengi, sınır ve metin dekorasyonu seçilerek, odaklanmış ve engelli ülkelerle iletişim kurmak için 3:1'in en az aksine, WC SC 1.4.3 ve 1.4.11 için metin içeriği için.

Focus Gösterge Tasarım Tasarım

Odak göstergesi tüm çevreleyen elementlere karşı görünür olmalıdır.AİLMEYE İÇERİĞİ veya DÖRT:43) yeterli kalınlık ve kontrast ile ilgili olarak, varsayılan tarayıcıyı değiştirmeden önce silmeden önce varsayılan tarayıcıyı geri yüklemeden kaçının.3 Varsayılan ana plana karşı sağlam bir taslak ve seçilmiş devlet geçmişine karşı görünür.Test the focus indicator against the selected date state, disabled state, and hover state to verifyable.

Touch Target Sizing

Her tarih düğmesi, 44x44 CSS pikselinin minimum dokunuş hedefine sahip olmalıdır, WCAG SC 25.8 tarafından önerilen gibi, mobil cihazlara, tabletlere ve kullanıcıların dokunuş veya stilist girişini kullanabilecekleri düşük oranlarda.For Space constraints also meet these minimum values.If space constraints require less regions using visual ⁇ or improve the clickable field using 2019-04-1T:44 p-elements.

Accessability için Tarih Picker'i Test Etmek

Manual Klavye Testi

Sadece bir klavye kullanarak bileşeni test edin.Kat girişe, takvime girin veya Uzay ile açın ve tüm tarihler boyunca ok anahtarlarını kullanarak gidin. Escape'in popup'u kapatıp girişleri dikkate almadan önce düzeltmesini sağlayın.

Ekran Okuyucu Testi

En az iki ekran okuyucu ile test edin.Sc.A kombinasyonu:0)NVDA[DÜSÜSÜye Olmayanlar ve Firefox ile 0:2)JAWS) Chrome ekran okuyucu kullanıcıların çoğunluğunu kapsarken iletişim kuruyor.Pify that the screen okuyucuyu duyurarak, the month and year, and year, and the date as the user navigates.

Otomatik Test Araçları

Otomatik araçları, ortak erişilebilirlik sorunlarını yakalamak için otomatik olarak kullanın:0)axe DevTools) veya )Işıkhouse) Bu araçlar eksik ARIA özelliklerini tespit edebilir, renk kontrastını ve eksik etiketleri tespit edemez. ancak, otomatik test ekran okuyucu duyurularını değerlendirmek için gerekli kalır.

Gerçek Dünya Bütünleşmeleri

Uluslararasılaşma ve Yerelleştirme

Tarih seçiciler küresel bir seyirciye hizmet eder. Yerele saygı duyan birçok yerele destek verin. "Önceki ay" ve "Bir tarih" gibi ARIA etiketleri için çeviriler sağlayın.Intl.DateTimesFormat Belgeleri[DateTimes1Dateware Date|Date-aware date formatting)[değiştir | kaynağı değiştir]

Touch and Mobile Optimizasyon

Mobil cihazlarda, sanal klavye ile çakışmadan kaçınmak için takvim dialogu. Tüm ekranlarda, tarih seçimi arayüzüne adanmış tüm görüş alanı ile, gerçek mobil cihazlarda sürekli bir geliştirme olarak test edin.

Performans ve Grafik Boyut

Özel bir tarih seçicisi uygulamanızı bloatlamamalıdır. JavaScript paketini 10KB altında tutmak ve gereksiz bağımlılıklardan kaçınmak ve etkin kod yazmaktan kaçınmak için yapılandırın.Rezersiz-inableize the calendar DOM only when the user first opens the picker, rather than it on page load. Clean up eventers and DOM Referansları when the component is captured to avoid class replica. Lazy-initialize the calendar DOM only when the user first opens the picker.

Edge Cases

Engelli ve Kısıtılmış Tarihler

Bir kullanıcı sekmelerine karşı kontrol edilen ve ağ üzerinden yapılan bir kullanıcı sekmelerini kullanarak, belirli bir dışlama kurallarının tamamının neden kullanılamadığı veya klavye navigasyonundan dışlanmadığı durumlarda, görsel olarak, engelli tarihler azaltılmalıdır.

Null Values and Clear Actions

Seçilen tarihi takvim ayağı içinde net bir düğme sağlayarak veya kullanıcının şu anda seçilmiş tarihi tekrar açmalarına izin vererek açıklayın.Kayıtın seçilmesi ne zaman, giriş yeri sahibinin, önceden görüntülenmediği ay ile açık bir şekilde göstermesi gerekir.

Tarayıcı ve Framework Uyumluluk

Chrome, Firefox ve Edge'in tarih seçiciliğini test edin. Safari'ye özel dikkat edin, ki bu da tarihsel olarak şöyleydi:0) devlet ve yaşam döngüsünü yönetmekten faydalanan özel bir kancada, Vue'ye, sadece kullanıcı tarafından gezinirken, tıklama etkileşimlerine ve giriş olaylarına tepki vermek için geçerlidir.

Her şeyi bir araya getirmek

erişilebilir bir tarih seçicisi, semantik HTML'nin temeline inşa edilmiştir, dikkatli ARIA yönetimi ve sağlam klavye etkinliği işleme.The input field uses a combobox semantics to communicate its relationship to the the same the network of dates trackving tabindex pattern for effective klavye navigasyon. ARIA attributes dynamically to reflect the current state, screen readers receive notifications contexts through live regions, and visual design maintains enough contrast contrast and open topics indicator.

Başarının gerçek ölçüsü, eklediğiniz birçok ARIA özelliği değil, ama deneyim yardımcı teknoloji kullanıcıları için ne kadar sorunsuz hissediyor. iyi yerleşik bir tarih seçici cihazı, burada açıklanan desenleri takip ederek, herkese hizmet eden bir bileşen yaratırsınız.

Accessability, son bir parlatıcı veya son bir parlamento aşamasının ayrılmaz bir parçasıdır.En başından itibaren erişilebilirlik ile inşa ettiğinizde, tüm kullanıcılar için daha iyi bir deneyim sunmak ve sunmak için daha iyi bir deneyim sunmaktır.The date picker sadece bir bileşendir, ancak burada yaptığınız her interaktif elementin arasında uygulamanız gereken ilkelerdir.