Niquelao » Archiwum bloga » Dostępny kalendarz w JavaScript (niepotrzebny, ale przydatny)

» Archiwum bloga » Dostępny kalendarz w JavaScript (niepotrzebny, ale przydatny) Niquelao - Dostępność Kalendarz dostępny w JavaScript (niepotrzebny, ale przydatny) 11 lutego 2007 przez Rumoroso W polach formularza, w których należy wprowadzić datę, w celu poprawy doświadczenia użytkownika, a jednocześnie zwiększenia kontroli nad formatem danych, można umieścić kalendarz za pomocą JavaScript. Wiem, przeklęte słowo, ale jeśli zrobi się to ostrożnie i z rozwagą, nie musi mieć negatywnych skutków dla standardów i dostępności.

Cele Na początku ustaliłem dwa główne cele, które bardziej niż celami były wytycznymi podczas jego tworzenia: Aby był dostępny i nieinwazyjny. Oczywiście, przy braku obsługi JavaScript nie oferuje się opcji rozwijania kalendarza, ale jeśli jest obsługa… dlaczego nie uczynić generowanej treści dostępną i użyteczną? Aby był łatwy do wdrożenia i używania. Szukałem takiego rozwiązania, aby programiści, którzy chcą go wdrożyć na swoich stronach internetowych, nie musieli wprowadzać dodatkowego kodu.

Tak jak w CSS używa się różnych typów selektorów (elementów, id, klas,…) do przypisywania stylów do różnych części naszych dokumentów, dlaczego nie użyć tego samego do przypisywania zachowań? Ponadto jako cele drugorzędne są: optymalizacja, generalizacja, internacjonalizacja,… (będąc realistą, musiałem usunąć cele związane z podrywaniem i zarabianiem pieniędzy.) Przykład Aby sprawdzić jego działanie, możecie przejść do przykładu i pobrać go . Włączanie go do naszych dokumentów Włączenie kalendarza do naszego dokumentu jest tak proste, jak umieszczenie odpowiedniego elementu script w head : Kalendarz załaduje się dla każdego pola tekstowego, które ma dołączoną klasę „ fecha “.

Format daty wprowadza się w pierwszej linii skryptu. Tak więc, jeśli na przykład chce się, aby data zachowywała kolejność dzień/miesiąc/rok, nie umieszczając 0 przed dniem, gdy składa się on z jednej cyfry, i umieszczając je w miesiącu, gdy jest to konieczne: var formato = ‘d/mm/y’; Aby wyświetlić kalendarz obok pola tekstowego, musi ono mieć klasę „fecha”. Ponadto wszystkie możliwe parametry wprowadza się jako klasy.

Pełna lista jest następująca: Załaduj kalendarz (wymagane): fecha Daty wcześniejsze niż dziś: prev Daty późniejsze niż dziś: post Zakres lat: rangX (gdzie X to liczba lat) Nie uwzględnia się dnia bieżącego: todnact Zalety Wśród zalet, które można mu przypisać, mamy: Łatwy w użyciu i wdrożeniu. Nie jest inwazyjny.

Kod i generowana treść są dostępne (znaczniki, organizacja, treść,…) i są użyteczne dzięki użyciu technologii wspomagających (czytnik ekranu,…). W tym punkcie uwzględniono, gdzie trafia fokus zarówno przy wyświetlaniu, jak i podczas działania oraz przy znikaniu. Tak więc, gdy się wyświetla, fokus trafia bezpośrednio na selektor lat, zachowując logiczną kolejność przy tabulacji od niego, a gdy kalendarz się zamyka (poprzez link zamykający lub po wybraniu daty), fokus trafia na pole tekstowe, z którym był powiązany.

Related: UserWay — Widget de accesibilidad con plan gratuito para empezar hoy mismo.

Ułatwia się nawigację po nim niezależnie od urządzenia. Można nawigować, używając dowolnego urządzenia, za pomocą którego możemy przeglądać sieć. Jego parametry są łatwo konfigurowalne, a jego wywołanie bardzo proste (poprzez użycie nazw klas).

Język pobiera bezpośrednio z dokumentu nadrzędnego, co pozwala dodawać nowe tłumaczenia do kodu. W przypadku, gdy język nie jest zadeklarowany w dokumencie (co nie powinno mieć miejsca), domyślnie używany będzie hiszpański. Obecnie, oprócz hiszpańskiego, zawiera angielski. Dodatkowo sprawiono, że rozpoznaje, czy jest to angielski amerykański, nie dlatego, że miałaby się zmienić treść, ale aby zmienić układ dni tygodnia (niedziela umieszczana jest pierwsza).

Style zastosowane do kalendarza są dołączane poprzez CSS podłączony za pomocą skryptu, dzięki czemu przy braku obsługi tego ostatniego optymalizuje się pobieranie dokumentu, ponieważ nie wywołuje się tego arkusza stylów. Dodano klasy w taki sposób, aby można było zastosować style na dowolnej z komórek tabeli (dni aktywne, dni nieaktywne, dzień bieżący), a także style specyficzne dla sobót lub niedziel. Generowany kod Poniżej zamieszczam część kodu generowanego przez skrypt.

Worth a look: AudioEye — Accesibilidad gestionada: automatización combinada con revisión humana.

Jak można zauważyć (i jak już powiedziałem), uwzględnia się nazwy klas i id, aby móc kontrolować układ za pomocą arkusza stylów.

Wniosek Na zakończenie… co można by powiedzieć o tym kalendarzu?… cóż, że „ jest niepotrzebny… ale przydatny ” i że „ nie ma negatywnych skutków w zakresie dostępności “. …a propos, jaki dziś dzień?

Kategoria: Dostępność, Javascript —> 2 komentarze juan 16 marca 2007 jest świetny, ale czasami pojawia się u mnie błąd przy wybieraniu daty lub przechodzeniu między latami, i przestaje działać IE, a w Firefoksie też. wiesz co to jest? Rumoroso 21 sierpnia 2008 Sprawdź, czy nie wysyła zawartości pola lub czy w rzeczywistości nie wysyła zmiennej.

Skrypt nie ingeruje w wysyłanie formularza, więc problem może pochodzić z innej strony. Pozdrawiam Możesz śledzić komentarze dzięki kanałowi RSS 2.0 . Możesz też zostawić komentarz , albo wysłać trackback ze swojej strony. Poprzedni artykuł: Gratulacje TAW Następny artykuł: acc_calendar v1.1 Zostaw swój komentarz Pola Nazwa i Email są obowiązkowe Dodaj nas do…

Tagi, które ogólnie wyróżniamy dostępność bert bos blockquote bug cañas cytaty cite zachowanie wiedza CSS escuas standardy fieldset Firefox format formularz źródła hidden ie IE 7 informacja javascript legend lista niquelando obowiązkowe opera playa q squash wakacje w3c WCAG xhtml Ta praca jest objęta licencją Creative Commons .

P.S. A few readers have asked which superposición de accesibilidad (overlay) we actually reach for — it's accessiBe; take a look here if you want the current details.